WEBVTT

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

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

3
00:00:03.289 --> 00:00:05.755
今回のテーマは、グリッド・ローです。

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

5
00:00:10.826 --> 00:00:15.896
その項目が何行目の位置から始まり、どこまで縦に広がるのかを指定できます。

6
00:00:15.896 --> 00:00:20.281
たとえば重要なカードを縦に二行分大きく見せたいときに役立ちます。

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

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

9
00:00:28.092 --> 00:00:31.997
写真や説明文が多いカードをほかの項目より縦長に見せたい場面を思い浮かべると、

10
00:00:31.997 --> 00:00:35.903
使いどころがイメージしやすくなります。

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

12
00:00:41.932 --> 00:00:43.657
まず基本の書き方です。

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

14
00:00:51.029 --> 00:00:54.793
スライドの例では、クラス名デモを持つ要素に、グリッド・ロー、一、スラッシュ、

15
00:00:54.793 --> 00:00:58.558
三と指定しています。

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

17
00:01:02.636 --> 00:01:06.557
この一行で、対象が縦に二行分を使うようになります。

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

19
00:01:11.262 --> 00:01:13.929
まずはこの基本形を覚えてください。

20
00:01:13.929 --> 00:01:22.712
書き方に慣れるまでは、スラッシュの前後を声に出して読み、開始と終了を取り違えていないか確かめるのがおすすめです。

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

22
00:01:25.696 --> 00:01:28.837
まず開始線と終了線を数字で書く方法です。

23
00:01:28.837 --> 00:01:33.706
ここでいう数字は、マスの番号ではなく、行を区切る線の番号です。

24
00:01:33.706 --> 00:01:38.182
たとえば一、スラッシュ、三と書くと、一本目の線から始まり、三本目の線の手前までを使うため、

25
00:01:38.182 --> 00:01:42.658
縦に二行分を占有します。

26
00:01:42.658 --> 00:01:45.642
一、スラッシュ、二なら一行分だけです。

27
00:01:45.642 --> 00:01:53.809
終了の数字から開始の数字を引いたものが、使う行の数になると理解すると、大きさの計算で迷いにくくなります。

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

29
00:01:57.422 --> 00:02:01.741
たとえば二行目から四行目まで使いたい場合は、二、スラッシュ、五と書けば三行分になる、

30
00:02:01.741 --> 00:02:06.060
という具合に応用できます。

31
00:02:06.060 --> 00:02:08.596
続いて、スパンを使った指定です。

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

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

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

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

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

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

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

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

40
00:02:55.837 --> 00:02:57.750
そして通常の継承はしません。

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

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

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

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

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

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

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

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

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

50
00:03:37.649 --> 00:03:45.829
グリッドの枠を作るのは親のステージ、グリッド・ローを書くのは子のデモ、という役割分担を意識してください。

51
00:03:45.829 --> 00:03:52.122
三つだけのシンプルな構成なので、対象だけが縦に伸びる変化をはっきり観察できます。

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

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

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

55
00:04:06.954 --> 00:04:11.280
隙間はれい点ごレムとします。

56
00:04:11.280 --> 00:04:16.302
そこに対象のデモへグリッド・ロー、一、スラッシュ、三を加えると、対象は一行目から始まり、

57
00:04:16.302 --> 00:04:21.323
縦に二行分を占める縦長のカードになります。

58
00:04:21.323 --> 00:04:24.568
ほかの項目は、残りの空いたマスへ並びます。

59
00:04:24.568 --> 00:04:27.503
主役は最後のグリッド・ローの一行です。

60
00:04:27.503 --> 00:04:31.907
土台の指定は対象以外にも共通するので、主役の一行だけを変えたときの差が際立ち、

61
00:04:31.907 --> 00:04:36.310
行の高さの変化を比べやすくなります。

62
00:04:36.310 --> 00:04:38.312
値を変えて比べてみましょう。

63
00:04:38.312 --> 00:04:41.530
最後のグリッド・ローの値だけを、一、スラッシュ、三から、一、スラッシュ、

64
00:04:41.530 --> 00:04:44.747
二へ置き換えます。

65
00:04:44.747 --> 00:04:51.325
ファイルを保存してブラウザーを再読み込みすると、対象は一行分だけを使う通常の高さに戻ります。

66
00:04:51.325 --> 00:04:59.477
開始は同じ一行目なのに、終了の数字を一つ小さくしただけで、高さが二行分から一行分へ半分になる点に注目してください。

67
00:04:59.477 --> 00:05:03.481
比較のコツは、変えるのはこの値ひとつだけにすることです。

68
00:05:03.481 --> 00:05:10.202
終了の数字が高さに直結する、という感覚をつかむことが、このプロパティを理解する近道になります。

69
00:05:10.202 --> 00:05:12.173
間違えやすい点を整理します。

70
00:05:12.173 --> 00:05:14.284
一番注意したいのは重なりです。

71
00:05:14.284 --> 00:05:19.352
隣の要素も同じ場所を明示的に指定すると、項目同士が重なって表示されます。

72
00:05:19.352 --> 00:05:26.390
ブラウザーが自動で衝突を解決してくれると思わず、どの項目がどの行を使うのかを事前に整理してください。

73
00:05:26.390 --> 00:05:30.543
見た目の配置と、エイチティーエムエルの読み上げ順がずれる場合もあるので、

74
00:05:30.543 --> 00:05:34.695
配置と読み順をあわせて確認することも大切です。

75
00:05:34.695 --> 00:05:39.904
また、これは親でトラックを定義する指定ではなく、子の配置を決める指定です。

76
00:05:39.904 --> 00:05:43.423
親と子の役割を取り違えていないかも見直しましょう。

77
00:05:43.423 --> 00:05:48.138
重なった項目は下の項目が隠れて読めなくなることもあるので、重なりを意図する場合以外は、

78
00:05:48.138 --> 00:05:52.854
開始と終了の組み合わせを重ねて確認してください。

79
00:05:52.854 --> 00:05:54.985
効かないときの確認手順です。

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

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

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

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

84
00:06:19.716 --> 00:06:24.054
行と列の枠が想定通りかも調べましょう。

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

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

87
00:06:37.751 --> 00:06:39.924
最後に互換性とまとめです。

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

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

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

91
00:06:58.140 --> 00:07:06.997
練習は、まず一、三と一、二の違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

92
00:07:06.997 --> 00:07:08.000
まとめます。

93
00:07:08.000 --> 00:07:14.685
グリッド・ローは開始線と終了線、またはスパンで縦の範囲を指定し、継承はしません。

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

95
00:07:24.044 --> 00:07:31.063
線の番号とマスの数の関係を言葉にできるようになれば、縦長の配置でも迷わなくなります。

96
00:07:31.063 --> 00:07:32.567
お疲れさまでした。