WEBVTT

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

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

3
00:00:03.544 --> 00:00:06.940
今回のテーマは、グリッド・オート・フローです。

4
00:00:06.940 --> 00:00:13.732
グリッドでは、場所を細かく指定しなくても、項目が自動で空いている場所へ次々と並んでいきます。

5
00:00:13.732 --> 00:00:17.719
このプロパティは、その自動配置の流れを決めるものです。

6
00:00:17.719 --> 00:00:21.263
行の方向へ横に流すのか、列の方向へ縦に流すのか。

7
00:00:21.263 --> 00:00:25.250
さらに、できてしまった隙間を詰めるかどうかも選べます。

8
00:00:25.250 --> 00:00:29.679
並び方のルールを決める司令塔として、順番に見ていきましょう。

9
00:00:29.679 --> 00:00:37.653
写真の一覧やカードの並びなど、数が変わる項目を扱う場面で、この流れの違いがそのまま使いやすさにつながります。

10
00:00:37.653 --> 00:00:39.338
まず基本の書き方です。

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

12
00:00:43.246 --> 00:00:47.153
値、セミコロンを書きます。

13
00:00:47.153 --> 00:00:54.355
スライドの例では、クラス名デモを持つ要素に、グリッド・オート・フロー、カラムと指定しています。

14
00:00:54.355 --> 00:00:58.185
これは、自動配置を列の方向へ流す、という意味です。

15
00:00:58.185 --> 00:01:02.322
大切なのは、並ぶ子ではなく、並べる側の親に書く点です。

16
00:01:02.322 --> 00:01:09.984
まずはこの一行を書いて、項目がどの順番でどの場所へ入っていくかを、ブラウザーで確かめてみてください。

17
00:01:09.984 --> 00:01:18.411
値のスペルを一文字でも間違えると、宣言全体が無効になってしまうので、書き終えたら値のつづりも見直してください。

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

19
00:01:22.068 --> 00:01:23.730
まず基本の二つです。

20
00:01:23.730 --> 00:01:30.877
ローは行の方向へ流す指定で、項目はまず横に並び、行がいっぱいになると次の行へ移ります。

21
00:01:30.877 --> 00:01:33.203
こちらが初期値でもあります。

22
00:01:33.203 --> 00:01:40.849
一方カラムは列の方向へ流す指定で、項目はまず縦に並び、列がいっぱいになると次の列へ移ります。

23
00:01:40.849 --> 00:01:46.666
同じ六つの項目でも、ローとカラムでは番号の進む方向が直角に変わります。

24
00:01:46.666 --> 00:01:52.317
読み進める順番を横にしたいのか、縦にしたいのかを先に決めてください。

25
00:01:52.317 --> 00:02:04.949
普段の文章が横書きで左から右へ進むように、ローは自然に感じる並び方で、カラムは新聞の段組みのように縦へ進む並び方だとイメージすると分かりやすくなります。

26
00:02:04.949 --> 00:02:07.306
続いて、隙間を詰めるデンスです。

27
00:02:07.306 --> 00:02:11.872
大きな項目が先に入ると、後ろに小さな隙間が残ることがあります。

28
00:02:11.872 --> 00:02:20.562
通常はその隙間を飛ばして先へ進みますが、デンスを付けると、後ろの小さな項目が戻ってきて隙間を埋めるように配置されます。

29
00:02:20.562 --> 00:02:26.012
ロー・デンス、カラム・デンスのように、方向と組み合わせて書くのが基本です。

30
00:02:26.012 --> 00:02:32.640
ただし隙間を埋めるぶん、見た目の並び順がエイチティーエムエルの順番と変わる場合があります。

31
00:02:32.640 --> 00:02:37.354
便利さと読み順の分かりやすさ、その両方を見ながら選んでください。

32
00:02:37.354 --> 00:02:42.951
つまりデンスは、空白を減らして画面を有効に使いたいときに候補になる指定です。

33
00:02:42.951 --> 00:02:45.897
隙間が気になる一覧で試してみてください。

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

35
00:02:47.727 --> 00:02:49.557
仕様上の初期値はローです。

36
00:02:49.557 --> 00:02:53.358
つまり何も書かなければ、自動配置は行の方向へ流れます。

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

38
00:02:56.877 --> 00:03:00.396
必ずしも同じとは限りません。

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

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

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

42
00:03:12.361 --> 00:03:16.443
並べる親そのものへ直接書く必要があります。

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

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

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

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

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

48
00:03:38.887 --> 00:03:41.661
親と子の構造そのものが例の一部です。

49
00:03:41.661 --> 00:03:46.054
グリッド・オート・フローを書くのは親であるデモの方で、並ぶのは子である項目の方、

50
00:03:46.054 --> 00:03:50.446
という役割分担を意識してください。

51
00:03:50.446 --> 00:03:57.382
項目を六つにしたのは、二行の枠の中で縦と横、どちらの流れになるかを比べやすくするためです。

52
00:03:57.382 --> 00:04:00.464
項目の文字はあえて短くそろえてあります。

53
00:04:00.464 --> 00:04:06.167
長い文章が入ったときの崩れは、値を比べたあとで別に確認するとよいでしょう。

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

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

56
00:04:17.503 --> 00:04:24.528
デモにはディスプレイ、グリッドを指定し、最初の列はろくレム、行はよんレムを二行とします。

57
00:04:24.528 --> 00:04:29.079
そこへグリッド・オート・フロー、カラムを加えると、項目はまず縦に二つ入り、

58
00:04:29.079 --> 00:04:33.629
次に右の列へ、さらにその右へと流れます。

59
00:04:33.629 --> 00:04:39.377
自動で増える列の幅は、グリッド・オート・カラムズ、ろくレムでそろえます。

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

61
00:04:45.284 --> 00:04:49.755
主役は最後のグリッド・オート・フロー、カラムの一行です。

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

63
00:04:52.073 --> 00:04:58.034
最後のグリッド・オート・フローの値だけを、カラムからローへ置き換えます。

64
00:04:58.034 --> 00:05:03.167
ファイルを保存してブラウザーを再読み込みすると、今度は項目がまず横へ並び、

65
00:05:03.167 --> 00:05:08.300
行がいっぱいになると下の行へ移る流れに変わります。

66
00:05:08.300 --> 00:05:13.764
番号の進み方が縦方向から横方向へ切り替わる様子に注目してください。

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

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

69
00:05:23.864 --> 00:05:28.004
画面の中で番号を目で追い、縦に進むのか横に進むのかを声に出して確認すると、

70
00:05:28.004 --> 00:05:32.143
流れの違いが体に残ります。

71
00:05:32.143 --> 00:05:33.903
間違えやすい点を整理します。

72
00:05:33.903 --> 00:05:37.172
一番大切なのは、デンスを使うと見た目の順番がエイチティーエムエルの順番と変わる場合がある、

73
00:05:37.172 --> 00:05:40.441
という点です。

74
00:05:40.441 --> 00:05:43.836
隙間を埋めるために、後ろの項目が前へ出てくるからです。

75
00:05:43.836 --> 00:05:48.363
写真の一覧なら問題になりにくくても、入力項目やリンクが並ぶ場所では、キーボードで移動する操作順と見た目がずれて、

76
00:05:48.363 --> 00:05:52.889
使う人を迷わせることがあります。

77
00:05:52.889 --> 00:05:56.410
また、場所を明示して配置した項目は自動配置の対象外です。

78
00:05:56.410 --> 00:06:02.193
効いていないように見えたら、まずその項目が自動配置なのか、明示配置なのかを確認してください。

79
00:06:02.193 --> 00:06:06.343
順番が大切なコンテンツでは、デンスを使わない選択も立派な判断です。

80
00:06:06.343 --> 00:06:09.486
見た目の詰まり具合だけで決めないようにしましょう。

81
00:06:09.486 --> 00:06:11.705
効かないときの確認手順です。

82
00:06:11.705 --> 00:06:20.106
まず親の表示方式がグリッドになっているか、行と列の枠が流れを受け止められる形になっているかを見てください。

83
00:06:20.106 --> 00:06:23.910
ここが違うと、値を変えても見た目は変わりません。

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

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

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

87
00:06:51.173 --> 00:06:59.098
三百二十ピクセル程度の画面幅や文字の拡大、キーボード操作でも内容を利用できるかまで確かめてください。

88
00:06:59.098 --> 00:07:01.092
最後に互換性とまとめです。

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

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

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

92
00:07:17.816 --> 00:07:25.794
練習は、まずカラムとローの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

93
00:07:25.794 --> 00:07:26.714
まとめます。

94
00:07:26.714 --> 00:07:32.238
グリッド・オート・フローは自動配置の流れ、初期値はローで継承はしません。

95
00:07:32.238 --> 00:07:35.920
デンスでは見た目の順番に注意して使ってください。

96
00:07:35.920 --> 00:07:42.287
関連するプロパティとして、自動で増える行の高さを決めるグリッド・オート・ローズと、

97
00:07:42.287 --> 00:07:48.654
列の幅を決めるグリッド・オート・カラムズも、あわせて確認しておくと理解が深まります。

98
00:07:48.654 --> 00:07:50.035
お疲れさまでした。