[CSS] 2カラム・3カラムをつくる方法：floatやdisplayプロパティの利用
HTML
<div id="container"> <div id="left-pane"></div> <div id="main"></div> <div id="right-pane"></div> </div>
共通事項
- すべてのカラムに「height: 100%;」を指定する。そうしないと、それぞれの高さが内容によってバラバラになってしまう。
- 全体のセンタリングのためにコンテナが必要。
- コンテナに幅を指定し、左右のマージンを「auto」にすることでセンタリングする。「margin: 0 auto;」。
- 各カラムやコンテナにborderやmarginは使わない。全体の幅の計算がしづらくなり、レイアウト崩れが起きやすくなる（borderの幅はwidthに含まれない）。隣のカラムと間を空けたい場合は、paddingを使ったり内部に新たなブロック要素をつくったりする。
floatを使う場合
ポイント
- すべてのカラムを左右にどちらかに振り分ける。
- あとの要素にfoatの影響を与えないために、最後に「clear: both；」を指定する。下記では、:after擬似要素を使ってそこで指定している（いわゆるcleafixと同じ）。
#container {
max-width: 1000px;
margin: 0 auto;
}
#container:after {
clear: both;
}
#left-pane, #main, #right-pane {
float: left;
height: 100%;
}
#left-pane, #right-pane {
width: 20%;
background-color: blue;
}
#main {
width: 60%;
background-color: red;
}
「display: inline-block;」を使う場合
ポイント
- 各カラムをインライン要素にし、かつ幅と高さを指定するために「display: inline-block;」を使う。
- 縦方向にそろえるために「vertical-align: top;」を指定する。
#container {
max-width: 1000px;
margin: 0 auto;
}
#left-pane, #main, #right-pane {
display: inline-block;
height: 100%;
}
#left-pane, #right-pane {
width: 20%;
background-color: blue;
}
#main {
width: 60%;
background-color: red;
}
inline-blockは基本的にインライン要素であるため、上記のHTMLだと各カラムの間に余計な半角スペースができてしまう。
これは、インライン要素の前後にある改行やタブは半角スペースひとつにまとめられるため。
今回のようにページ全体のレイアウトをつくる場合、#left-pane, #main, #right-paneをインラインで書くのは無理があるため、それを防ぐには下記のようにコメントを利用するなど工夫が必要になる。
くわしくはこちら。
<div id="container"> <div id="left-pane"></div><!-- --><div id="main"></div><!-- --><div id="right-pane"></div> </div>
各カラムは基本、インライン要素なので、コンテナを使わなくても「text-align: center;」でセンタリングできる。
そのかわり、text-alignは継承されるので、各カラムで「text-align: left;」を指定して解除する必要がある。
#container {
text-align: center;
/* 幅を指定する必要がない */
}
#left-pane, #main, #right-pane {
display: inline-block;
height: 100%;
text-align: left;
}
#left-pane, #right-pane {
width: 200px;
background-color: blue;
}
#main {
width: 450px;
background-color: red;
}
「display: table;」を使う場合
ポイント
- 基本、いわゆるテーブルレイアウトと同じなので、柔軟なデザインが可能。
- displayプロパティのtableやtable-cellを使って、対象要素をテーブル要素と同じ扱いにする
- かならずしもtable-rowの要素を用意する必要はない。
#container {
/* tableはブロック要素 */
display: table;
max-width: 1000px;
margin: 0 auto;
}
#left-pane, #main, #right-pane {
display: table-cell;
height: 100%;
}
#left-pane, #right-pane {
width: 200px;
background-color: blue;
}
#main {
width: 450px;
background-color: red;
}
しかしこれだと、実質的にHTMLのtable要素を使ってレイアウトするのとあまり変わりがない。あくまでCSSで指定しているので柔軟な対応が可能だが、理屈はともかく、WYSIWYGエディタを使う場合は素直にtable要素を使うほうが手っ取り早いだろう。