CSSでWebサイトの左右２カラムの背景色を別々に指定する

フラットデザインが流行してから、画面を左右に分けて色も別々にするというデザインが増えてきています。今回は最も簡単にできる方法を紹介します。

まず、従来のレイアウト方法について見ていきましょう。

普段使用するレイアウト法

こんな感じに２カラムで分けるとき、①と④は、②と③をmargin: 0 auto;にして中央揃えした結果できた余白ですよね。しかし、このようなレイアウト方法だと④に③と同じ背景色をつけたい場合どうすればよいのか、となります。方法は色々あります。例えば、position: absoluteを使ってサイドバーを絶対配置にすれば可能です。ただ、この方法は残念ながら、とてもスマートとは言えないです。

display:table-cellを使ったレイアウト法

table-cellを使った方法ならば左右の余白の部分まで色をつけることができます。ここでは、図のようにメインカラムの幅を800px、サイドカラムの幅を300pxとします。それではHTMLとCSSのソースを見てみましょう。

それぞれ①〜④に対応しています。マークアップはこんな感じで次は重要なCSSについて見ていきましょう。

.wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
.wrapper > div {
  display: table-cell;
  vertical-align: top;
}
.l-margin {
  background: #f5f5f5;
}
.main {
  width: 800px;
  background: #f5f5f5;
}
.side {
  width: 300px;
  background: #ddd;
}
.r-margin {
  background: #ddd;
}

重要なところは、３行目のtable-layout: fixedです。これがないと①と④の幅が確保されなくなってしまいます。また、９行目のvertical-alignでは、上揃えにしています。あくまでテーブルレイアウトなので何も設定しないと基本的に上下中央揃えになります。これはExcelとか使ってれば直感的に理解できるはずです。

このレイアウトは今のブログデザインにも使っています。box-shadowを使ってサイドバーに奥行きを出すとより洗練されたデザインになるかと思います。