2カラムCSSレイアウト例

このページでは JavaScript を使用しています。JavaScript をオンにして下さい。

2カラムCSSレイアウト例

ページの上にヘッダ、下にフッターをつけた、「2カラム段組レイアウト」の作成例です。ここでは、従来からよく使われている position、float プロパティと display: table-cell を使用した例について記述しています。

現在は、高機能でマルチスクリーン、レスポンシブに対応できる、新バージョン CSS3 の「マルチカラムレイアウト」や、「フレキシブルボックスレイアウト」が使えるようになりました。「新しい CSS レイアウトモジュール」を参考にしてください。(2015年 2月)

CSSで段組レイアウトする前に

CSSで段組レイアウトする前に、ブラウザによる表示ばらつきをなくすため、配置に関係するプロパティのマージン、パディングのデフォルト値を下記のように、「0」にリセットします。

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
 margin: 0; 
 padding: 0;
}

または、全称セレクタ(ユニバーサルセレクタ)「*」のマージン、パディング値を下記のように、「0」にリセットします。

* {
 margin: 0;
 padding: 0; 
}

サンプルの基本 HTML ファイル

サンプルの基本となるHTMLファイルの body 内は下記のとおりです。

[画像:CSS段組2カラムレイアウト例]

<div id="wrapper">
 <div id="header">
 ヘッダー部分
 </div>
 <div id="main">
 <div id="menu">
 メニュー部分
 </div>
 <div id="contents">
 コンテンツ部分
 </div>
 </div>
 <div id="footer">
 フッター部分
 </div>
</div>

全体をセレクタの ID 名、「wrapper」で囲んでセンタリングしたり背景を指定します。また、メニューとコンテンツを、「main」で囲んで背景などを指定します。

ページ幅 700px 固定の左メニューの場合

メニューと、コンテンツ部分ともに、float: left; を指定し、その幅を指定します。
float を指定した要素には、幅 width を必ず指定します。フッター部分は、先行フロートボックスを clear プロパティでフロートを解除します。または、親ボックスの main に overflow: hidden で、フロートを解除すればフロートボックスの高さも含められるので背景も指定できるようになります。但し、IE6 以前のブラウザは機能しません。IE6 以前にも対応する「clearfix」セレクタがネット上でいろいろ公開されています。動作を確認して使用できます。

* {
 margin: 0;
 padding: 0; /* 全てのプロパティの余白とパディングをリセットしています。*/
}
#wrapper {
 width: 700px;
 margin: 0 auto;/* 幅固定(700px)でセンタリングします。*/
}
#header {
 width: 700px;
 height: 50px; /* サイトロゴの高さに合わせて調節して下さい。*/
}
#main {
 width: 700px; /* メニューとコンテンツを囲んでいます。 */
 overflow: hidden; /* 親ボックスでフロート解除します。*/
}
#menu {
 float: left;
 width: 150px; /* floatの width 指定は必須です。*/
}
#contents {
 float: left;
 width: 550px; /* floatの width 指定は必須です。*/
}
#footer {
 clear: both; /* IE6 以前の float 解除対応です。 */
 width: 700px;
 height: 50px;
}
#menu ul {
 list-style: none;
}

サンプル表示(1)

ページ幅 700px 固定の右メニューの場合

上記、左メニューの場合のHTMLはそのままで、CSSは float プロパティ値、「left」を「right」にするだけです。

サンプル表示(2)

以上の2つの例は、メニューがコンテンツ部分より先に表示されますが、コンテンツ部分を先に表示したい場合は、HTML ソースの記述順序を逆にしてコンテンツ部分を先に表示させることもできます。その場合、CSS ファイルは、左メニュー用が float: right; を、右メニュー用は、float: left; を指定した上記の CSS そのまま使用します。

Top↑

左メニューのみ幅固定、ページ幅 70%センタリングの場合

左メニューボックスのみ幅固定し、ページ幅を「%」指定で 70% にしてセンタリングした
リキッドタイプの例です。右コンテンツ部分は、「margin-left」で位置決めしています。
※(注記)通常、リキッドタイプはページ幅 100%でセンタリング不要です。ここではサンプルとして取り上げています。
#wrapper { width:100%; } → #wrapper { width:70%; margin:0 auto; }

* {
 margin: 0;
 padding: 0; /* 全てのプロパティの余白とパディングをリセットしています。*/
}
#wrapper {
 width: 70%;
 margin: 0 auto;/*ページ幅 70% でセンタリングしています。*/
}
#header {
 width: 100%;/*ページ幅 70%をヘッダー幅にしています。幅指定なしでも可*/
 height: 50px;
}
#main {
 width: 100%;/*ページ幅 70%をメニューとコンテンツ幅にしています。同上*/
 overflow: hidden;/* 親ボックスでフロート解除します。*/
}
#menu {
 float: left;
 width: 150px; /* floatの width 指定は必須です。*/
}
#contents {
 margin-left: 150px; 
}
#footer {
 clear: both; /* IE6 以前の float 解除対応です。 */
 width: 100%;
 height: 50px;
}
#menu ul {
 list-style: none;
}

サンプル表示 (3)

右メニューの場合は、menu と contens セレクタの「left」を、「right」にします。

`position` を使った2カラムレイアウト例

左メニューボックスを「position:absolute」で固定、右コンテンツボックスの幅に合わせて左マージンを指定します。

「position:absolute」でレイアウトする時に、親要素に position が指定されていないと、ブラウザによって親要素からの位置になったり、開いているウィンドウの左上からの位置になったりとバラバラになります。親要素に position(relative, absolute)が指定されていると、その子要素の位置は親要素から計算されます。

* {
 margin: 0;
 padding: 0;/* 全てのプロパティの余白とパディングをリセット*/
}
#wrapper { /*子要素がpositionを指定する時は親要素にもposition指定*/
 position: relative;
 top: 0;
 left: 0; /* top:0; left:0; 省略可 */
 width: 70%;
 margin: 0 auto; 
}
#header {
 width: 100%;
 height: 50px;
}
#main {
 width: 100%;
}
#menu {
 position: absolute;
 top: 50px; 
 left: 0; /* position 指定の親要素 wrapperが基準になります。*/
 width: 150px;
}
#contents {
 margin-left: 150px;/* margin-left で位置指定します。*/
}
#footer {
 width: 100%;
 height: 50px;
}
#menu ul {
 list-style: none;
}

サンプル表示(4)

`display: table-cell` を使った2カラムCSSレイアウト例

CSS2.1 対応の IE8 から使える CSS テーブルレイアウトの display: table-cell により float のように横並びボックスレイアウトができます。

前記サンプル(3)の「左メニューのみ幅固定、ページ幅 70%センタリングの場合」の float の例を display: table-cell に置き換えた例です。親要素に display: table、子要素に display: table-cell を指定するだけで均等高さ横並びの配置になります。float 配置のように左右寄せを自由にできないので、コンテンツを先に表示させるには HTML の記述順序を入れ替えて「右メニュー」にする必要があります。

#main {
 display: table; /* 親要素に指定 */
 width: 100%;
 (削除) overflow: hidden; (削除ここまで)
}
#menu {
 display: table-cell;/* 子要素セルに指定 */
 width: 150px;
 (削除) float: left; (削除ここまで)
}
#contents {
 display: table-cell;/* 子要素セルに指定 */
 (削除) margin-left: 150px; (削除ここまで)
}
#footer {
 (削除) clear: both; (削除ここまで)
 width: 100%;
 height: 50px;
}

サンプル表示(5)

表示させる優先順位を決める

上記 CSS テーブルレイアウトを除き CSS レイアウトのメリットのひとつに、HTML の記述順序により表示順位を自由に決められます。コンテンツ部分を先に表示させ、音声読上げブラウザ、携帯ブラウザのアクセシビリティの考慮や、SEO 対策(Search Engine Optimization 検索エンジン最適化)としての工夫ができます。ただし、最近の検索エンジンはページ内すべてからキーワードを抽出しているのと、メニュー部分は「キーワードの集まり」でもあり、HTML の記述順序による SEO 対策としての効果は分かりません。

position: absoluteプロパティは、固定座標指定なので HTML 内の前後関係に影響しません。メニューやアフィリエイトボックスの配置指定などに向いています。ただし、文字サイズなどを閲覧者が変更したりしてボックスサイズが大きくなった場合などは、下の他のボックスに重なるので注意が必要です。

3 カラム CSS レイアウト例新しい CSS レイアウトモジュール

Top↑

ホームページ作成 Note