9-5 ページのレイアウト
作成するページのレイアウトは、大まかに 載せたい内容ごとにボックスで囲んで掲載すると、CSSでデザインを設定した際に項目ごとに背景色を変えられたり、改装やメンテナンスをする際に少しCSSを変更するだけで見た目が変えられるので、非常に手間が省けて楽にサイトを管理する事が出来ます。
【 例 】
この講座のレイアウトは基本的に上記のようになっております。
- 「Header」部分
現在の位置と次のページに繋がるリンク、HP-TIPS内検索のフォームを掲載 - 「Menu」部分
同ページ内の目次 - 「Main」部分
講座内容を記載 - 「Footer」部分
最初と同じナビゲーションを掲載しております。
企業などのHPではよく「Header」部分に会社のロゴなどが掲載されており、「Footer」に連絡先や利用規約に繋がるリンクが掲載されていたりします。 （この場合の「Header」とは、HTMLのソース部分で書く <head>～</head> とは全く関係はございません）。
9-5-1 名前の付け方
ボックス（divタグで囲む部分）に付ける名前は半角英数字であれば自由に付ける事が出来ますが、出来るだけ 『意味のあるもの』 にした方が良いようです。
【 見本 】
- 大枠 （上の図解ならばピンク枠部分）
- document
- container
- content
- wrapper
- menu
- main
- その他
- info （information）
- memo
- update
- navi （navigation）
- footer
上記にあげたのはほんの一例です（他の名前は素敵サイト様などを参照して下さいね）。内容ごとにブロック（ボックス）に分けて掲載する事で、見た目にも判りやすい構造のサイトを作る事が出来ます。 他のメリットとしては、コンピューターにも理解しやすい名前を付ける事によって、（レイアウトや重さにもよりますが）「main」や「menu」と名前を付けた部分が優先して表示されるという利点もあります。
また何となくですが、検索サイトのGoogle（グーグル）では「update」が、Yahoo!では「info」が優先して索引化されて行くような気が致します（気がするだけ……＾＾；）
9-5-2 その他のレイアウト
よく見かけるレイアウトを幾つかピックアップしてみました。もし宜しければご参考下さいませ。
下段は主に日記（ブログ）のレイアウトで見かけるものです。（2カラム［縦2つにナビ列と日記列に分かれている物］と、3カラム［縦3つに分かれており、そのうちナビが2つ、日記列が一つの物］とが有ります）。 あくまでも定番のレイアウトなので、各自ご自由に作成して下さいね。
9-5-3 書き方
ボックスでレイアウトをする際に書く方法です。ブロックレベルのデザインが出来る「div」タグを利用して作成致します。
<body> ～ </body> 内に記述して下さい。
<div id="menu">
此処にメニュー項目になる物を書きます。
</div>
<div id="main">
此処にメインになる物を書きます。
</div>
</div>
この書き方でサンプルに上げたレイアウトでいう「ａ」と同じ形の物が出来ます。CSSを利用すれば「menu」のみに背景色を設定したり、CSSの指定を変更するだけで「d」や「e」のレイアウトにする事も出来ます。
ちなみに「div」というタグ自体には「h1」の見出しや「strong」の強調といった感じの意味はありません。個々の中身をまとめ、その範囲を特定し決める為のタグです（複数ある段落を一つにまとめて「章」にする感じをイメージすると判りやすいかも知れません）。
9-5-4 おまけ （ボックスデザインの考え方）
余談になりますがこのボックス（ブロックレベル）のレイアウト方法は、テキストエディター等を利用してHPを作り上げていく方には馴染みが深いものなのですが、HP制作ソフトなどを利用すると自動でdivタグが挿入されてしまう為に、余程の事がない限りは意識しにくい物かも知れません。
しかし綺麗に整理整頓された押入れや本棚が使いやすいように、知っていると凄く得をする情報の一つです。（本棚の整理も出版社ごとに本を並べたり、また作家ごとに本を並べたりと、限られたスペースを有効利用する点である意味ボックスレイアウトと似ている所があります）。 次のページではこのボックスレイアウトをする為に必要な「ブロックレベル」要素と、その中身を彩る為の「インライン」要素を説明致します。