WEBVTT

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

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

3
00:00:03.874 --> 00:00:08.233
今回のテーマは、グリッド・テンプレート・エリアズです。

4
00:00:08.233 --> 00:00:17.596
グリッドで作った行と列の上に、ヘッドやメインといった名前を付けて、レイアウト全体の配置図を文字で描くプロパティです。

5
00:00:17.596 --> 00:00:24.860
線の番号で位置を指定する方法と違い、見た目の形そのものをコードに表せるのが大きな特徴です。

6
00:00:24.860 --> 00:00:29.945
たとえば一番上は見出しが横いっぱい、その下は左に補足、右に本文、といったよくあるページ構成を、

7
00:00:29.945 --> 00:00:35.030
そのまま読み取れる形で書けます。

8
00:00:35.030 --> 00:00:37.936
まずは全体像をつかんでいきましょう。

9
00:00:37.936 --> 00:00:42.940
番号で指定する方法に慣れた方ほど、この見やすさに驚くはずです。

10
00:00:42.940 --> 00:00:44.722
まず基本の書き方です。

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

12
00:00:52.334 --> 00:00:57.437
スライドの例では、クラス名デモを持つ要素に、グリッド・テンプレート・エリアズと指定し、

13
00:00:57.437 --> 00:01:02.539
引用符で囲んだ文字列を二つ並べています。

14
00:01:02.539 --> 00:01:07.884
引用符一つが一行分を表し、中の単語がその行の各列に入る領域名です。

15
00:01:07.884 --> 00:01:15.011
この例では、一行目はヘッドが二列分、二行目は左がサイド、右がメインという配置になります。

16
00:01:15.011 --> 00:01:18.088
大切なのは、並べる親の方へ書く点です。

17
00:01:18.088 --> 00:01:20.842
まずはこの基本形を覚えてください。

18
00:01:20.842 --> 00:01:26.511
引用符は半角で書き、文字列同士は空白で区切る点も確認しておきましょう。

19
00:01:26.511 --> 00:01:29.421
指定できる値の読み方を整理します。

20
00:01:29.421 --> 00:01:34.899
引用符の中では、空白で区切った単語が左から右へ列の順に並びます。

21
00:01:34.899 --> 00:01:40.548
同じ名前を横に並べると、その領域は複数の列にまたがって広がります。

22
00:01:40.548 --> 00:01:44.998
また、ドットを書くと、そのマスは空き領域になります。

23
00:01:44.998 --> 00:01:49.449
何も置きたくない場所や、形を整えたいときに使います。

24
00:01:49.449 --> 00:01:56.125
文字列の数が行の数、単語の数が列の数に対応する、と覚えると読みやすくなります。

25
00:01:56.125 --> 00:02:02.630
コードを見ただけで完成形のレイアウトが頭に浮かぶのが、この書き方の強みです。

26
00:02:02.630 --> 00:02:08.450
名前は自分で決められますが、役割が伝わる言葉を選ぶのがおすすめです。

27
00:02:08.450 --> 00:02:15.811
行ごとに引用符を分けることで、改行した見た目と実際の行が対応し、読み間違いを防げます。

28
00:02:15.811 --> 00:02:18.055
次に、子要素との連携です。

29
00:02:18.055 --> 00:02:22.542
親に配置図を描いただけでは項目は自動では入りません。

30
00:02:22.542 --> 00:02:29.101
各子要素にグリッド・エリアというプロパティで、地図に書いた名前を指定します。

31
00:02:29.101 --> 00:02:34.020
たとえば見出しの要素にはヘッド、補足にはサイド、本文にはメインと書くと、

32
00:02:34.020 --> 00:02:38.939
それぞれ名前が一致する領域へ配置されます。

33
00:02:38.939 --> 00:02:44.462
親の地図と子の名前はセットで初めて意味を持つ、と考えてください。

34
00:02:44.462 --> 00:02:47.568
片方だけ書いても配置は完成しません。

35
00:02:47.568 --> 00:02:55.680
この二段構えを理解しておくと、後で出てくる効かない原因の多くも自然に説明できるようになります。

36
00:02:55.680 --> 00:03:03.620
名前は半角の英数字とハイフンなどで書き、親と子でまったく同じつづりにそろえることが大切です。

37
00:03:03.620 --> 00:03:05.572
初期値と継承を確認します。

38
00:03:05.572 --> 00:03:10.076
初期値はノーンで、名前付きの領域は定義されていない状態です。

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

40
00:03:12.178 --> 00:03:16.832
親要素に書いた配置図が、子要素へ自動で伝わることはありません。

41
00:03:16.832 --> 00:03:24.189
あくまでグリッドの親に書くことで、その直下の子がグリッド・エリアで参照できるようになる仕組みです。

42
00:03:24.189 --> 00:03:28.318
仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点も、

43
00:03:28.318 --> 00:03:32.447
あわせて押さえておきましょう。

44
00:03:32.447 --> 00:03:38.603
インヘリットやイニシャルなどの共通キーワードの意味も、ほかのプロパティと同様です。

45
00:03:38.603 --> 00:03:45.960
共通キーワードを使う場面は多くありませんが、初期値がノーンであることはしっかり覚えておきましょう。

46
00:03:45.960 --> 00:03:47.488
実例を見ていきます。

47
00:03:47.488 --> 00:03:50.237
まずエイチティーエムエルの用意です。

48
00:03:50.237 --> 00:03:57.112
ステージという土台の箱の中にデモがあり、その中に見出し、補足、本文の三つの項目を入れます。

49
00:03:57.112 --> 00:04:04.903
それぞれアイテムという共通クラスに加えて、ヘディング、サイド、メインという個別のクラスを持っています。

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

51
00:04:10.250 --> 00:04:13.000
親と子の構造そのものが例の一部です。

52
00:04:13.000 --> 00:04:19.111
グリッドの親はデモ、配置される子は三つの項目、という役割分担を意識してください。

53
00:04:19.111 --> 00:04:24.458
項目が三つだけなので、配置図を変えたときの変化をはっきり観察できます。

54
00:04:24.458 --> 00:04:31.180
個別クラスがあるおかげで、シーエスエス側から三つの項目を区別して名前を割り当てられます。

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

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

57
00:04:42.235 --> 00:04:49.713
デモにはディスプレイ、グリッドを指定し、列は一対二の比率の二列、隙間はれい点ごレムとします。

58
00:04:49.713 --> 00:04:55.159
子にはそれぞれグリッド・エリアで名前を指定し、最後にデモへグリッド・テンプレート・エリアズ、

59
00:04:55.159 --> 00:05:00.605
ヘッド、ヘッド、サイド、メインを加えます。

60
00:05:00.605 --> 00:05:06.621
すると見出しが上段を横いっぱいに使い、下段は左に補足、右に本文が並びます。

61
00:05:06.621 --> 00:05:08.734
主役は最後のこの一行です。

62
00:05:08.734 --> 00:05:14.912
土台の指定は共通なので、最後の配置図だけに注目して変化を追うことができます。

63
00:05:14.912 --> 00:05:16.792
値を変えて比べてみましょう。

64
00:05:16.792 --> 00:05:20.014
最後のグリッド・テンプレート・エリアズの値だけを、ヘッド、サイド、メイン、

65
00:05:20.014 --> 00:05:23.236
メインへ置き換えます。

66
00:05:23.236 --> 00:05:27.533
ファイルを保存してブラウザーを再読み込みすると、今度は上段が左に見出し、

67
00:05:27.533 --> 00:05:31.829
右に補足、下段は本文が横いっぱいという配置に変わります。

68
00:05:31.829 --> 00:05:40.691
エイチティーエムエルも、子のグリッド・エリアも一切変えていないのに、地図の描き替えだけで全体の並びが入れ替わる点に注目してください。

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

70
00:05:44.450 --> 00:05:47.404
レイアウト変更に強い書き方だと実感できます。

71
00:05:47.404 --> 00:05:53.580
このように配置図だけを差し替える方法は、画面幅ごとに別の地図を用意するときにも応用できます。

72
00:05:53.580 --> 00:05:55.438
間違えやすい点を整理します。

73
00:05:55.438 --> 00:06:00.347
最も重要なルールは、同じ名前の領域は長方形を作らなければならないことです。

74
00:06:00.347 --> 00:06:03.001
エル字型や飛び地のような形は作れません。

75
00:06:03.001 --> 00:06:05.788
もう一つは、各行の列数をそろえることです。

76
00:06:05.788 --> 00:06:13.351
一行目が二列、二行目が三列のように数が違う定義は不正となり、グリッド・テンプレート・エリアズ全体が無効になります。

77
00:06:13.351 --> 00:06:17.200
一部だけ効く、ではなく丸ごと効かなくなる点が落とし穴です。

78
00:06:17.200 --> 00:06:22.773
また、子のグリッド・エリアの名前と、親の地図の名前が一文字でも違うと配置されません。

79
00:06:22.773 --> 00:06:25.294
つづりの一致もあわせて確認しましょう。

80
00:06:25.294 --> 00:06:31.000
定義が無効になった場合は、ほかの行まで含めて全体を見直すことが解決への近道になります。

81
00:06:31.000 --> 00:06:33.277
効かないときの確認手順です。

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

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

84
00:06:47.754 --> 00:06:52.146
スタイルズで宣言が無効扱いになっていないかも重要です。

85
00:06:52.146 --> 00:06:58.978
特にこのプロパティは、長方形でない形や列数の不一致があると宣言自体が無効になります。

86
00:06:58.978 --> 00:07:06.298
コンピューテッドで最終的な値を確認し、親の表示方式がグリッドになっているかも調べましょう。

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

88
00:07:13.292 --> 00:07:20.612
順番に切り分けて調べることで、地図の形の問題か、名前の対応の問題かを特定しやすくなります。

89
00:07:20.612 --> 00:07:22.498
最後に互換性とまとめです。

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

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

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

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

94
00:07:45.716 --> 00:07:46.587
まとめます。

95
00:07:46.587 --> 00:07:49.997
グリッド・テンプレート・エリアズは親に名前の地図を描く指定で、初期値はノーン、

96
00:07:49.997 --> 00:07:53.407
継承はしません。

97
00:07:53.407 --> 00:07:58.050
関連するグリッド・テンプレート・カラムズ、グリッド・テンプレート・ロウズ、

98
00:07:58.050 --> 00:08:02.694
グリッド・エリアもあわせて確認すると理解が深まります。

99
00:08:02.694 --> 00:08:04.000
お疲れさまでした。