【レイアウト】CSSを使ったwebレイアウト手法まとめ (3カラム編)

【レイアウト】CSSを使ったwebレイアウト手法まとめ (3カラム編)

2カラムの場合のレイアウトのまとめをしたので、今回は、いわゆる聖杯レイアウトの3カラムのタイプです。

【今回のサンプル】3カラムのレイアウト

いわゆる聖杯レイアウトというヤツです。
サイドバーが左右にあって、メインコンテンツにあたるものが中央にくるというものです。いろんなところで見たことがあるのではないかと思います。前回同様、ブレイクポイントは767pxです。今回はdisplay:tableを使った疑似テーブルレイアウトは割愛します。

floatを使ったレイアウト

プロパティfloatを使う場合は、2カラムのときの方法を利用します。sidebar1で1つのブロック、mainとsidebar2で1つのブロックとして2カラムレイアウトを作った後、再度mainとsidebar2の中でもう一度2カラムレイアウトを作るようなイメージです。

floatを使った3カラムレイアウト見本

今回は以下のようなHTMLにしてみました。

こうすることで、ブレイクポイント以下になったときのブロックの順番を気にしなくて済みます。見える通りのsidebar1、main、sidebar2でfloatを使った場合、ブレイクポイント以下になったときフレックスボックスを使うと意図したとおりの順番に並べ替えることもできます。

今回のCSSはこんな感じ。

今回は、サイドバーのサイズを固定にしたので、残っている部分をcalc()を使って計算しています。calc()便利です。

display:flexを使ったレイアウト

フレックスボックスを使うと、floatを使ったときよりHTMLがスッキリします。

3列になっている部分だけフレックスコンテナを使う場合

3列になっている部分だけフレックスコンテナを使った場合のレイアウト見本

3列になっている部分をフレックスコンテナとして捉えている分、floatのときよりHTMLがスッキリします。順番はプロパティorderで変えられます。

orderプロパティを使って、順番を入れ替えてあげるのがポイントです。

全体にフレックスコンテナを使う場合

全体にフレックスコンテナを使う場合のレイアウト見本

全体をフレックスコンテナの中に入れてしまう以外は、3列部分だけフレックスコンテナにしたときと同じHTMLです。

flex-basisで各ブロックの横幅を指定してorderで順番を決めると、3列部分だけフレックスコンテナにしたときと同じように表示されます。

display:gridを使ったレイアウト

display:gridを使ったレイアウト見本

全体をグリッドコンテナの中に入れてしまうのは、2カラムのときと同じです。さっきの全体をフレックスコンテナの中に入れたときと同じHTMLになるわけです。

2カラムのときと同じように、IE11とEdgeのための対応がダラダラと追加されますが、CSSのほうだけでレイアウトができます。

floatを使ったレイアウトに比べると、HTMLがスッキリする分、CSSのほうで指定することが増えます。けれど、本来HTMLが構造文だということを念頭に置くのであれば、これは当然の流れなのかなと思うのです。

36 views/total