3カラムCSSレイアウト例

ページの両端にメニューや広告（Affiriate）、中央にコンテンツを配置する「3 カラム段組レイアウト」の例です。ここでは、従来からよく使われている、position、float プロパティと display: table-cell を使用した例について記述しています。

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

サンプルの基本 HTML

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

CSS段組3カラムレイアウト例
<div id="wrapper">
  <div id="header">
     ヘッダー部分
  </div>
  <div id="main">
    <div id="menu">
       メニュー部分
    </div>
    <div id="contents">
       コンテンツ部分
    </div>
    <div id="affiriate">
       アフィリエイト部分
    </div>
  </div>
  <div id="footer">
     フッター部分
  </div>
</div>

ページ幅 700pxでセンタリング、メニュー、コンテンツとも幅固定の場合

ページ幅 700pxでセンタリング、両端のメニュー、コンテンツともに幅固定の場合で、float:left を使用した例です。

* {
   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: 400px;
}
#affiliate {
   float: left;
   width: 150px;
}
#footer {
   clear: both;     /* IE6 以前の float 解除対応です。 */
   width: 700px;
   height: 50px;
}
#menu ul {
   list-style: none;
}

サンプル表示（6）

Top↑

ページ幅 70%でセンタリング、両端のみ幅固定の float 使用の場合

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

ページ幅 70%でセンタリングして、両端のメニュー、アフィリエイト部分のみ幅固定のリキッドタイプです。

HTML の順序は、図のように両端のメニュー、アフィリエイト部分を中央のコンテンツより先にします。左メニューは、float:left で、 右のアフィリエイトは、float:right で配置し、中央のコンテンツは両サイドのブロック幅のマージンをとるようにします。

※通常、リキッドタイプはページ幅 100%でセンタリング不要です。ここではサンプルとして取り上げています。
#wrapper {width:100%;} →
#wrapper {width:70%; margin:0 auto;}

* {
   margin: 0;
   padding: 0;
}
#wrapper {
   width: 70%;
   margin: 0 auto;/* 幅 70% でセンタリングします。*/
}
#header {
   width: 100%;
   height: 50px;
}
#main {
   width: 100%;
   overflow: hidden;/* 親ボックスでフロート解除します。*/
}
#menu {
   float: left;
   width: 150px;   /* floatに、width 指定は必須です。*/
}
#contents {
   margin: 0 150px;/* 両端 150px のマージンを設定します。*/
}
#affiliate {
   float: right;
   width: 150px;
}
#footer {
   clear: both;    /* IE6 以前の float 解除対応です。 */
   width: 100%;
   height: 50px;
}
#menu ul {
   list-style: none;
}

サンプル表示（7）

Top↑

ページ幅 70%でセンタリング、両端のみ幅固定の position 使用の場合

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

上記と同じページ幅 70%でセンタリングして、両端のメニュー、アフィリエイト部分のみ幅固定のリキッドタイプです。

両端のメニューとアフィリエイトブロックは、position: absolute で配置します。中央のコンテンツは両サイドのブロック幅のマージンをとります。

両端のメニュー、アフィリエイト部分は、固定座標指定なので HTML の記述順序に影響しません。図のように中央のコンテンツを先に記述することができます。

* {
   margin: 0;
   padding: 0;
}
#wrapper {             /* 子要素が positionを指定する時は */
   position: relative; /* 親要素にも position 指定します。*/
   top: 0;
   left: 0;           /* top: 0; left: 0; 省略可 */
   width: 70%;
   margin: 0 auto;    /* 幅 70% でセンタリングします。*/
}
#header {
   width: 100%;
   height: 50px;
}
#main {
   width: 100%;
}
#menu {
   position: absolute;
   top: 50px;
   left: 0;/* position 指定の親要素 wrapper が基準になります。*/
   width: 150px;
}
#contents {
   margin: 0 150px;    /* 両端 150px のマージンを設定します。*/
}
#affiliate {
   position: absolute;
   top: 50px;            
   right: 0; /* position 指定の親要素 wrapper が基準になります。*/
   width: 150px;
}
#footer {
   width: 100%;
   height: 50px;
}
#menu ul {
   list-style: none;
}

サンプル表示 （8）

Top↑

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

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

前記サンプル（7）の「ページ幅 70%でセンタリング、両端のみ幅固定の float 使用の場合」の例を display: table-cell に置き換えた例です。親要素に display: table、 子要素に display: table-cell を指定するだけで均等高さ横並びの配置になります。

#main {
  display: table;        /* 親要素に指定 */
  width: 100%;
  overflow: hidden;
}
#menu {
  display: table-cell;   /* 子要素セルに指定 */
  width: 150px;
  float: left;
}
#contents {
  display: table-cell;   /* 子要素セルに指定 */
  margin: 0 150px;
}
#affiliate {
  display: table-cell;   /* 子要素セルに指定 */
  float: right;
  width: 150px;
}
#footer {
  clear: both;
  width: 100%;
  height: 50px;
}

サンプル表示（9）

関連記事

Top↑