このページの本文へ

メディアクエリーの設定とグリッドデザインの導入 (2/3)

2012年07月09日 11時35分更新

文●菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

グリッドデザインによる2カラムのレイアウト

 2カラムのレイアウトでは、左右に要素を配置したときの間隔や幅に規則性を持たせるために、グリッドデザインを採用します。グリッドデザインとは、ページを均等なマス目(カラム)に分割し、カラムに沿ってパーツを配置していくレイアウト手法です。カラムにはグリッド線とも呼ばれる罫線(補助線)を敷き、グリッド線に沿って部品を配置したり領域のサイズを決定したりすることで、規則性を持った正確なレイアウトができます。

2-5-zu03.png

グリッドデザインではグリッド線に沿ってレイアウトする。画面はグリッドデザインを使った事例ページ(http://960.gs/)

 最初にページの横幅を決めましょう。グリッドデザインにおけるページの横幅は、グリッドで分割するカラムの数で考えます。「枝豆隊」では、幅1024px以下であり、グリッドのカラム数が12や16で割り切れる数字である960pxを採用します。グリッドデザインではグリッド線に沿って要素を配置するので、12や16カラムぐらいであれば広すぎず狭すぎずレイアウトがしやすくなります。

 960は約数が28もあり、要素の配置を決めるときに均等に割り付けられる可能性が高いので、よく採用されます。

*「960」の約数=1、2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160、192、240、320、480、960

グリッドを敷く

 「枝豆隊」の1024px向けレイアウトでは、12カラムのグリッドを利用します。グリッド線の幅は60px、その左右をそれぞれ10pxの白色の線(ガーターと言います)で挟んだ計80pxを1カラムとして12分割します。

2-5-zu04.png

幅960pxのWebサイトを12コラムに分けた背景画

グリッド画像の配置

 グリッドに沿って要素の位置を調整するために、ページ(html要素)の背景に作業用のグリッド画像をCSSで配置します。作業用のグリッド画像は自作しても構いませんが、私は「960 Grid System」が配布している画像ファイルを利用しています。

サンプル2[CSS:style.css]


html {
font-family : verdana, sans-serif;
font-size : 100%;
line-height : 1.5;
background : url(../images/960_grid_12_col.png) repeat-y top center}

 ここから先は、ブラウザーの横幅を1024pxに固定した状態で作業してください。下の図はサンプル2を幅1024pxにして表示したところです。

2-5-zu05.png

背景に960px幅のグリッド画像を配置

2段組の作成

 グリッドに沿ってレイアウトを2段組みに変更します。#mainと#subの外側の要素である#contentsのwidthに960pxを指定し、floatプロパティで#mainを左に、#subを右に隣あうように並べます。グリッド線の両端からはみ出している文字と画像を調整するために、mainとsubへは左右均等に10pxのマージンを指定します。

サンプル3[CSS:style.css]


#contents {
overflow : hidden;
width : 960px} /* 960/1024 */
#contents #main,
#contents #sub {
float : left;
margin : 0 10px } /*10/960*/

 次に、#mainのボックスの幅を620px、#subのボックスの幅を300pxに指定します。


#contents #main { width : 620px } /*620/960*/
#contents #sub { width : 300px } /*300/960*/

 ここまでの指定を反映した状態で確認すると、下図のように表示されます。テキストや画像がグリッドに沿って配置されているのが分かります。

2-5-zu06.png

画面幅1024px以上のとき、2段組で表示される「枝豆隊」

ナビゲーションパネルの調整

 ヘッダー部分にあるナビゲーションパネルは、1項目あたりの幅を25%に指定していますが(25%×4)、このままだと画面幅(1024px)に対する25%になってしまい、画面幅に応じてパネルの幅も左右に広がってしまいます。そこで、画面幅が1024px以上になっても、ナビゲーションパネル全体の幅はページ幅(#contentsの幅)である960pxで固定するように指定します。

サンプル4[CSS:style.css]


nav ul {
width : 960px;/* 960/1024 */
margin : 0 auto}

 ナビゲーションパネルの調整前と後は下の図のようになります。

2-5-zu07.png

調整前は画面幅に対して25%。調整後はページ幅(960px)に対して25%にする

footer幅の変更

 フッターにはもともと幅を指定していなかったので、これまでは画面幅いっぱい(100%)に表示されていました。画面幅が1024px以上の場合は、ページ幅(#contentsの幅)である960pxにフッターの幅を固定します。ただし、#mainと#subにはmarginを10pxずつ左右に指定しているので、実質的な幅は940pxです。フッターにも940pxを指定することで、フッターと本文の左端が揃います。


footer {
width : 940px; /*940/1024*/
padding : 24px 0;
margin : 0 auto}

 フッター幅の調整前と後は下の図のようになります。

2-5-zu08.png

フッターのwidthを940pxを指定した「枝豆隊」

 ここまでの修正を反映した画面幅1024px以上向けのCSSがサンプル5です。

サンプル5[CSS:style.css]


/* 1024px */
@media screen and (min-width : 1024px) {
html { font-size : 16px }
/* @group nav */
nav ul {
width : 960px; /* 960/1024 */
margin : 0 auto}
/* @end */
/* @group #contents */
#contents {
overflow : hidden;
width : 960px} /* 960/1024 */
#contents #main,
#contents #sub {
float : left;
margin : 0 10px } /*10/960*/
#contents #main { width : 620px } /*620/960*/
#contents #sub { width : 300px } /*300/960*/
/* @end */
/* @group footer */
footer {
width : 940px; /*940/1024*/
padding : 24px 0;
margin : 0 auto}
/* @end */
}

 次回は、ウィンドウ幅に合わせて要素の幅が変わるようにして「枝豆隊」を完成させます。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く