float を使った２段組レイアウト（padding を持ちながらカラム落ちを回避する例）

出力サンプル

div#main　メインのコンテンツ

見出し

メインのコンテンツに書く文章などは、実際 div 直下にテキストではなく、p 要素などで意味付けするのが一般的です。

div#sub　いわゆるサイドバー（サブコンテンツ）

閲覧ユーザエージェント:

解説

margin, padding が 0 の方法や、padding はあてたけれど標準モードでレイアウトが崩れる方法ではまったく実用的ではありません。

そこで今度は、骨組みの (X)HTML 自体も見直して、実用的な設計をした上で２段組レイアウトが崩れない方法を考えてみます。

レイアウトしているボックスの中身に、どんなコンテンツを置くか

(X)HTML のマークアップの原理から考えれば、レイアウトを目的に div 要素を増やしたり、文書を書き換えるというのは良いことではありません。ただし、文書のなかでも意味的なまとまりがあれば、div によるグループ化をするのは意味のあることである上、あわせてレイアウトの幅も広がるというメリットがあります。

このサンプルでは、メインのコンテンツを div#main 内に、サイドバーに使うような補助的なコンテンツを div#sub に記述しています。前回のサンプルでは、ただのプレーンテキストしか記述していないため、現実的に使いそうなサンプルを書いた例を示します。

<div class="section">
    <h2>見出し</h2>
    <p>文章</p>
</div><!-- /section -->

このように、見出しは見出しとして、段落は段落としてマークアップする他に、XHTML 2.0(草案) から導入される予定の section 要素による見出しレベルの関係を示したマークアップができるのを見越して <div class="section"> でグループ化することで、適切な構造をもちながらレイアウトに柔軟に対応できるようになります。

CSS の中身

このように <div class="section"> でグループ化されることで、float でレイアウトした #main や #sub に対して padding を与える必要はなくなります。なぜならその中身にあたる要素 (<div class="section">) に対して margin を与えればよいのです。

#main div.section {
    margin: 10px;
}

このような要領で記述すると、標準モードでも互換モードでも同じように表示されます。div#main や div#sub を float させるために幅を明示してあるので、中身のコンテンツに対しては、マージンさえ与えれば見やすくなり、なおかつ幅をあたえる必要がなくなります。

この要領を応用すると、３段組やリキッドレイアウトにも対応しやすくなります。

このように、(X)HTML と CSS は互いに密接に関わりあっています。(X)HTML の構造を、それぞれの要素の意味以外にもグループの意味を含めて設計することが、柔軟な CSS レイアウトの実現に役に立つと考えられます。

また、Win IE6 で正しく表示されないからと安直にハックを使ってしまうよりも、このように考慮して記述するほうが、構造もしっかりした上にCSS も柔軟に書けるので長く使えてメンテナンス性も向上します。

参考資料

XHTML 2.0での文書構造と見出し - The Web KANZAKI

サンプル XHTML コード

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>float を使った２段組レイアウト（padding を持ちながらカラム落ちを回避する例）</title>
</head>
<body>
<div id="container">
    <div id="header">div#header　ヘッダ</div>
    <div id="main">div#main　メインのコンテンツ
        <div class="section">
        <h2>見出し</h2>
        <p>メインのコンテンツに書く文章などは、実際 div 直下にテキストではなく、p 要素などで意味付けするのが一般的です。</p>
        </div><!-- /section -->
    </div><!-- /main -->
    <div id="sub">div#sub　いわゆるサイドバー（サブコンテンツ）
    </div><!-- /sub -->
    <div id="footer">div#footer　フッタ</div>
</div><!-- /container -->
</body>
</html>

サンプル CSS コード

* {
    margin: 0;
    padding: 0;
}

/* ボックスに色をつける */
#header {
    background:#c0d5df;
}

#main {
    background:#eaeaea;
}

#sub {
    background:#dce4b1;
}

#footer {
    background:#ecced4;
}

/* レイアウト */
#container {
    margin-left: auto;   /* コンテンツ全体を中央揃え */
    margin-right: auto;   /* コンテンツ全体を中央揃え */
    width: 700px;
}

#sampleoutput {
    text-align: center;  /* Win IE6 で正しい中央揃えが効かない対策。親ボックスの id 名は適宜読み替えてください */
}

#main, #sub, #footer {
    text-align: left;  /* Win IE6 で正しい中央揃えが効かない対策をしたために本来左揃えしたいコンテンツまで中央揃えになってしまうのを元に戻す */
}
#main {
    float: left;
    width: 500px;
}

#sub {
    float: left;
    width: 200px;
}

#footer {
    clear: both;
    width: 700px;
}

/* main の中身 */
#main div.section {
    margin: 10px;
}

ブラウザ別スクリーンショット

Internet Explorer 6.0 (Windows)

Firefox 2.0 (Windows)