WEBVTT

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

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

3
00:00:03.188 --> 00:00:06.774
今回のテーマは、グリッド・テンプレート・カラムズです。

4
00:00:06.774 --> 00:00:11.290
これはグリッドレイアウトで、列の幅をあらかじめ決めるプロパティです。

5
00:00:11.290 --> 00:00:16.604
行の高さを決めるのがロウズ側だとすれば、こちらは横方向の担当だと考えてください。

6
00:00:16.604 --> 00:00:22.714
たとえば同じ幅の三列を並べたり、右側だけを二倍の幅にしたりと、列ごとに違う幅を指定できます。

7
00:00:22.714 --> 00:00:27.628
カードを横に並べる画面や、本文とサイドバーで幅を分けたい場面で役立ちます。

8
00:00:27.628 --> 00:00:33.340
まずは全体像をつかみ、列を先に決めると配置がどう安定するのかを一緒に見ていきましょう。

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

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

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

12
00:00:41.995 --> 00:00:46.819
スライドの例では、クラス名デモを持つ要素に、リピートを使って、ミンマックス、

13
00:00:46.819 --> 00:00:51.643
ゼロ、カンマ、いちエフアールを三回くり返す指定をしています。

14
00:00:51.643 --> 00:00:55.048
これは同じ考え方の列を三つ作る、という意味です。

15
00:00:55.048 --> 00:00:58.879
値が並んだ数だけ、明示的に作られる列の数が決まります。

16
00:00:58.879 --> 00:01:02.001
大切なのは、これをグリッドの親に書く点です。

17
00:01:02.001 --> 00:01:05.122
子要素ひとつひとつに書くものではありません。

18
00:01:05.122 --> 00:01:10.088
まずはこの基本形と、値の並びが列の順番と対応する関係を覚えてください。

19
00:01:10.088 --> 00:01:12.795
指定できる値の読み方を整理します。

20
00:01:12.795 --> 00:01:16.617
基本は、列のサイズを空白区切りで並べることです。

21
00:01:16.617 --> 00:01:24.738
レムやピクセルなどの長さで固定するほか、エフアールという単位で残りの幅を割合で分け合うこともできます。

22
00:01:24.738 --> 00:01:30.790
たとえば、いちエフアール、にエフアールと書けば、余った幅を一対二で分けます。

23
00:01:30.790 --> 00:01:35.885
また、ミンマックスを使うと、最小幅と最大幅の範囲を決められます。

24
00:01:35.885 --> 00:01:40.344
そしてリピートは、同じサイズの列をくり返す省略記法です。

25
00:01:40.344 --> 00:01:47.988
固定したいのか、伸ばしたいのか、均等に分けたいのか、目的に合わせて値の種類を選ぶことが大切です。

26
00:01:47.988 --> 00:01:52.284
ここで、いちエフアールの落とし穴を押さえておきましょう。

27
00:01:52.284 --> 00:01:59.035
エフアールは均等に分けてくれそうに見えますが、実際には中身による最小幅の影響を受けます。

28
00:01:59.035 --> 00:02:06.093
長い英単語や折り返せない文字列が入ると、その列だけが広がり、均等にならないことがあるのです。

29
00:02:06.093 --> 00:02:12.231
そこでよく使うのが、ミンマックス、ゼロ、カンマ、いちエフアールという書き方です。

30
00:02:12.231 --> 00:02:17.908
下限をゼロにすることで、列が中身に引っ張られず、きちんと均等に分かれます。

31
00:02:17.908 --> 00:02:24.198
あわせて、中身側で折り返しができるようにしておくと、はみ出しを防ぎやすくなります。

32
00:02:24.198 --> 00:02:28.648
等幅にしたいときほど、この組み合わせを思い出してください。

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

34
00:02:30.245 --> 00:02:34.300
初期値はノーンで、列トラックはあらかじめ定義されていない状態です。

35
00:02:34.300 --> 00:02:36.020
そして通常の継承はしません。

36
00:02:36.020 --> 00:02:40.321
親要素に書いた列の定義が、子要素へ自動で受け継がれることはありません。

37
00:02:40.321 --> 00:02:44.744
あくまでグリッドの親に書くことで、その親の中の列の幅が決まる仕組みです。

38
00:02:44.744 --> 00:02:51.256
また、仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点も押さえておきましょう。

39
00:02:51.256 --> 00:02:56.294
インヘリットやイニシャルなどの共通キーワードの意味は、ほかのプロパティと同様です。

40
00:02:56.294 --> 00:03:01.700
普段は意識する場面は少ないものの、初期値がノーンであることはしっかり覚えておきましょう。

41
00:03:01.700 --> 00:03:03.197
実例を見ていきます。

42
00:03:03.197 --> 00:03:05.892
まずエイチティーエムエルの用意です。

43
00:03:05.892 --> 00:03:11.283
ステージという土台の箱の中にデモがあり、その中に項目が六つ入っています。

44
00:03:11.283 --> 00:03:15.176
項目はすべてアイテムという共通クラスを持っています。

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

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

47
00:03:23.111 --> 00:03:29.101
グリッドの親はデモ、配置される子は六つの項目、という役割分担を意識してください。

48
00:03:29.101 --> 00:03:35.689
後のシーエスエスでは列を三列にしますので、六つの項目は三つずつ二行に並ぶことになります。

49
00:03:35.689 --> 00:03:39.432
その三列の幅をどう決めるかが、今回の見どころです。

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

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

52
00:03:52.192 --> 00:03:58.572
デモにはディスプレイ、グリッドを指定し、隙間はれい点ごレムとします。

53
00:03:58.572 --> 00:04:03.826
そして主役のグリッド・テンプレート・カラムズに、リピートでミンマックス、

54
00:04:03.826 --> 00:04:09.080
ゼロ、いちエフアールを三回と指定します。

55
00:04:09.080 --> 00:04:14.709
すると三列が均等な幅で並び、六つの項目が三列二行に整います。

56
00:04:14.709 --> 00:04:21.652
土台の指定は共通なので、最後の指定だけに注目して変化を追うことができます。

57
00:04:21.652 --> 00:04:27.844
列の幅がそろうと、カード全体がすっきり見える点を確認してください。

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

59
00:04:30.136 --> 00:04:37.833
最後のグリッド・テンプレート・カラムズの値だけを、いちエフアール、にエフアールへ置き換えます。

60
00:04:37.833 --> 00:04:46.184
ファイルを保存してブラウザーを再読み込みすると、今度は二列になり、右の列が左の列の二倍の幅になります。

61
00:04:46.184 --> 00:04:49.131
六つの項目は二列三行で並び直します。

62
00:04:49.131 --> 00:04:57.482
元の指定は均等な三列でしたが、比率を変えるだけで、強調したい列を広く見せるレイアウトへ切り替わります。

63
00:04:57.482 --> 00:05:04.687
エイチティーエムエルは変えていないのに、列の設計だけで印象が変わる点に注目してください。

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

65
00:05:09.272 --> 00:05:11.419
間違えやすい点を整理します。

66
00:05:11.419 --> 00:05:14.640
いちばん多いのは、書く場所の取り違えです。

67
00:05:14.640 --> 00:05:22.615
これはグリッドの親で列トラックを定義する指定であり、子要素ひとつひとつの配置を決める指定ではありません。

68
00:05:22.615 --> 00:05:25.682
子に書いても、期待した列にはなりません。

69
00:05:25.682 --> 00:05:28.903
もう一つは、先ほど触れた最小幅の問題です。

70
00:05:28.903 --> 00:05:36.571
均等にしたつもりでも中身に引っ張られる場合は、ミンマックス、ゼロ、いちエフアールを検討してください。

71
00:05:36.571 --> 00:05:45.926
開発者ツールのグリッド表示で、明示トラックと暗黙トラックを見分けると、どの列がこの指定で作られたのかを追いやすくなります。

72
00:05:45.926 --> 00:05:50.220
親で設計し、子がそこへ入る、という関係を意識しましょう。

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

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

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

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

77
00:06:15.220 --> 00:06:22.925
コンピューテッドで最終的な値を確認し、親の表示方式がグリッドになっているかも調べましょう。

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

79
00:06:30.973 --> 00:06:37.480
順番に切り分ければ、列そのものの問題か、土台の問題かを特定しやすくなります。

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

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

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

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

84
00:06:56.620 --> 00:07:03.367
練習は、まずリピート三回、ミンマックス、ゼロ、いちエフアールと、いちエフアール、

85
00:07:03.367 --> 00:07:10.113
にエフアールの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

86
00:07:10.113 --> 00:07:11.054
まとめます。

87
00:07:11.054 --> 00:07:14.898
グリッド・テンプレート・カラムズは親に列の幅の設計図を書く指定で、初期値はノーン、

88
00:07:14.898 --> 00:07:18.742
継承はしません。

89
00:07:18.742 --> 00:07:25.488
関連するグリッド・テンプレート・ロウズやエリアズもあわせて確認すると理解が深まります。

90
00:07:25.488 --> 00:07:26.900
お疲れさまでした。