WEBページの2カラムレイアウト

• はじめに
• 文章重視の２カラムレイアウト
• デザイン重視の２カラムレイアウト
• 汎用２カラムレイアウト（float版)
• 汎用２カラムレイアウト（position版)
• おまけ：ナビゲーションを右に配置した場合の２カラムレイアウト
• 最後に

スタイルシートを利用した２カラムレイアウトの方法はいろいろありますが、画面の左側にナビゲーションを配置する場合に何が一番よい方法なのかは悩むところです。 このページでは次の目的に着目してレイアウトの方法を紹介します。

なお、レイアウトはブラウザの標準モードでのレンダリングを想定しています。互換モードでは正しく表示されない可能性があります。
また、絶対ということはないので、あくまでも使用はご自分の責任でお願いします。

目的

1. 画面の幅が小さい環境でもストレスなく表示できること。→ブラウザの幅を小さくしても横スクロールの必要が少ない。
2. スタイルシートをOFFにしても、本文が先に表示される。→テキストブラウザや音声ブラウザへの配慮やSEO効果
3. コンテンツのサイズをあまり意識しなくてもよいこと→コンテンツ量を増やしてもサイズ変更の必要が少ない
4. ブラウザのバグを利用したＣＳＳハックを使用していない。→バグが修正されても将来も同じように表示される
5. 古いブラウザでも大幅なくずれがないか、まったく同じに表示される。
6. javascriptを使用していない。

レイアウトの対象とするhtmlは次のものを使用します。

HTML

<div class="outline"> <div class="header">ヘッダー</div> <div class="contents"> <div class="main">メインコンテンツ<br>メインコンテンツ</div> <div class="navi">ナビゲーション</div> </div> <div class="footer">フッター</div> </div>

では、このhtmlを十分な画面サイズがある場合に、全体の幅を500pxでセンタリングし、ナビゲーションの幅を150pxとして表示する例をパターン別に紹介します。

仕様

ナビゲーション部分の幅：可変、メインコンテンツ部の幅：可変

表示サンプル

２カラムレイアウト表示例

ヘッダー

メインコンテンツ
メインコンテンツ

ナビゲーション

フッター

スライドバーを操作すると幅を変更できます。

説明

将来的には古いバージョンのブラウザの使用は減ると思われるので、モダンブラウザ向けの方法です。
この方法でブラウザの幅を減らしていくと、最終的にはナビゲーションが下に回り込むので、小さな画面でもストレスはまったくありません。
IE6などの古いブラウザでは横幅は画面いっぱいに広がり、ナビゲーションは下に回り込みませんが、さほど違和感はないとおもいます。

スタイルシート

.outline { width:100%; max-width:500px; min-width:5em; margin: 0 auto; } .header {} .contents { float:left; width:100%; max-width:500px; min-width:5em; } .main { float:right; width:69.99%; max-width:350px; min-width:5em; } .navi { float:right; width:30%; max-width:150px; min-width:5em; } .footer { clear:both; }

.contentsはmax-widthで幅を指定し、widthを100%とします。min-widthは5emとします。
ブロック要素の配置にはfloat:rightを使用しています。これによりメインコンテンツを先に記述することができます。
.mainと.naviはmax-widthで幅を指定し、widthに親要素のサイズを元にそれぞれカラムの％を求めて設定します。このとき、IE6は％の計算に誤差があるので、片方を0.01引いた値とします。min-widthはお好みですが、5emとします。
古いブラウザの互換性を考えない場合はwidthの指定は100%でもかまいません。
幅の指定をwidthに直接指定するのではなく、max-widthに絶対値、widthに相対値で指定をするだけです。

仕様

ナビゲーション部分の幅：固定、メインコンテンツ部の幅：固定

表示サンプル

２カラムレイアウト表示例

ヘッダー

メインコンテンツ
メインコンテンツ

ナビゲーション

フッター

スライドバーを操作すると幅を変更できます。

説明

ブラウザの幅に関係なく同じように表示したい場合に使用します。デザイン性を重視したページではこのレイアウトがもっとも多く使われます。 印刷された紙をイメージすればわかりやすいと思いますが、画面サイズにまったく影響を受けません。画面を小さくすると横スクロールバーが表示されます。

スタイルシート

.outline { width:500px; margin: 0 auto; } .header {} .contents { float:left; } .main { float:right; width:350px; } .navi { float:left; width:150px; } .footer { clear:both; }

.outlineのwidthに幅を指定します。幅はpx等の絶対値指定で行います。
.mainはwidthで幅を指定し、float:rightを指定します。
.naviはwidthで幅を指定し、float:leftを指定します。

仕様

ナビゲーション部分の幅：固定、メインコンテンツ部の幅：可変

表示サンプル

２カラムレイアウト表示例

ヘッダー

メインコンテンツ
メインコンテンツ

ナビゲーション

フッター

スライドバーを操作すると幅を変更できます。

説明

若干余計なタグを必要としますが、通常の２段レイアウトとほぼ同じレイアウトとなります。 ナビゲーションの幅よりもブラウザの幅を小さくすると古いブラウザではメインコンテンツ部分は消えてしまいます。

html

<div class="outline"> <div class="header">ヘッダー</div> <div class="contents"> <div class="main_wrapper"> <div class="main" >メインコンテンツ<br>メインコンテンツ</div> </div> <div class="navi">ナビゲーション</div> </div> <div class="footer">フッター</div> </div>

メインコンテンツをdiv要素でラッピングし、class="main_wrapper"とします。

スタイルシート

.outline { width:100%; max-width:500px; min-width:5em; margin: 0 auto; } .header {} .contents { float:left; width:100%; } .main_wrapper { float:right; width:100%; margin-left:-160px; } .main { margin-left:150px; min-width:5em; } .navi { width : 150px; } .footer { clear:both; }

.main_wrapperのmarginにネガティブマージン（マイナス値）でナビゲーションの幅を指定します。このとき、IE6のためにさらに4px引いた値を設定します。
.mainのmarginにナビゲーションの幅を指定します。
.naviのwidthに幅を指定します。

仕様

ナビゲーション部分の幅：固定、メインコンテンツ部の幅：可変

表示サンプル

２カラムレイアウト表示例

ヘッダー

メインコンテンツ
メインコンテンツ

ナビゲーション

フッター

スライドバーを操作すると幅を変更できます。

説明

float版とほぼ同様ですが、メインコンテツの高さがナビゲーションより低いとフッターの位置がずれてしまいます。 その場合は、メインコンテンツのpadding-bottomを使用して調整する必要があるので煩雑ですが、float版のように余計なタグは必要ありません。

スタイルシート

.outline { width:100%; max-width:500px; min-width:5em; margin: 0 auto; } .header {} .contents { position:relative; } .main { margin-left:150px; min-width:5em; } .navi { position: absolute; top: 0px; width: 150px; } .footer {}

.contentsにposition:relative;を指定し絶対配置の基準位置をcontentsの左上にします。
.mainのmarginにナビゲーションの幅を指定し、ナビゲーションと重ならないようにします。
.naviにposition:absolute;とtop:0px;を指定して基準位置に移動します。またwidthに幅の指定を行います。
このときleft:0px;を設定すると、IE6では正しく表示されません。

仕様

ナビゲーション部分の幅：可変、メインコンテンツ部の幅：可変

表示サンプル

２カラムレイアウト表示例

ヘッダー

メインコンテンツ
メインコンテンツ

ナビゲーション

フッター

スライドバーを操作すると幅を変更できます。

説明

そもそもナビゲーションを右に配置するのが一番きれいな形だとおもうので最後に記載しておきます。 回り込み時に左に寄るので一番違和感がありません。幅を狭くして比較してみてください。

スタイルシート

.outline { width:100%; max-width:500px; min-width:5em; margin: 0 auto; } .header {} .contents { float:left; width:100%; max-width:500px; min-width:5em; } .main { float:left; width:69.99%; max-width:350px; min-width:5em; } .navi { float:left; width:30%; max-width:150px; min-width:5em; } .footer { clear:both; }

最初に紹介した方法のfloat指定をleftにするだけです。