生徒CSSのグリッドをどう書けばよいのか分かりません
先生CSSのグリッドの書き方を説明します
CSSのグリッドレイアウトについて
CSSのグリッドは、複雑なレイアウトをシンプルな書き方で作成できてとても便利です。
ただ、グリッドは独特のプロパティや定義が多くて、理解しにくい部分があります。
この記事では、WEBページよくあるレイアウトをグリッドで作成する手順を説明します。
グリッドレイアウトの構成要素や用語については以下の別の記事に書いています。
WEBページのレイアウトをグリッドで書く
この記事では、以下のレイアウトのグリッドを書いていきます。
ブログやWEBページでよく見かけるレイアウトだと思います。
まずはグリッドのコンテナを定義します。
.container {
// グリッドであることを定義する
display: grid;
}ここからは、グリッドを以下の2つの方法で書いていきます。
グリッドの列と行を定義して書く場合
以下のプロパティを使用してグリッドの列と行を定義して、レイアウトを作成していきます。
| プロパティ | 説明 |
|---|---|
| grid-template-columns | 列のトラックやライン名を定義する |
| grid-template-rows | 行のトラックやライン名を定義する |
グリッドのレイアウトを表の列と行に分けて捉えます。
グリッドの列や行はトラックと言いますので、以下のように考えます。
grid-template-columnsで列トラックを定義する
グリッドの列トラックの幅はgrid-template-columnsプロパティで定義できます。
上のグリッドでは2列ですので、以下のように2つのサイズを定義します。
/*.2つの列トラックのサイズを定義 */
grid-template-columns: 1fr 200px;frについてグリッドの列や行で使うサイズには、通常のサイズの他にfrという単位があります。
frはグリッド内の利用可能な領域に対して比率でサイズを指定します。
/* 同じサイズの3列 */
grid-template-columns: 1fr 1fr 1fr;
/* 1対2の比率で2列 */
grid-template-columns: 1fr 2fr;
/* 100pxと残りを2等分 */
grid-template-columns: 100px 1fr 1fr;grid-template-rowsで行トラックを定義する
グリッドの行トラックの幅はgrid-template-rowsプロパティで定義できます。
上のグリッドでは3行ですので、以下のように3つのサイズを定義します。
/*.3つの行トラックのサイズを定義 */
grid-template-wows: 80px 1fr 80px;アイテムを配置する
グリッドのアイテム（HTML要素）を記述します。
<div class="container">
<header class="header"><p>ヘッダー</p></header>
<main class="contains"><p>コンテンツ</p></main>
<aside class="menu"><p>メニュー</p></aside>
<footer class="footer"><p>フッター</p></footer>
</div>アイテムを配置しただけだと1個のセルに1個のアイテムが配置されます。
各アイテムのサイズを指定して、レイアウトを変更します。
grid-columnで列のサイズを指定する
アイテムの列サイズをgrid-columnプロパティで指定します。
grid-columnプロパティは列ラインを指定してアイテムのサイズを定義します。
今回のレイアウトではラインは以下の図のようになっています。
ヘッダーとフッターは2列にまたがるレイアウトなので以下のように指定します。
/* ヘッダー */
.header {
/* 列ライン1から列ライン3までの列幅 */
grid-column: 1 / 3;
}
/* フッター */
.footer {
/* 列ライン1から列ライン3までの列幅 */
grid-column: 1 / 3;
}grid-rowで行のサイズを指定する
アイテムの行サイズはgrid-rowプロパティで指定します。
grid-rowプロパティもラインを指定してアイテムのサイズを定義します。
今回のレイアウトでは行ラインは以下のようになっています。
2行以上にまたがるアイテムが無いためgrid-rowプロパティは不要です。
grid-rowプロパティを指定する必要がある場合は、以下のように指定します。
/* ヘッダー */
.header {
/* 行ライン1から行ライン2までの列幅 */
grid-column: 1 / 2;
}
/* フッター */
.footer {
/* 列ライン2から行ライン3までの列幅 */
grid-column: 2 / 3;
}テンプレートでレイアウトを定義して書く場合
グリッドのレイアウトを以下のプロパティを使用して設定します。
| プロパティ | 説明 |
|---|---|
| grid-template-areas | エリアの構成を定義する |
| grid-template | 列や行とエリアを一括で定義する |
グリッドのレイアウトをセルに分けて以下のようにエリアとして捉えます。
grid-template-areasでレイアウトを定義する
grid-template-areasプロパティで各セルがどのエリアに属するか定義します。
/* グリッドの各セルをエリアに分けて定義する */
grid-template-areas:
"header header header"
"contents contents menu"
"footer footer footer";この時点でアイテム（HTML要素）を追加しても以下のように一つのセルに一つのHTML要素が配置されるだけです。
grid-templateプロパティを使用すると、エリアだけでなく列と行のサイズも一度に定義できます。
少し複雑で分かりにくいですがgrid-templateプロパティの書き方は以下になります。
grid-template:
"header header header" 1行目の高さサイズ
"contents contents menu" 2行目の高さサイズ
"footer footer footer" 3行目の高さサイズx / 1列目のサイズ 2列目のサイズ 3列目のサイズ;grid-areaプロパティでアイテムを配置するエリアを指定します。
ヘッダーを配置する
まずは、ヘッダー用アイテムにgrid-area: header;と定義します。
/* グリッドコンテナ */
.container {
display: grid;
grid-template-areas:
"header header header"
"contents contents menu"
"footer footer footer";
}
/* ヘッダー用アイテム */
header {
/* 上のgrid-template-areasの"header"に配置する */
grid-area: header;
background: #FFB6C1;
}これでヘッダー用アイテムが、1行目の3つのセルにまたがって配置されます。
他のアイテムも配置する
ヘッダー以外のアイテムも同じようにgrid-areaプロパティで配置していきます。
/* ヘッダー用アイテム */
header {
grid-area: header;
background: #FFB6C1;
}
/* メイン用アイテム */
main {
grid-area: contents;
background: #FFCC7E;
}
/* メニュー用アイテム */
nav {
grid-area: menu;
background: #CBC3E3;
}
/* フッター用アイテム */
footer {
grid-area: footer;
background: #87CEEB;
}これで、以下のように今回のレイアウトが完成します。
あとは各アイテムのサイズを定義して、レイアウトを調整します。