三十五日目！（CSSレイアウト）

●レイアウトの種類
Webデザインで一般に利用されるレイアウトパターンにはさまざまな種類があり、カラム（段組）数の違いで考えてみると、１カラムレイアウト、２カラムレイアウト、３カラムレイアウトが代表的。情報量の多いニュース系サイトなどでは、４カラム以上のレイアウトも。

次にコンテンツの幅に注目。ブラウザのウィンドウサイズや文字サイズを変更しても一定の幅を保ったままのソリッド（固定幅）レイアウト、ブラウザのウィンドウサイズにあわせて幅が変わるリキッド（変動幅）レイアウト、文字サイズにあわせて幅や高さが変わるエラスティックレイアウトの３つに大別できす。

また、キャンペーンサイトやディザーサイトなどのプロモーション重視のサイトでは、ブラウザを一枚の紙に見立てたようなDTP色の強いフリーレイアウトを多く採用される。


●１カラムレイアウト
個人ブログを想定した１カラムレイアウト。複雑な段組のテクニックがない。基本となるdiv要素の構造を押さえ、コンテンツのセンタリング手法や、一部の要素の不可視化方法など、あらゆるレイアウトに必須となるテクニックを学ぶ。

●div要素の構造
div#header、div#container、div#footer


body要素の直下に置く３つのdiv要素。書籍でいえば、次のように例えることができる。

・div#header（ヘッダー）　・・・・・・・・・・・　表紙や目次に相当する部分
・div#container（コンテナ）　・・・・・・・・・　各章の本文部分
・div#footer（フッター）　・・・・・・・・・・・・　著作権情報など奥付部分

ID名はサイトごとに異なる場合もあるが、シンプルなWebサイトにもっとも多いパターン。

div#global-nav
サイト内の目次に相当するグローバルナビゲーション。div#headerのなかに、ロゴh1要素とともに含めている。「home」「bbs」「web」「design」「link」などのボタン画像でナビゲーションが構成される。空に雲が浮かんでいるキービジュアルは、情報ではなく、装飾の画像なので、img要素で埋め込まず、CSSでdiv#global-navの背景に設定し、表示させている。

div.article#new-entry
最新記事の表示エリア。「最新記事」であることを示す「id="new-entry"」と「記事」であることを示す「class="articles"」を指定している。トップページだけを見ればIDだけでもよいが、アーカイブページなど他のページで記事を複数表示させる場合がある。またサイト全体で記事には一定のスタイルを指定したい場合もあるので、クラスを指定することでメンテナンス性を高めている。

最新記事だけに必要なスタイルはＩＤセレクタで、サイト全体の記事すべてに必要なスタイルはクラスセレクタで適用することで、効率的なスタイル管理を行うことができる。

div.entry-header、div.entry-body、div.entry-footer
一般的に、ブログ記事は次の３つのエリアに分けられる。
・　エントリーのタイトルや日時など
・　エントリー本文
・　エントリーに対するコメントやトラックバックなど

さらに、記事が該当するカテゴリーや、付与したタグ（キーワード）などの情報も、上記の３つのどこかに入ってくる。シンプルな見た目ゆえに、ここまでdiv要素で構造化しなくてよい場合もある。

このサンプルでは「div.entry-footer」に、padding、background、font-size、text-alignプロパティを指定しているが、この指定を「div.entry-footer」ではなく、直接dl要素に対して行うことも可能。しかし、div要素で丁寧に構造化しておくことで、後々のデザインリニューアル時に、より複雑なデザインをXHTMLを実現することができる、というメリットがある。

div#previous-entry、div.article、div.step-nav
最近の記事4件と、その他の記事に移動するためのステップナビゲーション。「div.article」は「div.article#new-entry」でも出現しているが、「#previoous-entry.article{・・・}」と子孫セレクタを利用して、限定的なスタイルを適用している。

div#other-contents、div.section-lv2#about、div.section-lv2#archives、
div.section-lv2#category
記事内容とは直接関係はないが、各カテゴリーへのリンクなど、ブログとしては必要なコンテンツ群。青の背景色に白抜きの文字というスタイルは「div#about」「div#archives」「div#category」の３箇所に指定しても実現できるが、div要素それぞれに「class="section-lv2"」を指定して、クラスセレクタで一括管理している。ちなみに「class="section-lv2"」というクラス名は、「見出しレベル２（h2要素）が出現する情報ブロックです」という意味合いで指定している。

div#footer
サイトの著作権表記のエリア。内容をp要素でマークアップしている。「div.entry-footer」の部分と同じように、デザインを実現するためだけであればp要素のみでも可能だが、構造を明確にするために「div#footer」でマークアップしている。

今日はここまで。