WEBVTT

1
00:00:00.000 --> 00:00:00.925
こんにちは。

2
00:00:00.925 --> 00:00:03.701
シーエスエス、リファレンス解説です。

3
00:00:03.701 --> 00:00:06.632
今回のテーマは、グリッド・エリアです。

4
00:00:06.632 --> 00:00:12.569
グリッドで並べた項目は、通常は一つのマスに入りますが、このプロパティを使うと、

5
00:00:12.569 --> 00:00:18.507
どの行からどの行まで、どの列からどの列までを使うのかをまとめて指定できます。

6
00:00:18.507 --> 00:00:21.437
名前を付けた領域へ置くこともできます。

7
00:00:21.437 --> 00:00:25.293
大きなカードを目立たせたいときや、見出しを横いっぱいに広げたいときに役立つ、

8
00:00:25.293 --> 00:00:29.148
配置の要となる指定です。

9
00:00:29.148 --> 00:00:31.924
まずは全体像をつかんでいきましょう。

10
00:00:31.924 --> 00:00:41.332
ダッシュボードのように重要な情報を広く見せたい場面を思い浮かべると、このプロパティの使いどころがイメージしやすくなります。

11
00:00:41.332 --> 00:00:43.048
まず基本の書き方です。

12
00:00:43.048 --> 00:00:50.381
対象のセレクターに、プロパティ名、コロン、値、セミコロンを書く形はほかのプロパティと同じです。

13
00:00:50.381 --> 00:00:55.452
スライドの例では、クラス名デモを持つ要素に、グリッド・エリア、一、スラッシュ、

14
00:00:55.452 --> 00:01:00.522
一、スラッシュ、三、スラッシュ、三と指定しています。

15
00:01:00.522 --> 00:01:04.267
数字が四つ並び、スラッシュで区切るのが特徴です。

16
00:01:04.267 --> 00:01:08.947
この一行で、対象が縦にも横にも広い領域を使うようになります。

17
00:01:08.947 --> 00:01:13.628
大切なのは、並べる親ではなく、配置される子の方へ書く点です。

18
00:01:13.628 --> 00:01:16.280
まずはこの基本形を覚えてください。

19
00:01:16.280 --> 00:01:19.146
指定できる値を二回に分けて整理します。

20
00:01:19.146 --> 00:01:21.257
まず名前で指定する方法です。

21
00:01:21.257 --> 00:01:26.687
親のグリッド・テンプレート・エリアズで、ヘッダーやメインといった名前付きの領域を作っておき、

22
00:01:26.687 --> 00:01:32.116
子ではグリッド・エリアにその名前を一つだけ書きます。

23
00:01:32.116 --> 00:01:35.887
すると子は、その名前の領域全体へすっぽり入ります。

24
00:01:35.887 --> 00:01:41.015
レイアウトの地図に名前を書き、子に行き先の名前を伝えるイメージです。

25
00:01:41.015 --> 00:01:46.897
ただし親で定義した名前と一文字でも違うと対応が取れず、思った場所へ置けません。

26
00:01:46.897 --> 00:01:49.612
名前は親と子で必ずそろえてください。

27
00:01:49.612 --> 00:01:58.812
地図でいう住所のような役割で、座標を数字で数えるより、名前で呼ぶ方がレイアウト全体を読み返したときに分かりやすくなります。

28
00:01:58.812 --> 00:02:02.744
続いて、四つの値で位置を決める方法です。

29
00:02:02.744 --> 00:02:07.855
順番は、行の開始、列の開始、行の終了、列の終了です。

30
00:02:07.855 --> 00:02:14.736
インセットなどの上、右、下、左という順番とは違うので注意してください。

31
00:02:14.736 --> 00:02:20.339
例の、一、一、三、三では、一行目から始まり、三本目の線で終わるため、縦に二行分、

32
00:02:20.339 --> 00:02:25.942
横に二列分の大きな領域になります。

33
00:02:25.942 --> 00:02:31.643
ここでいう数字はマスの番号ではなく、区切りの線の番号です。

34
00:02:31.643 --> 00:02:41.080
終了の数字は、その線の手前までを使うという意味だと理解すると、大きさの計算で迷いにくくなります。

35
00:02:41.080 --> 00:02:43.023
初期値と継承を確認します。

36
00:02:43.023 --> 00:02:49.227
このプロパティは、グリッド・ロー・スタート、グリッド・カラム・スタート、

37
00:02:49.227 --> 00:02:55.430
グリッド・ロー・エンド、グリッド・カラム・エンドという四つの個別プロパティをまとめたものです。

38
00:02:55.430 --> 00:03:00.214
そのため初期値は、それぞれの個別プロパティの初期値を参照します。

39
00:03:00.214 --> 00:03:02.307
そして通常の継承はしません。

40
00:03:02.307 --> 00:03:08.585
親に書いても子へ伝わるものではなく、配置したい項目そのものへ直接書く必要があります。

41
00:03:08.585 --> 00:03:15.611
仕様上の初期値とブラウザーの既定の見え方が同じとは限らない点も、あわせて押さえておきましょう。

42
00:03:15.611 --> 00:03:21.889
汎用値のインヘリットやイニシャル、リバートなどの考え方はほかのプロパティと共通です。

43
00:03:21.889 --> 00:03:30.260
なお、書かなかった場合は自動配置に任せる扱いになるため、ほかの項目と並ぶ順番や空きマスの埋まり方にも影響します。

44
00:03:30.260 --> 00:03:31.745
実例を見ていきます。

45
00:03:31.745 --> 00:03:34.419
まずエイチティーエムエルの用意です。

46
00:03:34.419 --> 00:03:38.133
ステージという土台の箱の中に、項目を三つ入れます。

47
00:03:38.133 --> 00:03:43.035
二番目が今回の対象で、アイテムとデモ、二つのクラスを持っています。

48
00:03:43.035 --> 00:03:48.234
頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。

49
00:03:48.234 --> 00:03:50.908
親と子の構造そのものが例の一部です。

50
00:03:50.908 --> 00:03:54.845
グリッドの枠を作るのは親のステージ、グリッド・エリアを書くのは子のデモ、

51
00:03:54.845 --> 00:03:58.781
という役割分担を意識してください。

52
00:03:58.781 --> 00:04:04.872
三つだけのシンプルな構成なので、対象だけが大きく広がる変化をはっきり観察できます。

53
00:04:04.872 --> 00:04:10.273
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

54
00:04:10.273 --> 00:04:16.719
ステージと項目には、余白や枠線、背景色といった土台の見た目を先に整えます。

55
00:04:16.719 --> 00:04:21.597
ステージにはディスプレイ、グリッドを指定し、列は等幅の三列、行は最小よんレムで自動、

56
00:04:21.597 --> 00:04:26.475
隙間はれい点ごレムとします。

57
00:04:26.475 --> 00:04:32.398
そこに対象のデモへグリッド・エリア、一、一、三、三を加えると、対象は左上の位置から縦に二行分、

58
00:04:32.398 --> 00:04:38.322
横に二列分を占める大きなカードになります。

59
00:04:38.322 --> 00:04:43.200
ほかの項目は、残りの空いたマスへ回り込むように並びます。

60
00:04:43.200 --> 00:04:46.684
主役は最後のグリッド・エリアの一行です。

61
00:04:46.684 --> 00:04:48.742
値を変えて比べてみましょう。

62
00:04:48.742 --> 00:04:54.914
最後のグリッド・エリアの値だけを、一、一、三、三から、一、一、二、二へ置き換えます。

63
00:04:54.914 --> 00:05:02.263
ファイルを保存してブラウザーを再読み込みすると、対象は左上の一マスだけを使う通常の大きさに戻ります。

64
00:05:02.263 --> 00:05:09.465
開始は同じ左上なのに、終了の数字を一つ小さくしただけで、面積が四分の一になる点に注目してください。

65
00:05:09.465 --> 00:05:13.580
比較のコツは、変えるのはこの値ひとつだけにすることです。

66
00:05:13.580 --> 00:05:20.634
終了の数字が大きさに直結する、という感覚をつかむことが、このプロパティを理解する近道になります。

67
00:05:20.634 --> 00:05:28.424
逆に終了を四、四まで広げるとどうなるかも予想してから試すと、線の番号とマスの数の関係がよりはっきりします。

68
00:05:28.424 --> 00:05:31.161
間違えやすい点を整理します。

69
00:05:31.161 --> 00:05:34.876
一番多い勘違いは、四つの値の順序です。

70
00:05:34.876 --> 00:05:43.675
余白の指定のような上、右、下、左の順だと思って書くと、意図と違う場所へ広がってしまいます。

71
00:05:43.675 --> 00:05:51.105
行の開始、列の開始、行の終了、列の終了、と声に出して確認する習慣が有効です。

72
00:05:51.105 --> 00:05:56.970
次に名前で指定する場合、親のグリッド・テンプレート・エリアズで定義した名前と、

73
00:05:56.970 --> 00:06:02.836
子の名前が対応していないと配置できません。

74
00:06:02.836 --> 00:06:08.506
つづりの違いや、親側の定義漏れがないかを見直してください。

75
00:06:08.506 --> 00:06:15.154
また親がグリッド表示でない場合、この指定自体が働く土台がありません。

76
00:06:15.154 --> 00:06:21.215
特に二番目と四番目の値である列の開始と列の終了を取り違えると、横幅だけが予想外に変わるので、

77
00:06:21.215 --> 00:06:27.276
書き換えた直後の確認が大切です。

78
00:06:27.276 --> 00:06:29.436
効かないときの確認手順です。

79
00:06:29.436 --> 00:06:36.378
まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。

80
00:06:36.378 --> 00:06:43.165
次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見てください。

81
00:06:43.165 --> 00:06:50.107
スタイルズで宣言が無効扱いになっていたり、別の宣言に上書きされたりしていないかも重要です。

82
00:06:50.107 --> 00:06:54.504
コンピューテッドで最終的な値を確認し、親の表示方式がグリッドになっているか、

83
00:06:54.504 --> 00:06:58.900
行と列の枠が想定通りかも調べましょう。

84
00:06:58.900 --> 00:07:06.151
開発者ツールのグリッド表示で、明示トラックと暗黙トラックを見分けると原因を追いやすくなります。

85
00:07:06.151 --> 00:07:12.784
三百二十ピクセル程度の画面幅や文字の拡大でも、内容を利用できるかまで確かめてください。

86
00:07:12.784 --> 00:07:14.914
最後に互換性とまとめです。

87
00:07:14.914 --> 00:07:20.732
二千二十六年九月確認の記録では、クロームは五十七以降、エッジは十六以降、

88
00:07:20.732 --> 00:07:26.549
ファイアフォックスは五十二以降、サファリは十点一以降で対応しています。

89
00:07:26.549 --> 00:07:32.777
アンドロイド版クロームは五十七以降、アイオーエス版サファリは十点三以降です。

90
00:07:32.777 --> 00:07:41.462
練習は、まず三、三と二、二の違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

91
00:07:41.462 --> 00:07:42.445
まとめます。

92
00:07:42.445 --> 00:07:46.624
グリッド・エリアは名前か四つの値で領域を指定し、順序は行開始、列開始、行終了、

93
00:07:46.624 --> 00:07:50.803
列終了、継承はしません。

94
00:07:50.803 --> 00:07:59.980
関連するグリッド・ロー、グリッド・カラム、グリッド・テンプレート・エリアズもあわせて確認すると理解が深まります。

95
00:07:59.980 --> 00:08:08.337
値の意味を一つずつ言葉にできるようになれば、大きなレイアウトでも迷わず配置を指定できるようになります。

96
00:08:08.337 --> 00:08:09.812
お疲れさまでした。