CSSレイアウト

応用レイアウト

３カラム＋ヘッダー＋フッター

ブログに多いタイプのレイアウトです。今回は、左右のカラムは固定幅で、真ん中のカラムは可変幅のレイアウトを考えてみましょう。

３カラム＋ヘッダー＋フッター 今回のレイアウトサンプル

ヘッダー
ID：#header
高さ：100px
背景色：#f99
左カラム
ID：#left-column
幅：120px
背景色：#fdd
中央カラム
ID：#center-column
幅：指定無し
背景色：#fff
右カラム
ID：#right-column
幅：180px
背景色：#fdd
フッター
ID：#footer
高さ：40px
背景色：#f99

フロート（回り込み）を用いたレイアウト（２）を参考にしてください。

以下、ソースコードになります。

<html>
<head>
  <title>３カラム＋ヘッダー＋フッター</title>
  <link rel="stylesheet" href="../sample6_1.css" type="text/css" />
</head>
<body>
<div id="header">
  <p>ヘッダー</p>
</div>
  <div id="left-column">
    <p>左側のカラムです。</p>
  </div>
  <div id="wrapper">
    <div id="right-column">
      <p>右側のカラムです。</p>
    </div>
    <div id="center-column">
      <p>中央のカラムです。</p>
    </div>
  </div>
  <div id="footer">
    <p>フッター</p>
  </div>
</body>
</html>

* { margin: 0; padding: 0; }
#header {
  height: 100px;
  background: #f99;
}
#wrapper {
  margin-left: 120px;
}
#left-column {
  float: left;
  width: 120px;
  background: #fdd;
}
#center-column {
  margin-right: 180px;
  background: #fff;
}
#right-column {
  width: 180px;
  background: #fdd;
  float: right;
}
#footer {
  height: 40px;
  background: #f99;
  clear: both;
}

コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル６－１（ZIP）

３カラム＋ヘッダー＋フッター（ブラウザでの表示結果）

さて、ここで問題が一つあります。通常、ブログであれば、左右のカラムには、

  • Trackback
  • Comment
  • Archives
  • Links
  • etc...

などの、中央のカラム（メインコンテンツ）よりも重要度が低いコンテンツ（？）がずら～っと配置されることになります。

CSSは、単なる文章の飾りの要素であるため、もしCSSをオフにした場合でも、正常に文章が閲覧できる必要があります。

もし、このHTML文章をCSSをオフにして読もうとした場合、上の方は重要度の低いコンテンツ（左カラム・右カラム）が並び、下のほうにメインコンテンツ（中央カラム）が表示されることになります。これは、閲覧する側にとっては不便でしょう。（特に、音声読み上げブラウザを使用した場合など）

また、メインコンテンツがHTML文章の上の方に無いということは、SEOの面から考えても、あまり好ましいとはいえません。

したがって、メインコンテンツがHTML文章の最後にきてしまうこのレイアウト方法はお勧めしません。・・・３カラム構成の場合は、すべて固定幅のカラムもしくはすべて可変幅のカラムにするのがよいでしょう。