WEBVTT

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

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

3
00:00:03.585 --> 00:00:07.171
今回のテーマは、グリッド・オート・カラムズです。

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

5
00:00:16.582 --> 00:00:19.869
その自動で生まれる列を、暗黙の列と呼びます。

6
00:00:19.869 --> 00:00:25.247
このプロパティは、その暗黙の列の幅を親からまとめて決めるためのものです。

7
00:00:25.247 --> 00:00:27.936
幅を広くするのか、狭くそろえるのか。

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

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

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

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

12
00:00:41.209 --> 00:00:45.096
スライドの例では、クラス名デモを持つ要素に、グリッド・オート・カラムズ、

13
00:00:45.096 --> 00:00:48.983
はちレムと指定しています。

14
00:00:48.983 --> 00:00:53.743
これは、自動で増える列の幅をはちレムにする、という意味です。

15
00:00:53.743 --> 00:00:58.820
大切なのは、列の中身である子ではなく、並べる側の親に書く点です。

16
00:00:58.820 --> 00:01:05.960
まずはこの一行を書いて、横に増える列の幅がどう決まるかをブラウザーで確かめてみてください。

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

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

19
00:01:11.859 --> 00:01:19.600
オートは、列の幅を内容に任せる指定で、長い文字が入れば列もそれに合わせて決まります。

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

21
00:01:21.812 --> 00:01:29.001
一方、はちレムのように長さで書くと、自動で増える列はすべてその幅でそろいます。

22
00:01:29.001 --> 00:01:36.374
横に並ぶカードの左端と右端がきれいにそろって見えるのは、こちらを選んだときです。

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

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

25
00:01:48.540 --> 00:01:51.742
続いて、範囲やパターンで決める書き方です。

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

27
00:01:56.621 --> 00:02:01.119
例えばミンマックス、ろくレム、カンマ、ワンエフアールなら、最低ろくレムを保ちながら、

28
00:02:01.119 --> 00:02:05.617
余った幅を分け合う指定になります。

29
00:02:05.617 --> 00:02:08.514
また、値を空白で並べることもできます。

30
00:02:08.514 --> 00:02:16.138
よんレム、はちレムと二つ書くと、自動で増える列はその順番を繰り返し、細い列と広い列が交互に並びます。

31
00:02:16.138 --> 00:02:18.120
エフアール単位も使えます。

32
00:02:18.120 --> 00:02:23.152
決まった幅だけでは足りない場面で、この二つの書き方が効いてきます。

33
00:02:23.152 --> 00:02:25.031
初期値と継承を確認します。

34
00:02:25.031 --> 00:02:27.055
仕様上の初期値はオートです。

35
00:02:27.055 --> 00:02:32.115
つまり何も書かなければ、自動で増える列は内容に合わせて幅が決まります。

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

37
00:02:35.729 --> 00:02:39.343
必ずしも同じとは限りません。

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

39
00:02:45.414 --> 00:02:47.438
そして通常の継承はしません。

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

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

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

43
00:03:01.460 --> 00:03:02.993
実例を見ていきます。

44
00:03:02.993 --> 00:03:05.752
まずエイチティーエムエルの用意です。

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

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

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

48
00:03:21.080 --> 00:03:25.526
グリッド・オート・カラムズを書くのは親であるデモの方で、並ぶのは子である項目の方、

49
00:03:25.526 --> 00:03:29.971
という役割分担を意識してください。

50
00:03:29.971 --> 00:03:34.569
項目を六つにしたのは、二行の枠に横方向へ流し込むことで、自動で増える列が三列分生まれ、

51
00:03:34.569 --> 00:03:39.168
幅の違いを比べやすくするためです。

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

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

54
00:03:53.011 --> 00:03:57.885
デモにはディスプレイ、グリッドを指定し、明示する列はろくレムの一列だけ、

55
00:03:57.885 --> 00:04:02.759
行はよんレムを二行とします。

56
00:04:02.759 --> 00:04:11.728
そこへグリッド・オート・フロー、カラムを加えると、項目は縦に二つ入るごとに次の列へ流れます。

57
00:04:11.728 --> 00:04:17.577
六つの項目では列が三列必要になり、二列目以降が暗黙の列です。

58
00:04:17.577 --> 00:04:24.206
その幅を決めるのが、最後のグリッド・オート・カラムズ、はちレムです。

59
00:04:24.206 --> 00:04:31.420
はみ出した分はオーバーフロー、オートで横スクロールできるようにしています。

60
00:04:31.420 --> 00:04:33.435
値を変えて比べてみましょう。

61
00:04:33.435 --> 00:04:39.191
最後のグリッド・オート・カラムズの値だけを、はちレムからよんレムへ置き換えます。

62
00:04:39.191 --> 00:04:43.580
ファイルを保存してブラウザーを再読み込みすると、自動で増える二列目以降の幅が半分になり、

63
00:04:43.580 --> 00:04:47.969
全体が横にコンパクトに収まります。

64
00:04:47.969 --> 00:04:52.862
一列目のろくレムは、テンプレートで決めた明示の列なので変わりません。

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

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

67
00:05:01.640 --> 00:05:04.100
間違えやすい点を整理します。

68
00:05:04.100 --> 00:05:08.053
一番大切なのは、このプロパティはテンプレートで定義済みの列には適用されない、

69
00:05:08.053 --> 00:05:12.006
という点です。

70
00:05:12.006 --> 00:05:18.595
グリッド・テンプレート・カラムズで明示した列はそちらの指定が優先され、グリッド・オート・カラムズが決めるのは、

71
00:05:18.595 --> 00:05:25.184
それをはみ出して自動で増えた列だけです。

72
00:05:25.184 --> 00:05:31.334
暗黙の列が一つも作られなければ、値を変えても見た目は何も変わりません。

73
00:05:31.334 --> 00:05:41.876
効いていないように見えたら、まず見ている列が明示の列か暗黙の列か、そして項目が本当に横へ増えているかを確認してください。

74
00:05:41.876 --> 00:05:46.620
列の作られ方を分けて考えることが、理解の鍵になります。

75
00:05:46.620 --> 00:05:48.645
効かないときの確認手順です。

76
00:05:48.645 --> 00:05:57.322
まず親の表示方式がグリッドになっているか、オート・フローや配置によって項目が本当に新しい列へ増えているかを見てください。

77
00:05:57.322 --> 00:06:00.793
ここが違うと、値を変えても見た目は変わりません。

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

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

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

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

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

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

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

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

86
00:06:51.090 --> 00:06:59.977
練習は、まず、はちレムとよんレムの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

87
00:06:59.977 --> 00:07:00.929
まとめます。

88
00:07:00.929 --> 00:07:07.276
グリッド・オート・カラムズは自動で増える列の幅、初期値はオートで継承はしません。

89
00:07:07.276 --> 00:07:11.720
テンプレートの列には効かない点に注意して使ってください。

90
00:07:11.720 --> 00:07:13.148
お疲れさまでした。