このサイトのページ作成過程
スタイルシートを用いたページ書きかえの試み
この前までのここのサイトのページは、市販のホームページビルダー（IBM。バージョン９）を使って、書いてサーバにアップしていました。
しかし先日、ネットの知人のパソコンが相次いで故障して買い替え、OSがXPからVistaに変わったりすると、今までの市販ソフトが使えなくなるという現実に直面し、PCを買い替えるたびに、ホームページ作成ソフトを買い替えるのは大変だなぁと考えるようになりました。
それで、市販のホームページ作成ソフトを使わずに、ネットで見られるページを書いてみようということで、試作してみました。
せっかく書きかえるので、今借りて使っているブログ（FC2ブログです）のように、文章の記述はHTMLで書いて、デザインの指定は主にCSS（スタイルシート）で書いてみました。
初めての試みですので、あまり難しいテクニックはまだ使わず、単純な作りで済むようなデザイン指定にしてあるのですが、表示に不具合等ありましたら、お手数ですがご連絡いただけますと幸いです。
できる範囲で、対応していければと考えております。またトップページ左上より、以前のホームページデザインにも飛べるようにしてあります。しばらくの間、そちらも残しておきます。
ページ内、もしくは外部から読み込むスタイルシート
CSS（スタイルシート）をページ内に埋めているものと、外部スタイルシートでまとめて表示デザインを指定しているページがあります。
トップページ、ゲームサイトなど、ページの内部に埋めてあるものは、</head>前の、<style>〜</style>内に、文字色、字体、行間など文字（テキスト）についての設定、枠線の色、形状についての設定などが、各classごとに書かれてあります。
その他の多くのページは一括して、一枚の外部スタイルシートでデザインの指定をしてあるのですが、そちらのファイル名はここでは、「 komoriuta.css 」としてあります。
例えば、今お読みになっているこのページのソースを見ると、このファイル名を呼び出すように、指定が一行書かれてあります。
（ <link rel="stylesheet" href="komoriuta.css" type="text/css"> ３つのうちの真ん中です ）
こちらのサイトトップページのURLに、上の「 」内の.cssファイル名をひとつ加えてブラウザにうつすと、アップしてある外部スタイルシートの記述が書かれて出てきます。（Windowsならメモ帳で）
まだ初作、未熟で参考にもならないと思いますが、興味ある方はご覧になってください。（記載内容はしばしば変更ありです。）
当面の課題 ( 2008.6 ）
以前のスタイルシートを使わないページ書きでは、テーブルタグに頼って、囲いを作って大まかな配置をしていました。
今は、ゲームサイトでテーブルをたくさん並べましたが、他のページでは、全体の配置、レイアウトのためにテーブルタグを使うことはしていません。
float:left; または float:right;で左・右の指定をして、左右に画面を分割して書くことができれば、パソコン画面を開いた時のためにスペースの有効利用ができるので、閲覧環境によって左右分割が崩れることなく、分割の指定が書けるようになるといいなと考えています。
以下、ページを書くにあたって参考にさせていただいた、ホームページ作成支援サイトのリンク集です。
特にすぐ下のとほほさんのサイトは、書かれている内容そのものも勉強になったのですが、サイト全体の構成、各ページのデザインが、HTML、CSS、Javaなど、実際にどう指定されて書かれているのかを、いろいろと参考にさせていただきました。
プロのHPデザイナーが作った企業や行政のHPや、HP作成ソフトで書かれた個人のHPが多い中、このような手作りのきちんと書かれたホームページの存在そのものが、貴重だと感じています。
とほほのWWW入門 （ホームのURL http://www.tohoho-web.com/）
- ホームページ作成に必要なHTML、CSS、CGI、Java等が載っています。情報としても信頼性が高いと聞いています。まだまだ読み始め、勉強し始めたばかりです。
「ダウンロード」から、このサイトにアップロードされている各種ファイル（html,css,image等）が、一括でダウンロードできるので、そちらを開いて、実際のページ書きに応用させていただいたものもあります。
牛飼いとアイコンの部屋- フリー素材サイトとしても名高いサイトですが、「HTLM MEMO」、画像加工ページなど、ホームページ作成にあたってとても勉強になることが書かれてある箇所があります。
無料ホームページ作成〜HomepageManager〜『@BG』- 市販のホームページビルダーのように、タグから一行ずつ書かなくてもページを書けるフリーソフト「HomepageManager」（hpman)
の詳しい使い方サイト。
HTMLのタグを自分で書かなくてよいというのが主目的のソフトのようでしたので、今回はこちらは使わず、HTML、CSSなどは、地道にメモ帳に書いていきました。
パソコンを買い替える度に、市販のHP作成ソフトもバージョンアップ買い替えが必要な場合があるので、タグから全部自分で書くのは困るが、お金をかけずにホームページを書いてみたいという方におすすめです。
Color's 〜色、カラーチャートなど色彩に関する入門サイト〜
WEB色見本 原色大辞典-
カラーチャートのサイトはたくさんありますが、今回はこれらのサイトを利用しました。
閲覧環境は気になりますが、セーフカラー216色以外のカラーコードも、背景色、文字色に利用しました。
スタイルシートデザインを始めたい方へ −WEB工房きくちゃん−- ul li の装飾法を探していて、たどり着いたサイト。まだほとんど内容を把握していません。スタイルシートの実践例が多く載っているので、これから勉強、活用していきたいです。
- ジャムハウスのホームページ
- ワード、エクセル、ホームページ作成、インターネットのルール等、パソコン関係中心の書籍出版社。
「いますぐスタイルシート&Java Scriptが使える本」という書籍を持っているのですが、そちらの素材サンプル等をダウンロードさせていただきました。
作成ページはできるだけ自分で指導通り書いてみるよう努力しましたが、どうしても自力でサンプル通りに完成できなかったページは、その原因をさぐるために実際に見せていただきました。
サイトのトップページ、その他のページも、上の書籍の手順で作ったサンプルページから、いろいろ自分でつぎはぎして書いていったものがほとんどなので、上の本にはお世話になりました。
メモ帳からの手書きは、慣れたら思ったよりも苦にならない作業でした。
最初に本文を大ざっぱに写し書いてしまい、あとからスタイルシートで文字色、余白の設定などデザインを足していくやり方で書いていきました。
自然いっぱいの素材集- 花、風景など、自然写真の素材集。ホームページの固定背景、デスクトップの壁紙用の背景素材が多いです。
トップページの大きな固定背景の女の子が、一部ブラウザ（Firefox）でスクロールしてしまって困ったのですが、こちらの素材集サイトの作りを見させていただき、固定したい背景の位置も好きに指定できるようになったので、どのブラウザでも固定してくれるようになりました。
目に優しく美しい写真素材がたくさんなので、こちらの写真素材もときどき、トップページの背景に使わせていただきたいと思っています。
- Another HTML-lint
- ページ上、下のsitemap（サイトマップ）で目次を一読すると、このサイトで扱っている対象についてわかります。
「ゲートウェイサーヴィス」に、HTML文書の文法チェッカーがあるので、そちらを使わせていただいています。
シェアレジDLの場合「作者にビールをおごる」の表現に、なかなかユーモアを感じます。
△HOME ｜ page TOP