WEBVTT

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

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

3
00:00:03.441 --> 00:00:07.026
今回のテーマは、ジャスティファイ・アイテムズです。

4
00:00:07.026 --> 00:00:12.474
グリッドでカードを並べたとき、一つひとつのカードが、自分のマス目の中央に寄ってほしい、

5
00:00:12.474 --> 00:00:17.922
あるいはマス目の幅いっぱいに広がってほしい、と思う場面があります。

6
00:00:17.922 --> 00:00:26.238
このプロパティは、まさにその横方向、正確にはインライン方向の置き方を、並べる側の親からまとめて決めるためのものです。

7
00:00:26.238 --> 00:00:32.547
カードが中央へ寄る様子と、セル幅へ伸びる様子の違いを比べながら、順番に見ていきましょう。

8
00:00:32.547 --> 00:00:37.852
前回学んだプレイス・アイテムズの、横方向を担当する片方だと思ってください。

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

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

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

12
00:00:47.939 --> 00:00:52.007
スライドの例では、クラス名デモを持つ要素に、ジャスティファイ・アイテムズ、

13
00:00:52.007 --> 00:00:56.075
センターと指定しています。

14
00:00:56.075 --> 00:01:02.908
センターは中央という意味で、これで子要素がそれぞれのセルの横方向の中央に置かれます。

15
00:01:02.908 --> 00:01:07.789
大切なのは、動かしたい子ではなく、並べる側の親に書く点です。

16
00:01:07.789 --> 00:01:14.785
まずはこの一行を書いて、カードの位置がどう変わるかをブラウザーで確かめてみてください。

17
00:01:14.785 --> 00:01:21.944
縦方向は別プロパティに任せ、横だけを決める、という役割の絞り込みがこの書き方の特徴です。

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

19
00:01:25.613 --> 00:01:27.615
まず中心となる二つです。

20
00:01:27.615 --> 00:01:31.618
センターは、項目をセルの横方向の中央へ寄せます。

21
00:01:31.618 --> 00:01:36.788
項目は自分の幅を保ったまま、真ん中に小さく収まるイメージです。

22
00:01:36.788 --> 00:01:41.291
ストレッチは逆に、項目をセルの幅いっぱいに伸ばします。

23
00:01:41.291 --> 00:01:46.629
カードの幅が列ごとにそろって見えるのは、こちらを選んだときです。

24
00:01:46.629 --> 00:01:52.466
同じ並びでも、中央に集めるか、枠まで広げるかで印象は大きく変わります。

25
00:01:52.466 --> 00:01:58.637
この二つの違いを自分の言葉で言い分けられることが、理解の第一歩になります。

26
00:01:58.637 --> 00:02:02.974
幅の違うカードを並べたとき、この差は特に目立ちます。

27
00:02:02.974 --> 00:02:07.644
そろえたいのか、余白を残したいのかを先に決めてください。

28
00:02:07.644 --> 00:02:10.173
続いて、端へ寄せる二つの値です。

29
00:02:10.173 --> 00:02:14.441
スタートは始まり側、エンドは終わり側へ項目を寄せます。

30
00:02:14.441 --> 00:02:19.657
横書きの日本語や英語では、始まり側は左、終わり側は右に当たります。

31
00:02:19.657 --> 00:02:27.560
レフトやライトと直接書くのではなく、文章の進む方向を基準に考えるのが、スタートとエンドの考え方です。

32
00:02:27.560 --> 00:02:33.408
そのため、右から左へ書く言語では、見た目の左右が入れ替わることもあります。

33
00:02:33.408 --> 00:02:39.573
普段の制作では、センターとストレッチに加えて、この二つを知っておけば十分です。

34
00:02:39.573 --> 00:02:43.998
まずは四つの値を実際に切り替えて、カードが左、中央、右、そして幅いっぱい、

35
00:02:43.998 --> 00:02:48.424
とどう動くかを目で追ってみてください。

36
00:02:48.424 --> 00:02:50.618
初期値と継承を確認します。

37
00:02:50.618 --> 00:02:53.150
仕様上の初期値はレガシーです。

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

39
00:02:57.453 --> 00:03:01.757
必ずしも同じとは限りません。

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

41
00:03:08.845 --> 00:03:11.208
そして通常の継承はしません。

42
00:03:11.208 --> 00:03:19.140
つまり、親要素に書いたからといって、その指定が子の要素へ自動で引き継がれるわけではありません。

43
00:03:19.140 --> 00:03:24.204
置き方を決めたい並びの親、そのものへ直接書く必要があります。

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

45
00:03:30.786 --> 00:03:36.524
アンセットは、継承しないプロパティなのでイニシャルとして扱われます。

46
00:03:36.524 --> 00:03:38.183
実例を見ていきます。

47
00:03:38.183 --> 00:03:41.171
まずエイチティーエムエルの用意です。

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

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

50
00:03:54.778 --> 00:03:57.765
親と子の構造そのものが例の一部です。

51
00:03:57.765 --> 00:04:02.661
ジャスティファイ・アイテムズを書くのは親であるデモの方で、動くのは子である項目の方、

52
00:04:02.661 --> 00:04:07.556
という役割分担を意識してください。

53
00:04:07.556 --> 00:04:12.867
次のシーエスエスで土台を整えてから、最後に主役の一行を加えます。

54
00:04:12.867 --> 00:04:20.832
項目を六つにしたのは、三列で二行の並びになり、すべてのセルで横方向の置き方を比べやすいためです。

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

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

57
00:04:32.802 --> 00:04:37.101
デモにはディスプレイ、グリッドを指定して三列の並びにし、ギャップで間隔を空け、

58
00:04:37.101 --> 00:04:41.400
最小の高さも確保します。

59
00:04:41.400 --> 00:04:45.446
そして最後に、今回変更するプロパティとして、ジャスティファイ・アイテムズ、

60
00:04:45.446 --> 00:04:49.492
センターを追加します。

61
00:04:49.492 --> 00:04:54.550
これで六つの項目が、それぞれのセルの横方向の中央に寄ります。

62
00:04:54.550 --> 00:05:00.957
土台は違いを見せるための下準備で、横の置き方を決めているのは最後の一行です。

63
00:05:00.957 --> 00:05:05.424
同じデモが複数回登場する場合は、通常は後の同じ詳細度の宣言が優先される、

64
00:05:05.424 --> 00:05:09.892
という決まりも思い出してください。

65
00:05:09.892 --> 00:05:11.787
値を変えて比べてみましょう。

66
00:05:11.787 --> 00:05:17.473
最後のジャスティファイ・アイテムズの値だけを、センターからストレッチへ置き換えます。

67
00:05:17.473 --> 00:05:21.196
ファイルを保存してブラウザーを再読み込みすると、今度は項目がセルの幅いっぱいに伸びて、

68
00:05:21.196 --> 00:05:24.919
列ごとに幅がそろいます。

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

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

71
00:05:33.176 --> 00:05:39.404
中央に寄っていたカードが、枠まで広がる様子を目で追うと、二つの値の役割がはっきり分かります。

72
00:05:39.404 --> 00:05:43.059
余裕があれば、スタートやエンドへも変えてみてください。

73
00:05:43.059 --> 00:05:47.120
寄る方向が変わる様子まで見ると、値の意味がさらに深まります。

74
00:05:47.120 --> 00:05:49.137
間違えやすい点を整理します。

75
00:05:49.137 --> 00:05:53.461
名前が似たジャスティファイ・コンテントは、グリッド全体の余白の配り方を決めるもので、

76
00:05:53.461 --> 00:05:57.784
各セル内の置き方とは対象が違います。

77
00:05:57.784 --> 00:06:02.107
セルが動くのか、セル内の項目が動くのか、で見分けてください。

78
00:06:02.107 --> 00:06:08.015
また、フレックスボックスでは、この指定で主軸の項目を個別に揃えることはできません。

79
00:06:08.015 --> 00:06:12.482
効かないと感じたら、まず親がグリッドかどうかを確認しましょう。

80
00:06:12.482 --> 00:06:21.273
関連として、縦横をまとめるプレイス・アイテムズ、そして項目ごとに例外を作るジャスティファイ・セルフも覚えておくと便利です。

81
00:06:21.273 --> 00:06:26.028
全体は親で決め、一つだけ子で上書きする、という使い分けができます。

82
00:06:26.028 --> 00:06:28.287
効かないときの確認手順です。

83
00:06:28.287 --> 00:06:35.388
まず親の表示方式がグリッドになっているか、列のトラックが定義されているかを見てください。

84
00:06:35.388 --> 00:06:39.262
ここが違うと、値を変えても置き方は変わりません。

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

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

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

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

89
00:07:13.960 --> 00:07:15.642
最後に互換性とまとめです。

90
00:07:15.642 --> 00:07:19.977
主要ブラウザーで古くから対応し、クロームは五十二以降、エッジは十二以降、

91
00:07:19.977 --> 00:07:24.311
ファイアフォックスは二十以降、サファリは九以降という記録です。

92
00:07:24.311 --> 00:07:28.969
アンドロイド版クロームは五十二以降、アイオーエス版サファリは九以降です。

93
00:07:28.969 --> 00:07:36.733
ただしグリッド文脈では、クローム五十七以降、サファリ十点一以降など、値や文脈ごとに開始版が異なる点には注意してください。

94
00:07:36.733 --> 00:07:43.720
練習は、まずセンターとストレッチの違いを自分の言葉で説明し、次に値だけを一つずつ変えて結果を比べることです。

95
00:07:43.720 --> 00:07:44.496
まとめます。

96
00:07:44.496 --> 00:07:50.189
ジャスティファイ・アイテムズは各セル内の横方向の揃え、初期値はレガシーで継承はしません。

97
00:07:50.189 --> 00:07:54.847
親がグリッドであることを確かめてから使う、この順番を忘れないでください。

98
00:07:54.847 --> 00:07:56.012
お疲れさまでした。