トップページ  > CSS  > grid-template-areas

★CSSリファレンス

grid-template-areas …… 名前付きグリッド領域を指定する
Google Chrome Safari Firefox Opera
広告

grid-template-areasプロパティは、名前付きグリッド領域を指定する際に使用します。

■値

none
グリッド名を指定しない(初期値)
トラックリスト
グリッド名を半角スペース区切りにして、トラックリストを指定する

■初期値・適用対象・値の継承

初期値
none
適用対象
グリッドコンテナ
値の継承
しない

■使用例

CSSソースは外部ファイル(sample.css)に記述

#sample1 {
	display: grid;
	width: 100%;
	grid-template-areas: "ue ue"
	                     "hidari migi"
	                     "shita shita";
	grid-template-rows: 80px 1fr 50px;
	grid-template-columns: 100px 1fr;
}

#sample1 > header {grid-area:ue; background-color:orange;}
#sample1 > nav    {grid-area:hidari; background-color:skyblue;}
#sample1 > main   {grid-area:migi; background-color:palegreen;}
#sample1 > footer {grid-area:shita; background-color:pink;}

HTMLソース

<section id="sample1">
<header>上</header>
<nav>右</nav>
<main>左</main>
<footer>下</footer>
</section>
↓↓↓

ブラウザ上の表示

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ