HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座
  |  ホームページ作成、HTML4.01 知識  |  HTML4.01 リファレンス  |  CSS リファレンス  |  携帯サイト作成  |   ちょっとひと休みしましょう  ｜ 

いまさらHTML,CSS講座トップ > スタイルシート(CSS)講座インデックス > 実践 2-3-1 カラムレイアウト
様々なブックマークサービスがご利用頂けます。

マークスタイルシート( CSS ) 実践 2-3-1 カラムレイアウト

2-3-1カラムレイアウトは正式名称ではありません、私が実際によく使うカラムレイアウトの組み合わせを、勝手にそう言っているだけなので、ご了承下さい。
ヘッダーを 2カラム、本文を 3カラム、フッター部分を 1カラムと言った感じでレイアウトしています。
一見、いまさらHTML,CSS講座のトップページは、2-2-1 のレイアウトのようですが、実は、今回解説する 2-3-1 です。
⇒ CSS レイアウトの解説ページ
⇒ 完成ページ ( 新規ウィンドウが開きます )
■ スタイルシートファイルへの記述
ソース  ソース
* { margin : 0 ; padding : 0 ; }
#mainbody { width: 600px; }
.header_left { float: left; width: 250px; height: 60px; background: #dcdcdc }
.header_right { float: left; width: 350px; height: 60px; background:#eeeeee; }

.menu { clear: both; width:600px; height: 20px; background:#eee8aa; }

.box_a { float: left; width: 400px; background: #f5f5dc; height: 300px; }
.box_b { float: left; width: 8px; background: #ffffff; height: 300px; }
.box_c { float: left; width: 192px; background: #f5f5dc; height: 300px; }

#footer { clear: both; width: 600px; height: 60px; background: #dcdcdc; }
margin 要素、padding 要素 は、CSS レイアウトにおいて、カラム落ちし易くなったり、何かと不具合が多いので、すべての要素に、0px を指定しておきます。
2、3 カラムレイアウトと同じく、mainbody で、一番外側の枠を作成します。
mainbody の横幅 600px の中に、header_left ( 250px ) と header_left ( 350px ) の、2 カラムの指定を作成します。
いまさら気が付いたのですが、正確には、2-1-3-1 のレイアウトですね。メニュー部分を忘れていました。なんとなく、2-3-1 レイアウトの方が語呂が良いので…。いいですよね、2-3-1 レイアウトで。( 汗 )
気を取り直して…ここで一度、clear 要素で、回り込みを解除し、menu ( 横幅 600px ) で、1 カラムの指定を作成します。
続いて、box_a ( 横幅 400px) と box_b ( 横幅 8px ) と box_c ( 横幅 192px ) の、3 カラムの指定を作成します。感の良い方は既にお気づきかと思いますが、横幅 8px の box_b は、box_a と、box_c とのスペースを設ける為に指定しています。
また、確実にスペース分が空いて表示される為に、 ← こちらの画像 ( 8px × 8px ) を、HTMLファイルで指定しています。
これは、古いブラウザ対策です。
※ 表示の便宜上、赤色の画像を表示していますが、実際にWebページで使用する場合は、
※ 透過、または背景色と同じ色の画像を使います。
最後に、footer ( 横幅 600px ) で、1 カラムの指定を作成します。menu と同じく、複数カラム ( float プロパティが指定してあるカラム ) の下に 1 カラムを配置する場合は、clear 要素で、回り込みを解除し、横幅等を指定します。
※ 表示の便宜上、各枠 に、高さ、背景色を指定しています。

■ HTMLファイルへの記述
ソース  ソース
<body>
<!-- Layout Start -->
<div id="mainbody" align="center">
<!-- header-left Start -->
<div class="header_left">
header_left
</div>
<!-- header-left End -->
<!-- header-right Start -->
<div class="header_right">
header_right
</div>
<!-- header-right End -->
<!-- menu Start -->
<div class="menu">
menu
</div>
<!-- menu End -->
<!-- box_a Start -->
<div class="box_a">
box_a
</div>
<!-- box_a End -->
<!-- box_b Start -->
<div class="box_b">
<img src="back.png" alt="" width="8" height="8">
</div>
<!-- box_b End -->
<!-- box_c Start -->
<div class="box_c">
box_c
</div>
<!-- box_c End -->
<!-- footer Start -->
<div id="footer">
footer
</div>
<!-- footer End -->
</div>
<!-- Layout End -->
</body>
mainbody の間に、
⇒ 2カラムの、header_left、header_right
⇒ 回り込みを解除して、menu
⇒ 3カラムの、box_a、box_b、box_c
⇒ 回り込みを解除して、footer を配置します。
※ mainbody に指定した align="center" は、表示の便宜上テキストを中央揃えで表示する為に指定しています。
記述が長く、配置の関係が複雑に感じた場合、<!-- --> で、コメントアウトで、レイアウトの位置を記述したり、tabキーが使えるテキストエディタで記述している場合、横方向の空白を入れ、段階的に記述すると、ソースが見やすくなります。
2カラム、3カラムレイアウトと同じく、注意する点は、各内枠の内容がスタイルシートで指定した横幅を超えないようにする点です。特に、内容に table要素を使う場合は注意して下さい。
⇒ 失敗例
box_c の内容で、table要素に、193px を指定しています。1px程度の僅かな誤差は修正して正常に表示してくれるブラウザもありますが、内容のサイズが枠を超える事は、カラム落ちの最たる原因ですので、最善の注意を払いましょう。

(C) いまさらHTML CSS講座 2002-2008 All right reserved