第3回 コーディングの基礎 「CSSレイアウトの基礎 2カラムをやってみよう」
- 2008年10月18日
- WEB
マークアップと下ごしらえはできたので、CSSで装飾、レイアウトしていきたいと思います。ベースの中のcommon.cssに書き加えていきましょう。(同梱のファイルについての詳しい説明は「ベースHTML&CSSでコーディング」をご覧ください。)
まず、レイアウトをしていきます。わかりやすくするためにおおまかなdivの背景に色をつけます。着色したのが、こちら。コードは以下のようにしています。
ヘッダー
——————– */
#header {
background-color: #c6f99e;
}
/* ——————–
本文
——————– */
#content {
background-color: #f1f1f1;
}
#content_inner {
background-color: #fff;
}
/* ——————–
フッター
——————– */
#footer {
background-color: #ccc;
}
どんなに簡単なレイアウトだとはいっても、2カラムレイアウトです。(あ、こういうコンテンツ部分が2つに分かれているものを2カラムっていうんです。)sidebarを左に、contents_innerを右に寄せなければなりません。やり方は2種類あります(「position」と「float」によるもの。場合によって使い分けます)が、「float」によるレイアウトを私は良く使いますので今回は「float」でやってみたいと思います。
本文
——————– */
#content {
background-color: #f1f1f1;
}
#sidebar {
float: left;
}
#content_inner {
background-color: #fff;
}
上記のCSSを効かせたサンプルページ
あれ?と思いません?背景色が?テキストも入り込んでる?それは、floatの回り込みを理解しなければなりません。
floatしたsidebarは図のように上に浮いて左に寄ります。sidebarは、内包する要素の必要最低限の範囲をもつブロック要素となります。宙に浮いた状態ですので、content_innerが下に入り込みます。本来contentの背景色であるはずの薄いグレーの上にcontent_innerの背景色の白がかぶってcontent全体の背景が白になってしまっています。ただ、テキスト部分はかぶらないので、sidebarのエリアでなくなったところからは左に入り込んでいます。
これを回避するのには、それこそたくさんの方法がありますが、今回はとりあえずcontent_innerの左側にmarginをつけてみることにします。(paddingとmarginに違いに注意してください。paddingは要素の内側、marginは要素の外側にスペースをつけます。)値はいくつか?「グロバルナビ1」だから7文字かな。だったら10em※くらいかな。
本文
——————– */
#content {
background-color: #f1f1f1;
}
#sidebar {
float: left;
}
#content_inner {
background-color: #fff;
margin-left: 10em;
}
上記のコードを反映させたサンプルページ
※こういうときにもちょっとした気遣いをしましょう。「ブラウザの機能で文字を大きくしたときにレイアウトは崩れないようにする」これは大変重要なことだと思います。どんな環境でも同じように見えるようにコーディングすること。ターゲットにもよりますが、文字が小さくて読みづらい方、大きくて読みづらい方にも対応できるサイトであるべきかどうか。コーディングをするよりも前にターゲットを考えているかと思います。そのときに、ソリッド(固定)レイアウトなのか、リキッド(流動)レイアウトなのか、もしかしてエラスティックレイアウトなのか、を決めておく必要があります。どれにするべきかについてはまた別の機会に。
floatによるレイアウトの場合、大変重要な注意点がもうひとつあります。「floatとclearはペアである」ということで、floatしたら、clearをしてあげないといつまでも後に続く内容も入り込んでしまいますので、clearをしてあげなければなりません。しかし、このclearなかなか思ったように表示してくれません。たとえば、ありがちな例を紹介します。「sidebarをfloatした後に、footerでclearした場合」かつ「content_innerの中身が大変少なかったとき」。sidebarもcontent_innerも含んでいるはずのcontentの背景がcontent_innerの中身の一行分しか表示されていないという現象が起こっています。当たり前のことなんですけど、そもそもsidebarはfloat、つまり浮いた状態にあるので、content_innerだけがcontent内にあるとされてしまい、背景も一行分しか表示されなくなってしまうんですね。
また、どこかの要素にclearを指定したとしても、ブラウザ間で表示が異なる場合(妙なmarginがあるけど、ナニコレ…みたいなこと)が多くありますので、clearを使わず、「clearfix」を使用します。同梱のclearfix.cssのことです。floatによるレイアウトには必須アイテムです。使い方は簡単!floatを含み、終了させたいブロック要素にclass=”clearfix“を書くだけ。(clearfixの説明については紹介しているサイトがたくさんあるのでここでは省略します。)今回の場合は、contentの中にfloatしているものがあり、contentの中だけでfloatを終了させたいので、contentに対してclassを振ります。
<div id=”sidebar”>
<ul id=”glovalnavi”>
<li><a href=”#”>グロバルナビ1</a></li>
<li><a href=”#”>グロバルナビ2</a></li>
<li><a href=”#”>グロバルナビ3</a></li>
<li><a href=”#”>グロバルナビ4</a></li>
<li><a href=”#”>グロバルナビ5</a></li>
</ul>
<hr />
<ul id=”banner”>
<li><a href=”#”>FireFox</a></li>
<li><a href=”#”>Opera</a></li>
</ul>
</div>
<hr />
<div id=”content_inner”>
<h2>見出しレベル2</h2>
<p>テキストが入ります…</p>
<h3>見出しレベル3</h3>
<p>テキストが入ります…</p>
</div>
</div>
上記のコードを反映させたサンプルページ
注)もしかしたら、これから作っていく過程で、今回のfloatと右カラムへのmarginでの2カラム作りが不都合になる場合があります。CSSレイアウトは、時と場合によって組み方を変える必要がでることもあります。カラム組みについてはまた別の機会に詳しく書きます。
次回は10月20日(月)に、第4回 コーディングの基礎 「まずはヘッダーフッターを飾ろう」をお届けします。