【62-3】セルやエリアを一括指定する grid-templateショートハンド

最終更新日:2021年04月03日  (初回投稿日:2021年03月05日)

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

grid-template-rowsgrid-template-columns はこちら↓をご覧ください。
【62-1】Grid Layout の grid-template-rows, grid-template-columns
grid-template-areas はこちら↓
【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ

このgrid-templateの指定は、ちょっと「お作法」があるので、整理してみます。

本日のINDEX
  1. grid-templateショートハンドプロパティの値
  2. 書き方1:grid-template-rows と-columns を一括で
    1. grid-template-areas の値は初期化されるので後に書く
  3. 書き方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
(ちょっとメモ)IE10〜Edge15 では Grid Layout の仕様が違う

参考:
CSS Grid Layout Module Level 2 | W3C Candidate Recommendation Draft
CSS グリッドレイアウト | MDN

grid-templateショートハンドプロパティの値

まずは grid-templateショートハンドプロパティの値を見てみましょう。

grid-templateプロパティ
キーワード none がデフォルト値。明示的なグリッドがまったく無いことになる。
が、暗黙的グリッドは作られる。
CSS構文 <'grid-template-rows'> / <'grid-template-columns'>
grid-template-rows と grid-template-columns の値を「/」で区切って書く。
grid-template-areasは初期化(none)されるので要注意。
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]
これはエリア名(grid-template-areas)を入れて書く方法。
グローバル値 inherit 親の値を継承
initial 継承した親の値を解消しデフォルト値に戻す
unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 グリッドコンテナ
(display:grid か display:inline-grid を指定した要素)

値の CSS構文が2種類あるので、1つずつ見ていきましょう。

書き方1:grid-template-rows と-columns を一括で

書き方の1つめです。
CSS構文は <'grid-template-rows'> / <'grid-template-columns'> となっています。

これは、grid-template-rowsの値grid-template-columnsの値をこの順番で書いて、「/(スラッシュ)」で区切りるだけ。この書き方はけっこう簡単ですね。

例えばこんなふうに2行書いていたものを、

.container{
  display: grid;
  grid-template-rows: repeat(3, 80px);
  grid-template-columns: repeat(2, 130px);
  }

ショートハンドでまとめるとこうなります。

.container{
  display: grid;
  grid-template: repeat(3, 80px) / repeat(2, 130px);
  }

プレビューはこちら。ちゃんとグリッドになってますね。

A
B
C
D
E
F

ライン名も入れる書き方がありましたね。
このように書いていたものは、

.container{
  display: grid;
  grid-template-rows: [top-start] 80px [second] 80px [third] 80px [last];
  grid-template-columns: [first a-start] 130px [b-start] 130px [last];
  }

ただそのまんま「/」で区切ってつなぐだけです。

.container{
  display: grid;
  grid-template: [top-start] 80px [second] 80px [third] 80px [last] / [first a-start] 130px [b-start] 130px [last];
  }

grid-template-areas の値は初期化されるので後に書く

この書き方だと、grid-template-areas の値はデフォルトの none になります。
ですので、エリア設定が必要なら、grid-template-areas を grid-template の後に書くこと! 前に書いちゃだめ。
CSSは後に書いたものが先に書いたやつを上書きするからね。

例えばこのように3つ別に書いていたものを、

.container{
  display: grid;
  grid-template-areas:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
  grid-template-rows: repeat(3, 80px);
  grid-template-columns: repeat(2, 130px);
  }

まとめるならこう。
grid-template-areas を後に移動させないと none になっちゃいます。

.container{
  display: grid;
  grid-template: repeat(3, 80px) / repeat(2, 130px);
  grid-template-areas:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
  }

プレビューはこちら。

A
B
C
D

書き方2:grid-template-areas の値も加えて一括で

書き方の2つ目です。
これは3つのプロパティを全部一括で書けますが、ちょっとしたお作法があります。

さっきのこの↓指定を、

.container{
  display: grid;
  grid-template: repeat(3, 80px) / repeat(2, 130px);
  grid-template-areas:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
  }

全部まとめるとこうなります。

.container{
  display: grid;
  grid-template:
      "areaA areaA" 80px
	  "areaB areaC" 80px
	  "areaD areaD" 80px
      / 130px 130px;
  }

1行(row)ずつ エリア分割と行の高さを行数ぶん書き、
最後に「/」で区切ってカラムの幅を 1カラムずつ別けて書きます。

この書き方では、repeat( )関数は使えないんです。
エリアの指定で1行(row)ずつ書くことに決まってるので、カラムも1カラムずつに別けて書くのが正しいお作法。(アスキーアートの書き方です)
最後のカラムの方で「 / repeat(2, 130px) 」などと書くとエラーになるので要注意。

上のコードはわかりやすいように改行していますが、このように1行で書いてもOK。

.container{
  display: grid;
  grid-template: "areaA areaA" 80px "areaB areaC" 80px "areaD areaD" 80px / 130px 130px;
      }

そして、エリア指定をしたら、アイテム側でそのエリア名を指定しないと何にも起こらないんでしたね。ちゃんと最後まで書くとこんなかんじです。

.container{
  display: grid;
  grid-template: "areaA areaA" 80px "areaB areaC" 80px "areaD areaD" 80px / 130px 130px;
  }
.container div:nth-child(1) {grid-area:areaA; background:#fcf}
.container div:nth-child(2) {grid-area:areaB; background:#ffc}
.container div:nth-child(3) {grid-area:areaC; background:#cfc}
.container div:nth-child(4) {grid-area:areaD; background:#eee}

書き方2 は「エリア名」だけが必須

書き方2のCSS構文はこうなっています。
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
さらに、<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

[ ] は、ひとまとまりという意味。
? は、0回か1回出現(あっても無くても良いってこと)
+ は、1回以上の出現(1個か複数可ってこと)
(構文の読み方はこちらを参考に→ CSSの値の定義構文 | MDN

これを読み解くと、
「ライン名 エリア名 トラックサイズ ライン名」を1単位として1個以上複数可。
「/(スラッシュ)」で区切って、
「ライン名 トラックサイズ」が1個以上複数可で最後に「ライン名」
ということ。

で、「?」記号がついてないのが、グリーン文字にした「エリア名 <string>」だけ
あとは あっても無くても良いってこと。
ですので、この書き方がミニマムということです。

.container{
  display: grid;
  grid-template:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
      }

プレビューはこちら。

A
B
C
D

ちゃんとグリッドにはなってますね。

grid-template-rows と grid-template-columns の値が無いと両方デフォルト値の none になるのですが、grid-auto-rows, grid-auto-columnsプロパティによって暗黙的にグリッドが生成されているのでグリッド化します。(grid-auto-rows, grid-auto-columnsプロパティについては後日詳細)

さて、書き方2でも、ライン名も入れる書き方ができるんですね。
このように書いていたものは、

.container{
  display: grid;
  grid-template-areas:
      "areaA areaA"
	  "areaB areaC"
	  "areaD areaD";
  grid-template-rows: [top-start] 80px [second] 80px [third] 80px [last];
  grid-template-columns: [first a-start] 130px [b-start] 130px [last];
  }

ショートハンドの構文どおりに書くとこんなかんじ。

.container{
  display: grid;
  grid-template:
    [top-start] "areaA areaA" 80px [second] 
    [second] "areaB areaC" 80px [third] 
    [third] "areaD areaD" 80px [last] 
    / [first a-start] 130px [b-start] 130px [last];
  }

プレビューはこちら。ちゃんと指定どおりグリッドが切られています。

A
B
C
D

次回予告

次回は、grid-rowプロパティgrid-columnプロパティを使ってみよう。
これはラインの「番号」や「名前」を使ってアイテムを配置させるプロパティです。アイテム側の要素に指定します。

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

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2021/04 | 05
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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