WEBVTT

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

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

3
00:00:03.212 --> 00:00:05.755
今回のテーマは、グリッド・カラムです。

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

5
00:00:10.707 --> 00:00:15.658
その項目が何列目の位置から始まり、どこまで横に広がるのかを指定できます。

6
00:00:15.658 --> 00:00:20.209
たとえば見出しや目立つカードを横いっぱいに広げたいときに役立ちます。

7
00:00:20.209 --> 00:00:25.294
縦方向を決めるグリッド・ローと対になる、横方向専用の指定だと覚えてください。

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

9
00:00:27.703 --> 00:00:33.859
表の見出しのように幅広く見せたい場面を思い浮かべると、使いどころがイメージしやすくなります。

10
00:00:33.859 --> 00:00:39.748
グリッド全体の中で横方向だけを切り取って考えると、行と列の役割分担もはっきりしてきます。

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

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

13
00:00:48.864 --> 00:00:53.029
スライドの例では、クラス名デモを持つ要素に、グリッド・カラム、一、スラッシュ、

14
00:00:53.029 --> 00:00:57.194
マイナス一と指定しています。

15
00:00:57.194 --> 00:01:01.281
スラッシュの前が開始、後ろが終了を表すのが特徴です。

16
00:01:01.281 --> 00:01:06.939
この一行で、対象が一番左から一番右まで、すべての列を使うようになります。

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

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

19
00:01:14.326 --> 00:01:20.456
マイナス一は最後の線を表す便利な書き方で、列の数が変わっても右端まで届きます。

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

21
00:01:24.001 --> 00:01:27.732
まず開始線と終了線を数字で書く方法です。

22
00:01:27.732 --> 00:01:33.516
ここでいう数字は、マスの番号ではなく、列を区切る線の番号です。

23
00:01:33.516 --> 00:01:38.460
たとえば一、スラッシュ、二と書くと、一本目の線から二本目の線の手前までを使うため、

24
00:01:38.460 --> 00:01:43.404
一列分だけを占有します。

25
00:01:43.404 --> 00:01:48.534
一方、一、スラッシュ、マイナス一と書くと、明示的なグリッドの最後の線まで広がるため、

26
00:01:48.534 --> 00:01:53.665
全列を使うことになります。

27
00:01:53.665 --> 00:02:01.314
終了と開始の差が、使う列の数になると理解すると、大きさの計算で迷いにくくなります。

28
00:02:01.314 --> 00:02:05.605
線で考えるのが、このプロパティ最大のコツです。

29
00:02:05.605 --> 00:02:13.068
たとえば二列目から三列分使いたい場合は、二、スラッシュ、五と書けば計算できます。

30
00:02:13.068 --> 00:02:15.863
続いて、スパンを使った指定です。

31
00:02:15.863 --> 00:02:21.803
スパン、二と書くと、開始位置から二列分に広がるという意味になります。

32
00:02:21.803 --> 00:02:28.093
二、スラッシュ、スパン、二のように開始線と組み合わせる書き方もできます。

33
00:02:28.093 --> 00:02:35.780
終了線をいちいち計算しなくてよいので、何列分使いたいかが先に決まっているときに便利です。

34
00:02:35.780 --> 00:02:44.165
また値を一つだけ書けば、その列から自動で配置され、オートと書けばブラウザーの自動配置に任せます。

35
00:02:44.165 --> 00:02:52.726
ほかにも名前を付けた線を指定する方法がありますが、まずは数字とスパンの二通りを押さえれば十分です。

36
00:02:52.726 --> 00:02:55.696
場面に合わせて使い分けてください。

37
00:02:55.696 --> 00:02:57.722
初期値と継承を確認します。

38
00:02:57.722 --> 00:03:06.763
このプロパティは、グリッド・カラム・スタートとグリッド・カラム・エンドという二つの個別プロパティをまとめたものです。

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

40
00:03:11.751 --> 00:03:13.933
そして通常の継承はしません。

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

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

43
00:03:27.806 --> 00:03:34.508
書かなかった場合は自動配置に任せる扱いになるため、ほかの項目との並び方にも影響します。

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

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

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

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

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

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

50
00:03:56.242 --> 00:04:00.385
グリッドの枠を作るのは親のステージ、グリッド・カラムを書くのは子のデモ、

51
00:04:00.385 --> 00:04:04.529
という役割分担を意識してください。

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

53
00:04:10.783 --> 00:04:18.288
項目が三つだけなので、対象の幅が変わったときにほかの項目がどこへ移動するかも追いやすくなります。

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

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

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

57
00:04:34.374 --> 00:04:39.066
隙間はれい点ごレムとします。

58
00:04:39.066 --> 00:04:44.847
そこに対象のデモへグリッド・カラム、一、スラッシュ、マイナス一を加えると、

59
00:04:44.847 --> 00:04:50.628
対象は一番左から始まり、三列すべてを使う横長のカードになります。

60
00:04:50.628 --> 00:04:53.979
ほかの項目は、ほかの行のマスへ並びます。

61
00:04:53.979 --> 00:04:57.330
主役は最後のグリッド・カラムの一行です。

62
00:04:57.330 --> 00:05:02.860
この一行だけを変えたときの差が際立つよう、土台は共通にしています。

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

64
00:05:05.211 --> 00:05:09.409
最後のグリッド・カラムの値だけを、一、スラッシュ、マイナス一から、一、スラッシュ、

65
00:05:09.409 --> 00:05:13.607
二へ置き換えます。

66
00:05:13.607 --> 00:05:21.163
ファイルを保存してブラウザーを再読み込みすると、対象は一列分だけを使う通常の幅に戻ります。

67
00:05:21.163 --> 00:05:29.894
開始は同じ一列目なのに、終了の書き方を変えただけで、幅が全列から一列へ大きく変わる点に注目してください。

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

69
00:05:34.596 --> 00:05:42.488
マイナス一が最後の線を指す、という感覚をつかむことが、このプロパティを理解する近道になります。

70
00:05:42.488 --> 00:05:44.983
間違えやすい点を整理します。

71
00:05:44.983 --> 00:05:48.725
一番多いのは、親と子の役割の取り違えです。

72
00:05:48.725 --> 00:05:59.238
グリッド・テンプレート・カラムズは親で列の数や幅を定義する指定、グリッド・カラムは子がどの列を使うかを決める指定です。

73
00:05:59.238 --> 00:06:04.049
書き場所を間違えると、指定しても見た目は変わりません。

74
00:06:04.049 --> 00:06:07.078
もう一つは、マイナス一の意味です。

75
00:06:07.078 --> 00:06:12.424
マイナス一は、明示的に定義したグリッドの最後の線を表します。

76
00:06:12.424 --> 00:06:18.660
自動で増えた列までは含まない場合があるので、その点も意識してください。

77
00:06:18.660 --> 00:06:24.718
また、ほかの項目も同じ場所を明示的に指定すると重なることがあります。

78
00:06:24.718 --> 00:06:28.104
配置と読み順もあわせて確認しましょう。

79
00:06:28.104 --> 00:06:37.548
重なった項目は下の項目が隠れて読めなくなることもあるので、意図しない重なりがないか重ねて確認してください。

80
00:06:37.548 --> 00:06:39.927
効かないときの確認手順です。

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

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

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

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

85
00:07:07.365 --> 00:07:12.037
列の枠が想定通りかも調べましょう。

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

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

88
00:07:27.328 --> 00:07:29.668
最後に互換性とまとめです。

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

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

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

92
00:07:49.285 --> 00:07:59.543
練習は、まず一、マイナス一と一、二の違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

93
00:07:59.543 --> 00:08:00.623
まとめます。

94
00:08:00.623 --> 00:08:08.002
グリッド・カラムは開始線と終了線、またはスパンで横の範囲を指定し、継承はしません。

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

96
00:08:18.080 --> 00:08:19.700
お疲れさまでした。