3カラムCSSレイアウト例

カスタム検索

3カラムCSSレイアウト例

ページの両端にメニューや広告（Affiriate）、中央にコンテンツを配置する「3カラム段組レイアウト」の例です。

サンプルの基本 HTML

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

<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;     /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/
}
#menu {
   float: left;
   width: 150px;     /* floatに、width 指定は必須です。*/
}
#contents {
   float: left;
   width: 400px;
}
#affiliate {
   float: left;
   width: 150px;
}
#footer {
   clear: both;      /* float をクリアしています。*/
   width: 700px;
   height: 50px;
}
#menu ul {
   list-style: none;
}

サンプル表示（5）

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%;
}
#menu {
   float: left;
   width: 150px;     /* floatに、width 指定は必須です。*/
}
#contents {
   margin: 0 150px;  /* 両端 150px のマージンを設定します。*/
}
#affiliate {
   float: right;
   width: 150px;
}
#footer {
   clear: both;      /* float をクリアしています。*/
   width: 100%;
   height: 50px;
}
#menu ul {
   list-style: none;
}

サンプル表示（6）

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指定します。*/
   position: relative;
   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 {
   clear: both;      /*上部にfloat使用した場合のためにクリアしています。*/
   width: 100%;
   height: 50px;
}
#menu ul {
   list-style: none;
}

サンプル表示（7）

Top↑

ホームページ作成 Note