WEBVTT

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

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

3
00:00:03.400 --> 00:00:06.658
今回のテーマは、グリッド・オート・ロウズです。

4
00:00:06.658 --> 00:00:15.016
グリッドでカードを並べていると、最初に用意した行数では足りず、項目が増えたぶんだけ行が自動で増えていく場面があります。

5
00:00:15.016 --> 00:00:18.133
その自動で生まれる行を、暗黙の行と呼びます。

6
00:00:18.133 --> 00:00:23.374
このプロパティは、その暗黙の行の高さを親からまとめて決めるためのものです。

7
00:00:23.374 --> 00:00:28.474
内容に合わせて伸びる行にするのか、きちっとそろった固定の高さにするのか。

8
00:00:28.474 --> 00:00:31.732
その違いを比べながら、順番に見ていきましょう。

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

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

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

12
00:00:41.132 --> 00:00:45.832
スライドの例では、クラス名デモを持つ要素に、グリッド・オート・ロウズ、ミンマックス、

13
00:00:45.832 --> 00:00:50.532
ごレム、カンマ、オートと指定しています。

14
00:00:50.532 --> 00:00:57.052
これは、最低でもごレムの高さを確保し、内容が多ければそれ以上に伸びる、という意味です。

15
00:00:57.052 --> 00:01:01.904
大切なのは、行の中身である子ではなく、並べる側の親に書く点です。

16
00:01:01.904 --> 00:01:08.120
まずはこの一行を書いて、行の高さがどう決まるかをブラウザーで確かめてみてください。

17
00:01:08.120 --> 00:01:11.524
指定できる主な値を、二回に分けて整理します。

18
00:01:11.524 --> 00:01:13.072
まず基本の二つです。

19
00:01:13.072 --> 00:01:18.952
オートは、行の高さを内容に任せる指定で、長い文章が入れば行も一緒に伸びます。

20
00:01:18.952 --> 00:01:20.809
初期値もこのオートです。

21
00:01:20.809 --> 00:01:27.153
一方、スリーレムのように長さで書くと、自動で増える行はすべてその高さでそろいます。

22
00:01:27.153 --> 00:01:32.724
カードの上端と下端がきれいにそろって見えるのは、こちらを選んだときです。

23
00:01:32.724 --> 00:01:38.604
ただし、内容が固定の高さに収まらないと、はみ出しや窮屈さの原因にもなります。

24
00:01:38.604 --> 00:01:43.092
そろえたいのか、内容を優先したいのかを先に決めてください。

25
00:01:43.092 --> 00:01:45.518
続いて、範囲で決める書き方です。

26
00:01:45.518 --> 00:01:50.370
ミンマックスは、括弧の中に下限と上限をカンマで区切って書きます。

27
00:01:50.370 --> 00:01:54.387
例えばミンマックス、ごレム、カンマ、オートなら、最低ごレムを保ちながら、

28
00:01:54.387 --> 00:01:58.405
必要に応じて内容ぶんだけ伸びます。

29
00:01:58.405 --> 00:02:05.228
短いカード同士では高さがそろい、長いカードではあふれを防げる、両方の良さを狙った指定です。

30
00:02:05.228 --> 00:02:12.657
また、ワンエフアールのようにエフアール単位を使えば、余った縦の空間を比率で分け合うこともできます。

31
00:02:12.657 --> 00:02:19.480
固定か自動か、の二択で迷ったら、まずミンマックスを候補にすると実務では扱いやすくなります。

32
00:02:19.480 --> 00:02:21.477
初期値と継承を確認します。

33
00:02:21.477 --> 00:02:23.627
仕様上の初期値はオートです。

34
00:02:23.627 --> 00:02:29.155
つまり何も書かなければ、自動で増える行は内容に合わせて高さが決まります。

35
00:02:29.155 --> 00:02:32.995
ただし仕様上の初期値と、ブラウザーの既定スタイルで実際に見えている値が、

36
00:02:32.995 --> 00:02:36.834
必ずしも同じとは限りません。

37
00:02:36.834 --> 00:02:43.285
要素に既定のスタイルや別のクラスが付いていれば、その結果が優先されることもあります。

38
00:02:43.285 --> 00:02:45.435
そして通常の継承はしません。

39
00:02:45.435 --> 00:02:49.889
親に書いたからといって、その指定が子へ自動で引き継がれるわけではないので、

40
00:02:49.889 --> 00:02:54.342
並べる親そのものへ直接書く必要があります。

41
00:02:54.342 --> 00:03:00.332
汎用値では、インヘリットは親の計算値、イニシャルは仕様の初期値に戻す指定です。

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

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

44
00:03:04.442 --> 00:03:11.341
ステージという土台の箱の中にデモの箱を置き、その中に項目と書かれた小さなカードを六つ入れます。

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

46
00:03:16.478 --> 00:03:19.121
親と子の構造そのものが例の一部です。

47
00:03:19.121 --> 00:03:23.304
グリッド・オート・ロウズを書くのは親であるデモの方で、並ぶのは子である項目の方、

48
00:03:23.304 --> 00:03:27.487
という役割分担を意識してください。

49
00:03:27.487 --> 00:03:34.680
項目を六つにしたのは、三列で二行の並びになり、自動で増える二行目の高さまで比べやすくするためです。

50
00:03:34.680 --> 00:03:39.725
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

51
00:03:39.725 --> 00:03:46.234
ステージとデモ、項目には、余白や枠線、背景色といった土台の見た目を先に整えます。

52
00:03:46.234 --> 00:03:52.906
デモにはディスプレイ、グリッドを指定して三列の並びにし、ギャップで間隔を空けます。

53
00:03:52.906 --> 00:03:57.951
列はリピートで三列、最小ゼロ、最大ワンエフアールとしています。

54
00:03:57.951 --> 00:04:02.833
そして最後に、今回変更するプロパティとして、グリッド・オート・ロウズ、ミンマックス、

55
00:04:02.833 --> 00:04:07.715
ごレム、カンマ、オートを追加します。

56
00:04:07.715 --> 00:04:12.271
ここでテンプレートで決めたのは列だけなので、行は項目の数に合わせて自動で増え、

57
00:04:12.271 --> 00:04:16.828
その高さが主役の一行で決まります。

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

59
00:04:18.820 --> 00:04:24.794
最後のグリッド・オート・ロウズの値だけを、ミンマックスからスリーレムへ置き換えます。

60
00:04:24.794 --> 00:04:29.204
ファイルを保存してブラウザーを再読み込みすると、今度は自動で増える行がすべてスリーレムに固定され、

61
00:04:29.204 --> 00:04:33.614
高さがきちっとそろいます。

62
00:04:33.614 --> 00:04:37.597
比較のコツは、変えるのはこの値ひとつだけにすることです。

63
00:04:37.597 --> 00:04:42.291
ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。

64
00:04:42.291 --> 00:04:49.688
内容が多い項目を入れて試すと、伸びる指定と固定の指定で、窮屈さやそろい方がどう変わるかがよく分かります。

65
00:04:49.688 --> 00:04:51.938
間違えやすい点を整理します。

66
00:04:51.938 --> 00:04:55.554
一番大切なのは、このプロパティはテンプレートで定義済みの行には適用されない、

67
00:04:55.554 --> 00:04:59.170
という点です。

68
00:04:59.170 --> 00:05:05.036
グリッド・テンプレート・ロウズで明示した行はそちらの指定が優先され、グリッド・オート・ロウズが決めるのは、

69
00:05:05.036 --> 00:05:10.902
それをはみ出して自動で増えた行だけです。

70
00:05:10.902 --> 00:05:17.652
効いていないように見えたら、まず見ている行が明示の行か暗黙の行かを確認してください。

71
00:05:17.652 --> 00:05:26.009
また、長い内容を扱うページでは、固定長だけに頼らず、オートやミンマックスで伸びる余地を残す方が安全です。

72
00:05:26.009 --> 00:05:30.348
行の作られ方を分けて考えることが、理解の鍵になります。

73
00:05:30.348 --> 00:05:32.501
効かないときの確認手順です。

74
00:05:32.501 --> 00:05:39.576
まず親の表示方式がグリッドになっているか、項目が本当に新しい行へ増えているかを見てください。

75
00:05:39.576 --> 00:05:43.268
ここが違うと、値を変えても見た目は変わりません。

76
00:05:43.268 --> 00:05:53.727
次に開発者ツールで、ネットワークからスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認します。

77
00:05:53.727 --> 00:06:00.802
スタイルズで宣言が無効扱いになっていたり、別の宣言に上書きされたりしていないかも見ましょう。

78
00:06:00.802 --> 00:06:09.722
コンピューテッドで最終的な値を確認し、グリッド表示で明示トラックと暗黙トラックを見分けると原因を絞りやすくなります。

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

80
00:06:16.336 --> 00:06:18.546
最後に互換性とまとめです。

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

82
00:06:24.497 --> 00:06:30.448
ファイアフォックスは七十以降、サファリは十点一以降で対応しています。

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

84
00:06:36.909 --> 00:06:42.944
練習は、まずミンマックス、ごレム、カンマ、オートと、スリーレムの違いを自分の言葉で説明し、

85
00:06:42.944 --> 00:06:48.980
次に文章量や親の幅だけを変えて結果を比べることです。

86
00:06:48.980 --> 00:06:50.000
まとめます。

87
00:06:50.000 --> 00:06:56.801
グリッド・オート・ロウズは自動で増える行の高さ、初期値はオートで継承はしません。

88
00:06:56.801 --> 00:07:01.562
テンプレートの行には効かない点に注意して使ってください。

89
00:07:01.562 --> 00:07:03.092
お疲れさまでした。