サイトのレイアウトを2カラム(メインカラムとサイドバー)にするCSSの記述。

サイトのレイアウトを、サイドバー(横幅固定)とメインカラム(レスポンシブに横幅は可変)の2カラム表示にしたかったので、CSSの「flex」と「grid」の記述で実装する方法のメモ。

※ CSSプロパティーのブラウザ対応状況はCan I useで確認。(実機では未検証。)

CSSで2カラムにする方法は、以下の3つ。

• 方法1 :「display: flex;」を使う。(CSS Flexible Box Layout Module)
• 方法2 :「display: grid;」を使う。(CSS Grid Layout Module)
• 方法3 :「float: left;」と「float: right;」を使う。

複雑なレイアウトを行うなら「grid」、普通の2カラムにするだけなら「flex」、古いIEまで対応するなら「float」を使う。

※ 「flex」と「grid」の場合は、横並びの2つのカラム要素が高い方に合わせて自動的に同じ高さになるが、「float」の場合は、横並びのカラム要素が個々の高さのままで不揃いになる。

HTMLのマークアップ

左にメインカラム、右にサイドバーカラムとする場合の基本的な2カラム用のHTMLのマークアップ。

<div class="container">
	<main class="child-left">
		<div>メインカラム(メインのコンテンツ)</div>
	</main>
	<aside class="child-right">
		<div>固定幅カラム(サイドバーのコンテンツ)</div>
	</aside>
</div>

「display: flex;」を使う方法

「flex」は「grid」の場合よりも記述が簡単。要ベンダープレフィックスでIE10まで対応。

「Flexible Box Layout Module」は、一次元(縦方向だけ、または横方向だけ)に対してレイアウトを設定するためのCSSの機能。(Mozillaの公式ドキュメント。)

※ ここで使用している以外のCSS Flexible Box Layout ModuleのプロパティーはIE非対応のものがあるので、使う場合は要確認。

「display: flex;」で2カラムのCSS記述

1. コンテナー(親要素)に「display: flex;」(または「inline-flex」)を指定。
2. 横幅をレスポンシブな可変にしたいカラム(コンテナーの子要素)に「flex-grow: 1;」を指定。(空白の占有割合の設定。)
3. 横幅固定のカラム(コンテナーの子要素)に「flex-shrink: 0;」を指定して横幅が縮小されるのを防止。
4. 横幅固定のカラム(コンテナーの子要素)に「flex-basis: 300px;」を指定して横幅の固定値を設定。

※ カラムを逆(サイドバーを左側、メインカラムを右側)にしたい場合は、コンテナー(親要素)に「flex-flow: row-reverse;」を記述してフレックスアイテム(コンテナーの子要素)を逆順にする。(もしくは、HTMLのマークアップの時点で、「aside」を「main」より先に記述する。)

.container {
	display: -ms-flexbox;/* IE11とIE10対応 */
	display: flex;
}
main.child-left {
	-ms-flex-positive: 1;/* IE10対応 */
	flex: 1 1 auto;
}
aside.child-right {
	width: 300px;/* IE10対応 */
	flex: 0 0 300px;
}

display: flex : ブロック要素のように動作しつつ、内包コンテンツをフレックスボックスモデルに従ってレイアウトする。直接の子要素がフレックスアイテムに変わる。インライン要素のように扱う場合は「display: inline-flex;」を指定。

flex : フレックスアイテムの「flex-grow」、「flex-shrink」、「flex-basis」を一括指定するプロパティー。

flex-grow : 初期値は0。0以上の数値が設定できる。フレックスコンテナー(親要素)内に残っている空間のうち、そのアイテムに割り当てられる割合(フレックス伸長係数)を設定。「flex-growの値 ÷ 全ての兄弟要素のflex-growの値の合計」の割合が割り当てられる。

flex-shrink : 初期値は1。0以上の数値が設定できる。フレックスコンテナー内のアイテムの縮み方の比率(縮小係数)を指定する。各アイテムの幅の合計がコンテナーの幅より大きいとき、この値によって各アイテムの幅が縮小される。(0が指定されている場合は縮小しない。)

flex-basis : 初期値はauto。フレックスアイテムの初期の寸法を設定。「flex-basis」での設定値から伸縮、縮小できるかを「flex-grow」、「flex-shrink」の設定値で指定する。(「flex-basis」の値が「auto」以外の場合、「width」プロパティーでの値よりも優先される。)

上記のレスポンシブなカラムに設定される横幅の算出方法

「1(flex-growの値)」 / 「1 + 0(全ての兄弟要素のflex-growの値の合計)」 * 「コンテナー内に空白として残っている横幅」 + 「該当カラム要素の本来の横幅」 = 「実際の横幅」

※ 「コンテナー内に空白として残っている横幅」とは、コンテナー(親要素)の横幅から「aside.child-right」に割りてた300pxと「main.child-left」がインライン要素として本来持っている横幅を引いた数値。

「display: grid;」を使う方法

「grid」なら複雑なレイアウトもできるが、「flex」の場合より記述が煩雑。IE10以下は非対応。

PC表示とスマホ表示で部分的に配置を変えるなど、複雑なレイアウト仕様をCSSだけで実装する場合は「grid」を使う。(単純な2カラムにするだけなら「flex」を使う方が無難。)

「Grid Layout Module」は、二次元(縦方向と横方向)に対してレイアウトを設定するためのCSSの機能。(Mozillaの公式ドキュメント。)

親要素の表示領域を好きな個数と寸法で縦横にマス目化し、各子要素を好きなマス目の範囲に配置するという考え方。

※ IEに対応しているプロパティーは限られる。

「Grid Layout Module」の主な特徴

1. コンテナー(親要素)

• コンテナーに「display: grid;」を指定すると、直接の子要素が「グリッドアイテム」に変わる。
• コンテナーに列と行の「幅」と「個数」を定義して「グリッドトラック」を作る。
• 「グリッドトラック」の幅の設定時に指定した縦横の幅の個数で「グリッドセル」の個数(マス目の数)が決まる。
• 「グリッドトラック」を作ると「グリッド線」(縦線と横線の概念)が発生する。(線は指定値に使われるだけで可視化や装飾はできない。)
• ドキュメントに設定されている言語の書式方向に従って、「グリッド線」に1から順に番号が振られる。(逆方向は-1から指定できる。)
• それぞれの「グリッドセル」にCSS上で任意の名前を付けることができる。

2. グリッドアイテム(コンテナーの子要素)

• 「グリッド線」の番号や名前を指定して、「グリッドアイテム」を指定位置に配置する。
• 「グリッドアイテム」は縦横の複数のセルに跨って配置できる。
• 「z-index」を利用して複数の「グリッドアイテム」を同じセル内に重ねて配置できる。
• 位置が明示されていない「グリッドアイテム」の配置を制御するアルゴリズムが含まれている。

3. その他

• 新たに制定された「fr」(a fraction)という、分数割合(フレックス係数)で数値が算出される単位が指定できる。(「frの値 ÷ 全ての兄弟要素に指定したfrの値の合計」で算出した値が割当られる。)
• repeat()記法(繰り返し記法)が使える。(「repeat(3, 100px)」で100px幅のセルを3個設定。) ※ IE非対応
• CSSの関数「minmax(最小値, 最大値)」で幅の最小値と最大値を指定できる。※ IE非対応

「display: grid;」で2カラムのCSS記述

1. コンテナー(親要素)に「display: grid;」(または「inline-grid」)を指定。
2. コンテナー(親要素)に「grid-template-rows: auto;」で縦方向の「グリッドトラック」の数と幅を設定。(幅が「auto」の1トラックを指定。)
3. コンテナー(親要素)に「grid-template-columns: auto 300px;」で横方向の「グリッドトラック」の数と各幅を設定。(幅が「auto」と「300px」の2トラックを指定。)
4. 横幅をレスポンシブな可変にしたいカラム(コンテナーの子要素)に「grid-column: 1 / 2;」で「配置するグリッドセル」の開始/終了の位置を指定。(グリッド線の「1」~「2」の場所に配置。)
5. 横幅固定のカラム(コンテナーの子要素)に「grid-column: 2 / 3;」で「配置するグリッドセル」の開始/終了の位置を指定。(グリッド線の「2」~「3」の場所に配置。)

.container {
	display: -ms-grid;/* IE11対応 */
	display: grid;
	-ms-grid-rows: auto;/* IE11対応 */
	grid-template-rows: auto;
	-ms-grid-columns: auto 300px;/* IE11対応 */
	grid-template-columns: auto 300px;
}
main.child-left {
	-ms-grid-column: 1;/* IE11対応 */
	grid-column: 1 / 2;
}
aside.child-right {
	-ms-grid-column: 2;/* IE11対応 */
	grid-column: 2 / 3;
}

display: grid : ブロック要素のように動作しつつ、内包コンテンツをグリッドモデルに従ってレイアウトする。直接の子要素がグリッドアイテムに変わる。インライン要素のように扱う場合は「display: inline-grid;」を指定。

grid-template-rows : グリッドトラックの縦方向のサイズのリストを指定する。サイズ指定の前に「[ 名前 ]」でグリッドの線に任意の名前を設定することもできる。

grid-template-columns : グリッドトラックの横方向のサイズのリストを指定する。サイズ指定の前に「[ 名前 ]」でグリッドの線に任意の名前を設定することもできる。

grid-column : 「grid-column-start」プロパティー(開始位置)と「grid-column-end」プロパティー(終了位置)を一括指定するプロパティー。「開始位置と終了位置のグリッド線の番号」、またはコンテナー側で設定した「セルの名前」、または「開始位置のグリッド線の番号とグリッドスパン」(開始位置からn番目の線に終了位置を設定「開始線番号 / span 数値」)のいずれかを指定して、グリッドアイテム(子要素)を配置する範囲を設定する。

「float」を使う方法

古典的な方法。古いIEにも対応。

[ 注意点 ]

• 2つのカラムの高さは自動的には揃わない。
• ブラウザ固有のCSSをリセットしておかないと、DOMの改行や空白のノードなどが原因のずれ込みが発生することがある。(すべてのノードの大きさやmarginなどを0にリセットして対処。)
• 2カラム部分より下に別のコンテンツとなる要素を記述する場合は、その要素に「clear: both;」を指定して「float」を解除する必要がある。

main.child-left {
	float: left;
	width: 100%;
	margin-right: -300px;
}
aside.child-right {
	float: right;
	width: 300px;
}

• flexプロパティの実践的な使い方を徹底解説
• CSS Grid Layout を極める！（基礎編）