グリッドレイアウト

概要

任意のタグ要素で構成された二次元の表を作成する。複数の表から構成された複雑な構造を作ることもできる。

シンプルな表を作成する

２行 x ３列の表

１

２

３

４

５

６

HTML

６個の div要素は表の左上から右下に向かって順番に配置される。

CSS

グリッドレイアウトを作成するには、displayプロパティに gridを設定すること。表の定義では列の並びのみを指定する。各列の長さは、本例のようにピクセル数で指定する他に、横幅に対する割合を指定するなど様々な方法がある。

グリッドの幅の指定

横幅をピクセル数で指定する

2個の div要素が指定したピクセル数で並ぶ

１

２

HTML

CSS

横幅を比率で指定する

グリッドの幅を指定した比率（1:2）で分割し、2個の div要素を並べる。div要素の幅はグリッドの幅に応じて変化する

１

２

HTML

上記と同じ

CSS

横幅を自動的に調整する

グリッドの幅を２分割し、２個の div要素を並べる。幅は CSSが自動的に決める。div要素の幅はグリッドの幅に応じて変化する

１

２

HTML

上記と同じ

CSS

グリッドの高さの指定

高さをピクセル数で指定する

2個の div要素が指定したピクセル数の高さで縦に並ぶ。

１

２

HTML

CSS

高さを比率で指定する

2個の div要素が指定した比率（1:2）の高さで縦に並ぶ。

ある行が特定の高さを持った場合、それを基準に全ての行の高さを再計算する。本例では１行目が 25pxなので、2行目が自動的に 50pxになる。

１

２

HTML

CSS

高さを自動的に調整する

２個のdiv要素を縦に並べる。CSSは表示に必要な高さを自動的に計算する。本例では、指定した文字が表示できる高さに調整される。

１

２
２

HTML

CSS

グリッドをネストする

グリッドのネストにより複雑な構造のページを作成することができる。次の例は表を３分割したものである。ページを左右に分割し、左側に１列の表を作成、右側は上下に分割し、上下にそれぞれ１列の表を作成する。ページのデザインではよく見るパターンであると思う。

メニュー

見出し

明細

HTML

frame2 は frame1 の入れ子になる。（背景色を指定する styleプロパティは省略）

CSS

行・列の連結

CSSにおける、行・列の指定方法が特殊である。開始行（列）番号から、終了行（列）番号＋１を指定する。2から 3行目までなら、2/4 となる。

行の連結

表の 2列の 1行から 2行を連結する。

１

２

３

４

５

HTML

連結対象の要素（2列 1行目）に cssクラスを指定する。

CSS

列の連結

１

２

３

４

５

HTML

連結対象の要素（2列 2行目）に cssクラスを指定する。

CSS

[ 特記 ]

かなり使い辛いと思う。冗長であるが、それぞれ個別にグリッドを定義（場合によってはネストを利用）すれば良いのではないか。最初の例であれば、3列のグリッドを定義し、その中で、左右にそれぞれ 2行のグリッドを定義する。後の例では、2行のグリッドを定義した上で、1行目は 3列、2行目は 2列のグリッドを定義する。