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

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

webサイトのレイアウト手法にCSS Gridが追加されました。
対応状況の件もあるけれど、今まで以上にレイアウトの自由度が上がることもあって今後使うサイトがグッと増えていくのではないかなと思います。今日から何回かは、webサイトのレイアウトの基本構造を見ていきながら、CSSを使ってどんなふうにレイアウトできるのかを改めて確認していこうと思います。

【今回のサンプル】左サイドバータイプの2カラムレイアウト

今回は、左サイドバーのレイアウトをもとに確認していきます。もちろん、レスポンシブであることを前提として、です。ただし、ブレイクポイントは767pxにします。
サイドバーを右の場合も同じようなことのくり返しになるので、割愛します。

floatを使ったレイアウト

floatは回り込みをするためのプロパティです。CSSを使ったレイアウトでは、けっこう昔から利用されています。CSS2の頃からある手法なので、対応ブラウザが多いのも特徴です。しかし、回り込みを使うため、なかなか思う通りにいかないのが難点ではあります。

floatを使ったレイアウトの見本

上のようなHTMLを用意してみました。
左側のsidebarはまとめて、.leftsideの<div>の中に入れてあります。いわゆる入れ子構造です。

CSSは以下のようになります。

.clearfixを作って回り込みの解除をする方法もありますが、今回は.wrapの疑似要素::afterを使いました。

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

CSSプロパティの一つdisplayのdisplay:tableを使った擬似的なテーブルレイアウトです。この手法は、モバイルフレンドリーであることは一切考慮していません(笑)
web黎明期では、HTMLタグの<table>を使った複雑なレイアウトが流行ったものです。ただ、ものすごく重かったこと、<table>本来の使い方ではないこともあって、現在はきっと使われていないはずです。

<table>を使うときは、ちゃんと「表」であること示すときにしましょうね。

さて、display: tableを使ったレイアウトは、そんな昔流行ったテーブルレイアウトをCSSで擬似的に再現する方法です。

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

floatを使ったレイアウトとの違いは、<table>を使うときとのように、<tr>や<td>にあたる部分を作ってあげるところ、単純に順番どおりに並べてあげることにあります。このため、767px以下で表示すると、本来意図したとおりの順番に配置されません。

テーブルレイアウトを擬似的に再現しているのて、.tableにwidthを指定する必要があります。

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

フレックスボックスを使ったレイアウト手法です。回り込みのfloatに比べて、自由度が高いのが利点です。

一部のレイアウトにフレックスボックスを使う場合

display: flexを使ったレイアウト見本その1

フレックスボックスも回り込みの一種ではあるので、floatを使った手法にHTMLは似ます。.flexを使って、フレックスコンテナを作るのが特徴ですかね。

フレックスボックスを使ったレイアウトの場合、flex-basisを使ってフレックスコンテナ内における横幅を決めることができます。widthによる指定より、さらにフレキシブルになります。さらに、プロパティorderを使うことで、フレックスコンテナ内における順番を制御することができます。

全体のレイアウトにフレックスボックスを使う場合

せっかく自由度が上がってるので、レイアウト全体をフレックスボックスを利用した形にすることもできます。

display: flexを使ったレイアウト見本その2

この場合、全体を.flexの中に入れちゃいます。

ページ全体をフレックスコンテナの中に入れてしまうので、プロパティorderを使って、それぞれの順番を制御し、flex-wrapを使ってフレックスコンテナ内の折り返しがあるように設定します。こうすることで、一部でフレックスボックスを使ったときと同じように表示されます。

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

CSS Gridを使うと、これまで確認してきたレイアウトの仕方とは考え方が変わってきます。これまでのレイアウトの基本は、横並びになっているものを調整していくものです。それはfloatにしろdisplay:flexにしろ、基本は回り込みだからです。

しかし、CSS Gridは縦横の2軸を持ちます。
列の位置、行の位置を自由にレイアウトできるわけです。発想の切り替えが必要になってくるんです。

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

メリットはHTMLがスッキリします。入れ子構造を作る必要がありません。

IE11とEdge用のプロパティを入れているので、若干ゴチャゴチャしていますが、CSSは上記のとおりです。これでfloatやフレックスボックスを使ったときと同じようなレイアウト結果を得ることができます。

36 views/total