【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ

最終更新日：2021年09月30日 　（初回投稿日：2021年02月09日）

grid-template-areasプロパティは、Grid Layout のエリアに好きな名前を指定することができます。これは Gridコンテナ側に指定します。

Gridアイテム側で grid-areaプロパティでエリア名を書くことで、簡単にアイテムを配置できます。

grid-template-areas と、最後の areas が複数形になっていることに注意。
複数のエリアを指定するから。「s」を書き忘れると何も起こりません。
一方のアイテム側で使う grid-area は単数形で「s」がありません。1個ずつのエリアの指定だから。

本日のINDEX
  1. grid-template-areas の値
  2. grid-template-areas でエリア名を指定する
    1. エリア化したくないセルには「.（ピリオド）」
    2. ウェブページで使ってみたサンプル

グリッドレイアウト関連のプロパティは、下記のように記事を分けます。

【62-1】Grid Layout の grid-template-rows, grid-template-columns
（ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )
【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ　←今日はココ
【62-3】セルやエリアを一括指定する grid-templateショートハンド
【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ
【62-5】アイテム側の位置指定を一括する grid-areaショートハンド
【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ
【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns
【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる
【62-9】Grid Layout での order, position-absolute, z-index, margin
（ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う

参考：
・CSS Grid Layout Module Level 2 | W3C Candidate Recommendation Draft
・grid-template-areas | MDN

grid-template-areas の値

値は、好きなエリア名（文字列）を指定するだけでとても簡単です。

grid-template-areasプロパティ
キーワード none がデフォルト値。
<string>+ <string>は「文字列」のこと
好きなエリア名（Unicode）を「" "」か「' '」で囲んで書きます。
構文の「+」は「1回以上出現」という意味。複数のエリア名を指定できます。
グローバル値 inherit 親の値を継承
initial 継承した親の値を解消しデフォルト値に戻す
unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 グリッドコンテナ
（display:grid か display:inline-grid を指定した要素）

grid-template-areas でエリア名を指定する

grid-template-areasプロパティは複雑なグリッドでなく、サイト全体の構成など、比較的あっさりしたレイアウトを指定するのに適していると思います。

【62-1】Grid Layoutのセルを作ろうで使った
grid-template-rowsプロパティ
grid-template-columnsプロパティ
と一緒に使います。

こんなレイアウトを作ってみます。

header
main contents
footer
navi
side
ad

このレイアウトは、行（row）が4行、カラムが3つあります。

ですのでセルは合計12個できますが、複数のセルを合体させてエリアを作ります。
header と footer は横3個のセルが合体したエリア。
左サイドの navi はタテに2個のセルを合体させます。
真ん中の main contents もタテに2個のセルを合体させます。

HTMLのほうはコレ。
6個のエリアに当てはめるので子要素も6個用意しています。

<div class="container">  <!--Gridコンテナ-->
  <div class="header">header</div>  <!--Gridアイテムは6個-->
  <div class="main">main contents</div>
  <div class="footer">footer</div>
  <div class="nav">navi</div>
  <div class="side">side</div>
  <div class="ad">ad</div>
</div>

Gridコンテナ（親要素）側に grid-template-areasプロパティで各セルにエリアに名前をつけます。
複数のセルを合体させるには、合体させるセル数ぶんの名前を「半角スペース」で区切って書きます。「半角スペース」は複数入ってもOK。
1行（row）ずつ「" "（ダブルクォーテーション）」で囲みます。
これは「' '（クォーテーション）」でも可。

.container{
  border:1px solid#ccc;
  display: grid;
  grid-template-areas:
     "header  header  header"
     "nav     main    ad"
     "nav     main    side"
     "footer  footer  footer";
  grid-template-rows: 4em 5em 1fr 3em;
  grid-template-columns: 5em 1fr 5em;
  }

grid-template-rows、grid-template-columns で各行と各カラムのトラックサイズも指定します（9、10行目）
ここまでが Gridコンテナ（親要素）側の指定です。

ちなみに、上のサンプルコードは、わかりやすいように改行したり、複数の半角スペースを書いていますが、こんなふうに1行で書いてもOK。自分がわかりやすい方で。

grid-template-areas: "header header header""nav main ad""nav main side""footer footer footer";

次に Gridアイテム（子要素）側の指定をします。
grid-areaプロパティで、配置したい場所のエリア名をチョイスします。

.container{
  border:1px solid#ccc;
  display: grid;
  grid-template-areas:
     "header  header  header"
     "nav     main    ad"
     "nav     main    side"
     "footer  footer  footer";
  grid-template-rows: 4em 5em 1fr 3em;
  grid-template-columns: 5em 1fr 5em;
  }
.container div.header {
  grid-area: header;
  background:#fcf;
  }
.container div.main {
  grid-area: main;
  background:#ffc;
  }
.container div.nav {
  grid-area: nav;
  background:#cfc;
  }
.container div.ad {
  grid-area: ad;
  background:#eee;
  }
.container div.side {
  grid-area: side;
  background:#cff;
  }
.container div.footer {
  grid-area: footer;
  background:#ffebcd;
  }

grid-areaプロパティは、エリア名の他にライン番号で指定することもできます。
実はコレ、ショートハンドプロパティなんです。この件は別記事で説明する予定です。

grid-areaプロパティは grid-row-start, grid-column-start, grid-row-end, grid-column-endプロパティのショートハンドです。
また、grid-row-start と grid-row-end のショートハンド grid-row があったり、
grid-column-start と grid-column-end のショートハンド grid-column があったりします。
詳細は後日。

エリア化したくないセルには「.（ピリオド）」

上のサンプルではすべてのセルをエリアにしましたが、エリア化したくないセルがあれば .（ピリオド）を使います。
1個だけでも（.）複数でも（....）使えます。
ただ、他の文字と組み合わせて ...noArea... なんてやったら無効。ピリオドだけしか使えません。

先程のサンプルの「footer」エリアを、両サイドに伸ばすのをやめて、真ん中だけにします。

  grid-template-areas:
     "header  header  header"
     "nav     main    ad"
     "nav     main    side"
     "..     footer   ..";

プレビューはこんなかんじ。

header
main contents
footer
navi
side
ad

ちなみに、デフォルト値の none は、コンテナのエリア指定を全部しないという意味。

grid-template-areas: none;

部分的にエリア指定しない場合には使えません。部分的なら上記の「.（ピリオド）」を使います。

ウェブページで使ってみたサンプル

ウェブページで grid-template-areasプロパティを使ってエリア指定したサンプルです。 （【62-1】冒頭のものと同じです）

先程のサンプルは都合上<div>要素を使っていましたが、実際のウェブページでは <body>要素を Gridコンテナにし、アイテムは <header>, <main>, <footer>, <nav>, <aside>要素などを使います。
（クリックでサンプルが別ウィンドウで開きます）

HTMLはこちら。

<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Grid Layout サンプル：ほんっとにはじめてのHTML5とCSS3</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/sample62.css">
  </head>
  <body>
    <header>
     <h1>Grid Layout</h1>
    </header>
    <nav>nav</nav>
    <main>main</main>
    <aside>sidebar</aside>
    <footer>Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.</footer>
  </body>
</html>

CSSはこちら。

@charset "UTF-8";
html,body,header,footer,nav,aside,main {
	display:block;
    margin:0;
    padding:0;
	box-sizing:border-box}
body {
	background:#fff;
	color:#666}

/*format*/
header,footer,main,nav,aside{
	padding:1em;
    text-align:center}
header h1 {
	font-size:150%;
    line-height:1}

/*Grid Layout*/
body {  /*最初にスマホ用のレイアウトを指定しています*/
	height:100vh;
    display:grid;  /*Grid宣言*/
	grid-template:"header" 80px "main" 1fr "nav" 50px "sidebar" auto  "footer" 50px / 1fr}
header {
	grid-area:header;  /*エリア指定*/
	background:#000;
	color:#fff}
main {
	grid-area:main;  /*エリア指定*/
	background:lemonchiffon}
nav {
	grid-area:nav;  /*エリア指定*/
	background:#a7d28d}
aside {
	grid-area:sidebar;  /*エリア指定*/
	background:#e6bfb2}
footer {
	grid-area:footer;  /*エリア指定*/
	background:#a0d8ef;
	font-size:12px; line-height:1.3}


/*for PC Grid Layout*/
@media screen and (min-width: 600px) {  /*幅600px以上でのレイアウト*/
    body {
        grid-template:"header header header" 110px "nav main sidebar" 1fr "footer footer footer" 60px 
                       / 18% 1fr 18%;
        grid-gap:5px; /*for Safari*/
		gap:5px;}
	header h1 {line-height:inherit}
	footer {font-size:14px; line-height:inherit}
}

次回予告

次回は、ショートハンドプロパティ grid-template を使ってみよう。
これは、今回までの
grid-template-rows
grid-template-columns
grid-template-areas
の3つのプロパティのショートハンドです。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

  • 最終更新日：2021-09-30（Thu）│
  • 投稿日：2021-02-09（Tue）│
  • カテゴリ：はじめてのCSS
Pagetop ↑
« next  ホーム  prev »

スポンサーリンク

コメントの投稿

ご注意：メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません。
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

Pagetop ↑
スポンサーリンク
最新記事
Category
オススメの本
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]
posted with カエレバ
楽天市場
Amazon
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
[ Mana ]
posted with カエレバ
楽天市場
Amazon
HTML＆CSSとWebデザインが1冊できちんと身につく本［増補改訂版］ [ 服部雄樹 ]
posted with カエレバ
楽天市場
Amazon
これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内 直人 ]
posted with カエレバ
楽天市場
Amazon
Links
Calendar
02 | 2025/03 | 04
日 月 火 水 木 金 土
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします～。

＊メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.