WEBVTT

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

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

3
00:00:03.725 --> 00:00:07.761
今回のテーマは、グリッド・テンプレート・ロウズです。

4
00:00:07.761 --> 00:00:13.193
これはグリッドレイアウトで、行の高さをあらかじめ決めるプロパティです。

5
00:00:13.193 --> 00:00:19.712
列の幅を決めるのがカラムズ側だとすれば、こちらはその縦方向の担当だと考えてください。

6
00:00:19.712 --> 00:00:26.697
たとえば一行目を低く、二行目を高く、といったように、行ごとに違う高さを並べて指定できます。

7
00:00:26.697 --> 00:00:32.906
カードを何段かに並べる画面や、見出し行と本文行で高さを分けたい場面で役立ちます。

8
00:00:32.906 --> 00:00:39.580
まずは全体像をつかみ、行を先に決めると配置がどう安定するのかを一緒に見ていきましょう。

9
00:00:39.580 --> 00:00:41.520
まず基本の書き方です。

10
00:00:41.520 --> 00:00:45.929
書き方はほかのプロパティと同じで、セレクターのあとにプロパティ名、コロン、

11
00:00:45.929 --> 00:00:50.338
値、セミコロンを書きます。

12
00:00:50.338 --> 00:00:55.188
スライドの例では、クラス名デモを持つ要素に、グリッド・テンプレート・ロウズ、

13
00:00:55.188 --> 00:01:00.038
ごレム、はちレムと指定しています。

14
00:01:00.038 --> 00:01:04.976
値が二つ並んでいるので、明示的に作られる行は二行分です。

15
00:01:04.976 --> 00:01:10.267
一つ目の値が一行目の高さ、二つ目が二行目の高さに対応します。

16
00:01:10.267 --> 00:01:14.147
大切なのは、これをグリッドの親に書く点です。

17
00:01:14.147 --> 00:01:18.027
子要素ひとつひとつに書くものではありません。

18
00:01:18.027 --> 00:01:24.200
まずはこの基本形と、値の並びが行の順番と対応する関係を覚えてください。

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

20
00:01:27.162 --> 00:01:31.343
基本は、行のサイズを空白区切りで並べることです。

21
00:01:31.343 --> 00:01:40.403
レムやピクセルなどの長さで固定するほか、エフアールという単位で残りの高さを割合で分け合うこともできます。

22
00:01:40.403 --> 00:01:48.069
また、ミンマックスを使うと、最小の高さを確保しながら内容に合わせて伸びる余地を残せます。

23
00:01:48.069 --> 00:01:50.683
オートは内容に応じた高さです。

24
00:01:50.683 --> 00:01:55.561
そしてリピートは、同じサイズの行をくり返す省略記法です。

25
00:01:55.561 --> 00:02:02.007
たとえばリピート、に、ごレムと書けば、ごレムの行を二行作る意味になります。

26
00:02:02.007 --> 00:02:08.628
固定したいのか、伸ばしたいのか、目的に合わせて値の種類を選ぶことが大切です。

27
00:02:08.628 --> 00:02:12.511
ここで、明示トラックという言葉を押さえておきましょう。

28
00:02:12.511 --> 00:02:17.977
グリッド・テンプレート・ロウズで先に宣言した行は、明示トラックと呼ばれます。

29
00:02:17.977 --> 00:02:24.161
一方、項目の数が多くて行が足りなくなったときに自動で追加される行は、暗黙トラックです。

30
00:02:24.161 --> 00:02:31.928
自動で増えた行の高さは、このプロパティではなく、別のプロパティであるグリッド・オート・ロウズ側で決まります。

31
00:02:31.928 --> 00:02:35.308
つまり、最初から用意する行の設計図が今回の主役で、はみ出した分の扱いは別担当、

32
00:02:35.308 --> 00:02:38.688
という分担です。

33
00:02:38.688 --> 00:02:45.160
この区別ができると、行の一部だけ思った高さにならないときに、原因を切り分けやすくなります。

34
00:02:45.160 --> 00:02:47.100
初期値と継承を確認します。

35
00:02:47.100 --> 00:02:52.026
初期値はノーンで、行トラックはあらかじめ定義されていない状態です。

36
00:02:52.026 --> 00:02:54.116
そして通常の継承はしません。

37
00:02:54.116 --> 00:02:59.340
親要素に書いた行の定義が、子要素へ自動で受け継がれることはありません。

38
00:02:59.340 --> 00:03:04.862
あくまでグリッドの親に書くことで、その親の中の行の高さが決まる仕組みです。

39
00:03:04.862 --> 00:03:12.773
また、仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点も押さえておきましょう。

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

41
00:03:18.893 --> 00:03:25.460
普段は意識する場面は少ないものの、初期値がノーンであることはしっかり覚えておきましょう。

42
00:03:25.460 --> 00:03:27.005
実例を見ていきます。

43
00:03:27.005 --> 00:03:29.787
まずエイチティーエムエルの用意です。

44
00:03:29.787 --> 00:03:35.351
ステージという土台の箱の中にデモがあり、その中に項目が六つ入っています。

45
00:03:35.351 --> 00:03:39.369
項目はすべてアイテムという共通クラスを持っています。

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

47
00:03:44.778 --> 00:03:47.560
親と子の構造そのものが例の一部です。

48
00:03:47.560 --> 00:03:53.742
グリッドの親はデモ、配置される子は六つの項目、という役割分担を意識してください。

49
00:03:53.742 --> 00:04:00.542
後のシーエスエスでは列を三列にしますので、六つの項目は三つずつ二行に並ぶことになります。

50
00:04:00.542 --> 00:04:04.560
その二行の高さをどう決めるかが、今回の見どころです。

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

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

53
00:04:15.667 --> 00:04:22.854
デモにはディスプレイ、グリッドを指定し、列はリピートで三列、隙間はれい点ごレムとします。

54
00:04:22.854 --> 00:04:29.224
そして最後に主役のグリッド・テンプレート・ロウズ、ごレム、はちレムを加えます。

55
00:04:29.224 --> 00:04:36.248
すると一行目はごレム、二行目ははちレムの高さになり、下の行の方がゆったりと広がります。

56
00:04:36.248 --> 00:04:42.292
土台の指定は共通なので、最後の一行だけに注目して変化を追うことができます。

57
00:04:42.292 --> 00:04:48.172
行の高さの違いが、見た目の段差としてそのまま表れる点を確認してください。

58
00:04:48.172 --> 00:04:50.216
値を変えて比べてみましょう。

59
00:04:50.216 --> 00:04:56.347
最後のグリッド・テンプレート・ロウズの値だけを、リピート、に、ごレムへ置き換えます。

60
00:04:56.347 --> 00:05:00.215
ファイルを保存してブラウザーを再読み込みすると、今度は二行ともごレムでそろい、

61
00:05:00.215 --> 00:05:04.084
上下の高さが均等になります。

62
00:05:04.084 --> 00:05:11.674
元の指定は一行目が低く二行目が高い非対称な並びでしたが、リピートを使うと規則正しい並びへ切り替わります。

63
00:05:11.674 --> 00:05:19.265
エイチティーエムエルも列の指定も変えていないのに、行の高さの設計だけで印象が変わる点に注目してください。

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

65
00:05:23.353 --> 00:05:27.440
違いの原因をひとつに絞ることで、学びがはっきり残ります。

66
00:05:27.440 --> 00:05:29.632
間違えやすい点を整理します。

67
00:05:29.632 --> 00:05:34.017
いちばん注意したいのは、行の高さを固定しすぎることです。

68
00:05:34.017 --> 00:05:40.438
文章量が増えたとき、固定した高さに内容が収まらず、はみ出してしまうことがあります。

69
00:05:40.438 --> 00:05:48.111
文字が長くなりそうな行では、ミンマックスやオートを使い、内容に応じて伸びる余地を残すのが安全です。

70
00:05:48.111 --> 00:05:50.930
もう一つは、書く場所の取り違えです。

71
00:05:50.930 --> 00:05:55.628
これは子ではなく、グリッドの親でトラックを定義する指定です。

72
00:05:55.628 --> 00:06:04.241
開発者ツールのグリッド表示で、明示トラックと暗黙トラックを見分けると、どの行が対象なのかを追いやすくなります。

73
00:06:04.241 --> 00:06:09.252
固定は便利ですが、内容の増減まで想像して値を選ぶことが大切です。

74
00:06:09.252 --> 00:06:11.287
効かないときの確認手順です。

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

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

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

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

79
00:06:34.831 --> 00:06:39.191
親に十分な高さの余地があるかも調べましょう。

80
00:06:39.191 --> 00:06:46.021
最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容を利用できるかまで確かめてください。

81
00:06:46.021 --> 00:06:51.544
順番に切り分ければ、行そのものの問題か、土台の問題かを特定しやすくなります。

82
00:06:51.544 --> 00:06:53.213
最後に互換性とまとめです。

83
00:06:53.213 --> 00:06:57.769
二千二十六年九月確認の記録では、クロームは五十七以降、エッジは十六以降、

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

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

86
00:07:07.203 --> 00:07:11.438
練習は、まずごレム、はちレムと、リピート、に、ごレムの違いを自分の言葉で説明し、

87
00:07:11.438 --> 00:07:15.674
次に文章量や親の幅だけを変えて結果を比べることです。

88
00:07:15.674 --> 00:07:16.444
まとめます。

89
00:07:16.444 --> 00:07:19.589
グリッド・テンプレート・ロウズは親に行の高さの設計図を書く指定で、初期値はノーン、

90
00:07:19.589 --> 00:07:22.733
継承はしません。

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

92
00:07:29.921 --> 00:07:31.076
お疲れさまでした。