ITハットMENUすべてのカテゴリーWeb制作93仕事効率化4Electron32015.07.12CSSでWebサイトの左右2カラムの背景色を別々に指定するフラットデザインが流行してから、画面を左右に分けて色も別々にするというデザインが増えてきています。今回は最も簡単にできる方法を紹介します。、従来のレイアウト方法について見ていきましょう。auto;にして中央揃えした結果できた余白ですよね。、このようなレイアウト方法だと4に3と同じ背景色をつけたい場合どうすればよいのか、となります。absoluteを使ってサイドバーを絶対配置にすれば可能です。この方法は残念ながら、とてもスマートとは言えないです。display:table-cellを使ったレイアウト法table-cellを使った方法ならば左右の余白の部分まで色をつけることができます。ここでは、図のようにメインカラムの幅を800px、サイドカラムの幅を300pxとします。それではHTMLとCSSのソースを見てみましょう。それぞれ1〜4に対応しています。マークアップはこんな感じで次は重要なCSSについて見ていきましょう。これがないと1と4の幅が確保されなくなってしまいます。9行目のvertical-alignでは、上揃えにしています。テーブルレイアウトなので何も設定しないと基本的に上下中央揃えになります。これはExcelとか使ってれば直感的に理解できるはずです。このレイアウトは今のブログデザインにも使っています。box-shadowを使ってサイドバーに奥行きを出すとより洗練されたデザインになるかと思います。