【62-5】アイテム側の位置指定を一括する grid-areaショートハンド

最終更新日:2021年09月30日  (初回投稿日:2021年05月01日)

grid-areaショートハンドプロパティは以下の 4つの値を一括で指定できます。
・grid-row-start
・grid-column-start
・grid-row-end
・grid-column-end

前回は、
grid-rowショートハンドgrid-row-start、grid-row-end を一括指定)
grid-columnショートハンドgrid-column-start、grid-column-end を一括指定)
を使いましたが、今回は 4つすべてをまとめます。

本日のINDEX
  1. grid-areaの値
  2. grid-areaの値の書き順は「start / start / end / end」
  3. grid-areaの値を省略するときの法則
  4. 値が3個の場合
    1. 値が 3コの場合の例(エリアが1カラムの場合)
  5. 値が2個の場合
    1. 値が 2コの場合の例-1(エリアが1行1カラムの場合)
    2. 値が 2コの場合の例-2(自動配置の場合)
  6. 値が1個の場合
    1. 値が 1コの場合の例-1(エリア名)
    2. 値が 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 Editor's Draft
CSS グリッドレイアウト | MDN

grid-areaの値

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

grid-areaプロパティ
キーワード auto がデフォルト値。自動でアイテム配置するか、既定値「1(セル数)」をとる
CSS構文 <grid-line> [ / <grid-line> ]{0,3}
「ライン」を /(スラッシュ)で区切りながら 1〜4個まで書く
<grid-line> =
<custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
グローバル値 inherit 親の値を継承
initial 継承した親の値を解消しデフォルト値に戻す
unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 グリッドアイテム
またはグリッドコンテナを基準にする絶対配置ボックス

値そのものは、前回の grid-rowプロパティgrid-columnプロパティの値と同じです。ライン番号、ライン名、span値などの組み合わせでしたね。

それを複数 /(スラッシュ)で区切りながら書いていくんですが、書き順に決まりがあります。

grid-areaの値の書き順は「start / start / end / end」

grid-areaの4つの値は、順序がこのように決まっています。
grid-row-start / grid-column-start / grid-row-end / grid-column-end
row(行)と column(カラム)の start が先に並び、両方の end が後に続く形です。

最初に grid-row-start を書くと、次は同じ grid-rowend を書きたくなりますが、そこは我慢。columnstart を2番目に書きます。(ややこしいよね〜)

grid-areaプロパティの書き方をサンプルで試してみます。
プレビューはこちら(毎度おなじサンプルでアレなんですが)

A
B
C
D

サンプルではこんなライン名を指定しています。

ライン名やライン番号で指定するとCSSはこうなりました。

.container{
  box-sizing:border-box;
  border:1px solid#ccc;
  padding:0;
  display:grid;
  grid-template: [top-start] 80px [second] 80px [end] 
               / [a-start] 1fr [b] 1fr [third] 1fr [end];
  }	
.container div:nth-child(1) {
  grid-area: top-start / a-start / span 2 / b;
  background:#fcf}
.container div:nth-child(2) {
  grid-area: top-start / b / 2 / span 2;  /*ライン名だけじゃなくライン番号も使ってます*/
  background:#ffc}
.container div:nth-child(3) {
  grid-area: second / b / end / 3;  /*ライン名だけじゃなくライン番号も使ってます*/
  background:#cfc}
.container div:nth-child(4) {
  grid-area: 2 / third / end / end; /*ライン名だけじゃなくライン番号も使ってます*/
  background:#eee}
.container div{padding:1em;text-align:center}

ちなみに HTMLはこちら

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

grid-areaの値を省略するときの法則

値は4コ全部書かなくても、いくつか省略することも可能です。
値を省略した場合にどうなるか、仕様で決まっています。

grid-column-end を省略すると、その grid-column-end
grid-column-start が「任意の文字列(ライン名・エリア名)」の場合はその文字列に。
それ以外の場合は「auto」に設定される。
grid-row-start / grid-column-start / grid-row-end

grid-row-end を省略すると、その grid-row-end
grid-row-start が「任意の文字列(ライン名・エリア名)」の場合はその文字列に。
それ以外の場合は「auto」に設定される。
grid-row-start / grid-column-start / grid-row-end

grid-column-start を省略すると、
grid-row-start が「任意の文字列(ライン名・エリア名)」の場合は、4つのすべての値がその文字列に。
それ以外の場合は、4つのすべての値が「auto」に設定される。
grid-row-start / grid-column-start / grid-row-end

値が3個の場合

「値が3コ」とは、最後の grid-column-end が省略された場合です。
grid-row-start / grid-column-start / grid-row-end

値が 3コの場合の例(エリアが1カラムの場合)

先程のサンプルソースで、「値3コ」で書ける部分を修正してみました。
「A」「C」「D」のアイテムは エリアの横方向が1カラムなので、最後の値を省略。

.container div:nth-child(1) {
  grid-area: top-start / a-start / span 2;
  }
.container div:nth-child(2) {
  grid-area: top-start / b / 2 / span 2;
  }
.container div:nth-child(3) {
  grid-area: second / b / end;
  }
.container div:nth-child(4) {
  grid-area: 2 / third / end;
  }

この例では、grid-column-start は「任意の文字列」。
grid-column-end を略すと grid-column-start の文字列と同じになる決まりですが、start と end が同じ値だとエラーになり「span 1」と等価になる決まりもあります。
なので、横方向1カラム分になるアイレムは省略OKなんです。

もしも 始まり側がライン番号(数値)なら、終わり側は auto になりますので、コレも autoの既定値「1」で1カラム。
1カラムのエリアなら最後の値は略してOKということですね。

プレビューはこちら。

A
B
C
D

値が2個の場合

「値が2コ」なら grid-row-start と grid-column-start がある場合です。
grid-row-start / grid-column-start

値が 2コの場合の例-1(エリアが1行1カラムの場合)

始まり側の値が「ライン名」なら「任意の文字列」なので、終わり側も同じ文字列になり、エラーにより「span 1」が適用されて 1行、または1カラムになります。

始まり側が「ライン番号」なら終わり側は auto になるので、これも既定値「1」が適用されて 1行、または1カラムになります。

先程のサンプルソースで、 1行1カラムのアイテム(CとD)を「値2コ」で書き直すとこうなります。

.container div:nth-child(1) {
  grid-area: top-start / a-start / span 2;
  }
.container div:nth-child(2) {
  grid-area: top-start / b / 2 / span 2;
  }
.container div:nth-child(3) {
  grid-area: second / b;
  }
.container div:nth-child(4) {
  grid-area: second / third;
  }

プレビューはこちら。

A
B
C
D

値が 2コの場合の例-2(自動配置の場合)

1行1カラムじゃなくても、自動配置を使う場合は、値2コで書くこともあります。

始まり側が auto だと、アイテムは「自動配置」になり、HTMLソースで並んでる順に左上からアイテムが流し込まれます。

これは、grid-auto-flowプロパティが効いているから。
grid-auto-flowプロパティは指定しなくても デフォルト値 row が効いているので。
grid-auto-flowプロパティについては次回記事にします)

上のサンプルのソースを自動配置を利用して書くとこのようになります。

.container div:nth-child(1) {
  grid-area: span 2;
  }
.container div:nth-child(2) {
  grid-area: auto / span 2;
  }
/*1行1カラムのアイテム(CとD)は指定ごと省略*/

2番目のアイテム(B)は、値が「auto / span 2」の2個です。
最初の grid-row-start は auto にして自動配置させます。
次の grid-column-start は span 2 で 2カラム使用。

プレビューです。

A
B
C
D

値が1個の場合

「値が1コ」だと grid-row-start だけがある場合です。
grid-row-start

値が 1コの場合の例-1(エリア名)

サンプルのエリア「C」の値を最初の1コだけにしてみました。
まあこうなりますわなあ。レイアウトが崩れました。

A
B
C
D

CSSはこちら。

.container div:nth-child(1) {
  grid-area: top-start / a-start / span 2;
  }
.container div:nth-child(2) {
  grid-area: top-start / b / 2 / span 2;
  }
.container div:nth-child(3) {
  grid-area: second;
  }
.container div:nth-child(4) {
  grid-area: second / third;
  }

「ライン名」なら、4つの値はすべて同じ文字列になるので、エラーになります。
「ライン番号」は、他の3つが auto になるので、行の開始位置しか指定できません。

grid-areaプロパティで「文字列1つだけ」指定する方法は、
【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ
で使いましたね。

前回の
【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ「エリア名」で位置を指定する でも、値を全部エリア名にすれば、エリア指定できることを紹介しました。今回の grid-areaショートハンドで、これを一括で指定できるというわけです。

/*grid-row と grid-column でエリア名を指定した場合*/
.container div:nth-child(1) {
  grid-row: areaA / areaA;
  grid-column: areaA / areaA;
  }
.container div:nth-child(2) {
  grid-row: areaB / areaB;
  grid-column: areaB / areaB;
  }
.container div:nth-child(3) {
  grid-row: areaC / areaC;
  grid-column: areaC / areaC;
  }
.container div:nth-child(4) {
  grid-row: areaD / areaD;
  grid-column: areaD / areaD;
  }

というわけで、サンプルをエリア名で指定した CSSはこちら。
(この場合はコンテナ側に grid-template で「エリア指定」しないと意味無いです)

.container{
  display:grid;
  grid-template: "areaA areaB areaB" 80px
                 "areaA areaC areaD" 80px
               / 1fr 1fr 1fr;
  }
.container div:nth-child(1) {
  grid-area: areaA;
  }
.container div:nth-child(2) {
  grid-area: areaB;
  }
.container div:nth-child(3) {
  grid-area: areaC;
  }
.container div:nth-child(4) {
  grid-area: areaD;
  }

プレビューはこちら。まともですね。

A
B
C
D

値が 1コの場合の例-2(自動配置の場合)

値1コの場合で、span値だけ使うこともあります。
デフォルトの grid-auto-flow: row の自動配置を利用する場合、タテ方向だけスパンするなら値をその span値だけで指定できます。

サンプルのCSSです。

.container div:nth-child(1) {
  grid-area: span 2;
  }
.container div:nth-child(2) {
  grid-area: auto / span 2;
  }
/*1行1カラムのアイテム(CとD)は指定ごと省略*/

最初のアイテム(A)は、値が「span 2」だけです。残りの3つの値は auto になります。
これでタテ方向だけ2行分スパンします。

プレビューです。

A
B
C
D

自動配置を利用すれば、「値1つ」でタテ方向にスパンするのは自由自在です。
別のサンプルも作ってみました。

A
B
C
D
E

CSSです。

.container div:nth-child(2) {
  grid-area: span 3;
  }
.container div:nth-child(4) {
  grid-area: span 2;
  }
.container div:nth-child(5) {
  grid-area: span 2;
  }
  /*1行1カラムのアイテム(AとC)は指定ごと省略*/

次回予告

次回は、grid-auto-flowプロパティを使おう。
grid-auto-flowプロパティは、アイテムを自動配置します。
自動配置でアイテムの並びに「すき間」ができたとしても、その「すき間」を自動で埋めることも可能です。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2024/02 | 03
- - - - 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 - -
Archive
Profile

yuki★hata

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

メールフォームはこちら

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