CSSでマルチカラムレイアウト

クロスブラウザなレイアウトデザインテクニック 第7回

ポジショニング型の2カラムレイアウト

　マルチカラムレイアウトは、「positionプロパティ」を利用したポジショニング型でも実現することができます。ここでは、絶対配置と相対配置を組み合わせたレイアウト方法を紹介しましょう。

ポジショニング型：左サイドバーレイアウト

　まずは、フロート型と同じ左サイドバーレイアウトをポジショニング型で再現してみましょう。今回は、コンテナの左上を基準点（座標[0,0]）としたいので、（X）HTMLのソースは、コンテナにヘッダを含める形式ではなく、ヘッダを独立させています。

リスト11　（X）HTMLソース：ポジショニング型：左サイドバーレイアウト／05.html

<div id="header">ヘッダ</div>
<div id="container">
  <div id="main">メイン</div>
  <div id="sub">サブ</div>
</div>
<div id="footer">フッタ</div>

　ここでは、サブコンテンツを絶対配置とし、メインコンテンツを相対配置して指定しますが、メインコンテンツを絶対配置の対象としてもかまいません。ただし、絶対配置した内容が絶対配置していない内容の高さを超える場合、図11のように、フッタと重なって表示されてしまう点に注意してください。

図11　フッタが重なって表示されている例

　CSSソースは次のようになります。

リスト12　CSSソース：ポジショニング型：左サイドバーレイアウト／05.css

div#container {
  width: 500px;
  position: relative; /* 基準点の座標（0, 0）を提供 */
}
div#sub {
  width: 200px;
  position: absolute; /* 座標（0,0）に絶対配置 */
  top: 0;
  left: 0;
}
div#main {
  width: 300px;
  position: relative; /* 座標（0, 200px）に相対配置 */
  top: 0;
  left:200px;
}

　ここでのポイントは次のとおりです。

• コンテナに「position: relative」を指定し、ポジショニングの基準位置（座標[0,0]）を提供する。コンテナの幅として、ここでは「width: 500px」を指定しておく
• サブコンテンツの幅として、ここでは、「width: 200px」を指定する。さらに、「position: absolute」を指定し、「top: 0」および「left:0」を指定する。これによりサブコンテンツが座標（0,0）に絶対配置される
• メインコンテンツに「position: relative」を指定し、「top: 0」「left: 200px（サブの「widthプロパティ」と同じ値）を指定する。これにより、メインコンテンツが座標（0, 200px）に相対配置される。メインの幅「width: 300px」を指定しておく

ポジショニング型：右サイドバーレイアウト

　右サイドバーのレイアウトも、左サイドバーと同様に指定するだけでOKです。

リスト13　CSSソース：ポジショニング型：右サイドバーレイアウト／06.html, 06.css

div#container {
  width: 500px;
  position: relative; /* 基準点の座標（0, 0）を提供 */
}
div#sub {
  width: 200px;
  position: absolute; /* 座標（0, 300px）に絶対配置 */
  top: 0;
  left: 300px;
}
div#main {
  width: 300px;
  position: relative; /* 座標（0, 0）に相対配置 */
  top: 0;
  left:0;
}

　ポイントは次のとおりです。

• コンテナに「position: relative」を指定し、ポジショニングの基準位置（座標[0,0]）を提供する。コンテナの幅として、ここでは「width: 500px」を指定しておく
• サブコンテンツに「position: absolute」を指定し、「top: 0」および「left:300px」を指定する。これによりサブコンテンツが座標（0,300px）に絶対配置される
• メインコンテンツに「position: relative」を指定し、「top: 0」「left: 0」を指定する。これにより、メインコンテンツが座標（0, 0）に相対配置される