三十七日目！（コンテンツのセンタリング～）

●コンテンツをセンタリングするテクニック
作例では、ページのコンテンツ全体をセンタリングしている。ほとんどのサイトが、このように全体がセンタリングされるか、左寄せになっている。もしかしたら、右寄せにしたいという需要もあるかもしれない。このように、「コンテンツをどの方向に寄せるか」は、次のようなブロックレベル要素の左寄せ、センタリング、右寄せのしくみに基づいて決定される。


ブロックレベル要素の左寄せ
幅を指定して、「margin-right:auto;」を指定する

ブロックレベル要素のセンタリング
幅を指定して、「margin-right:auto; margin-left:auto;」を指定する

ブロックレベル要素の右寄せ
幅を指定して、「margin-left:auto;」を指定する

このように、寄せたい方向とは逆のマージンに「auto」と指定するのがポイント。センタリングについては、左右両方に「auto」と指定することで、結果的に中央に寄る事になる。

#header {
  width: 424px;
  margin: 0 auto;  /*  ボックスのセンタリング  */
}
#container {
  width: 376px;
  margin: 0 auto;  /*  ボックスのセンタリング  */
  padding: 24px;
}
#footer {
  width: 376px;
  margin: 0 auto;  /*  ボックスのセンタリング　*/
  padding: 0 24px 24px;
}




2カラムレイアウト
左にメイン部分、右にサイド部分を置く２カラムレイアウト。ブログ、コーポレートサイト、ニュースサイトなどあらゆるジャンルで広く利用されているレイアウト。基本的な段組みの方法と、positionプロパティの使いどころを押さえる。

●div要素の構造
div#headeer、div#container、div#footer
1カラムレイアウトと同じように、３つの主要部分による構成。１カラムレイアウトでは書籍にたとえて説明したが、Webサイトの構造にあわせて説明すると次のようになる。

div#header（ヘッダー）
コーポレートサイトロゴやサイトロゴ、キャッチコピーなど、アイデンティティを確立するうえで、重要なコンテンツなど、グローバルナビゲーションやサイト内検索など、Webサイトの機能性や利便性を支えるためのコンテンツを含めるのが一般的。

container（コンテナ）
メイン部分とサイド部分で構成されるのが一般的。

div#footer（フッター）
著作権表記や控えめなコーポレートロゴなどの運営情報や、個人情報保護方針や特定商取引法もとづく表記など、補足的な意味合いの強いコンテンツへのナビゲーションを含めるのが一般的。

div#global-nav、div#search、div#utility-nav
サイト内の回遊性を高めるための主な機能軍。デザインカンプでは上から「div#utility-nav」「div#search」「div#global-nav」という順番になっているが、グローバルナビゲーションはもっとも重要な目次であるため、補完的な意味合いの「サイト内検索」や「お問い合わせ・サイトマップ」よりも先に記述している。

このように、見た目の順序とXHTMLのソースコードの記述順序はいったん切り離して考え、「どのコンテンツが重要なのか、先に記述すべきか」を判断しながらXHTMLを制作することが大切。

div#section-lv1#primary-contents、div#secondary-contents
「div.structure#container」内で各カラムとなるdiv要素。本文を「#primary-contents」、サイドバーを「#secondary-contents」としている。

div.section-lv2、div.section-lv2#classroom
各カラム内での見出しごとの情報の固まり。１カラムレイアウトでも解説したように、「h2要素が出現する情報ブロックであること」を示すために、「.section-lv2」というクラスを指定している。また「div#primary-contents」につけている「.section-lv1」というクラスだが、第二階層以下のページ（カテゴリートップや個別ページ）では、h1要素が登場することを想定して指定している。

「div#secondary-contents」のなかで最初に出現するdiv要素には、「.section-lv2」というクラスと同時に「#classroom」というIDを指定しています。

●見出し要素の構造
１カラムレイアウトの見出し構造と同じ考え方でマークアップ。デザインカンプにはない、グローバルナビゲーションやフッターの見出しなども指定しておく。

●センターリングの一括適用
１カラムレイアウトでは、全体のセンタリングのために、「div#header」「div#container」
「div#footer」それぞれにスタイルの指定。（widthプロパティで幅を指定し、左右マージン「auto」でセンタリング）。

この作例でも同じように実現できますが、今回は「.structure」という共通のクラス指定しているので、センタリングのためのスタイルを一括適用できる。

.structure {
   width: 740px;
   margin: 0 auto;    /*  ボックスのセンタリング　*/
   padding: 0 29px;
   border-left: 1px solid #999;
   background-color: #fff;
}


このように、必要に応じて汎用的なクラスでスタイルを管理することで、作業を効率化することができる。

●positionプロパティを利用した自由度の高いコンテンツ配置
「div#header」に含まれる「div#global-nav」「div#search」「div#utility-nav」は、positionプロパティで配置する。デザインカンプでの見た目を実現するために、「div#global-nav」と「div#utility-nav」の位置を逆転させなければならない。まずこれらを移動させるための基点を「div#header」にするために、ボックスのサイズと「position:relative;」を指定。

#header {
   position: relative;
   height: 390px;
   background-image: url(../img/header/bgo1.jpg);
   background-position: center bottom;
   background-repeat: no-repeat;
}


つづいて、検索ボックスやユーティリティ、グローバルナビゲーションを移動される。それぞれに「position: absolute;」を指定し、あとは「div#header」の上下左右からの距離をtop、right、bottom、leftプロパティのいずれかで指定すれば、容易に配置できる。

#global-nav ul {
   position: absolute;
   top: 136px;
   left: 53px;
}
#search {
   position: absolute;
   top: 84px;
   left: 536px;
   width: 228px;
}
#search li {
   position: absolute;
   top: 17px;
   left: 182px;
}
#utility-nav {
   position: absolute;
   top: 24px;
   right: 30px;
}


このようにpositionプロパティを利用することで自由度の高い。（XHTMLの構造にとらわれない）は位置が可能になる。

今日はここまで。