WEBVTT

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

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

3
00:00:03.778 --> 00:00:07.714
今回のテーマは、ジャスティファイ・コンテンツです。

4
00:00:07.714 --> 00:00:16.687
これは、フレックスボックスやグリッドで並べた項目について、主軸方向に余った余白をどう配るかを決めるプロパティです。

5
00:00:16.687 --> 00:00:21.724
横並びなら左右方向が主軸になるので、項目を左に寄せるか、中央に集めるか、

6
00:00:21.724 --> 00:00:26.762
項目と項目の間へ余白を広げるかが、この一行で変わります。

7
00:00:26.762 --> 00:00:33.688
この動画では、代表的な値であるスペース・ビトウィーンとセンターを比べて違いを確認します。

8
00:00:33.688 --> 00:00:40.300
基本の書き方、主な値、主軸の考え方、実例、効かないときの確認まで、順番に解説します。

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

10
00:00:41.945 --> 00:00:48.224
セレクターのあとに、ジャスティファイ・コンテンツ、コロン、値、セミコロンを書きます。

11
00:00:48.224 --> 00:00:54.803
スライドの例では、デモというクラスを持つ要素に、スペース・ビトウィーンを指定しています。

12
00:00:54.803 --> 00:00:57.046
ここで大切なのは書く場所です。

13
00:00:57.046 --> 00:01:03.027
このプロパティは、並べられる子ではなく、並べ方を決める親のコンテナーに書きます。

14
00:01:03.027 --> 00:01:07.512
親がフレックスやグリッドとして項目を並べ、その主軸方向の余白の配り方をまとめて調整する、

15
00:01:07.512 --> 00:01:11.998
という役割分担を覚えてください。

16
00:01:11.998 --> 00:01:18.128
子に書いてもほかの項目は動かないので、まずは親子関係を確認する習慣をつけましょう。

17
00:01:18.128 --> 00:01:20.594
指定できる主な値を確認します。

18
00:01:20.594 --> 00:01:25.526
スタートは開始側の端へ、エンドは終了側の端へ項目を寄せます。

19
00:01:25.526 --> 00:01:29.142
センターは、項目全体を主軸の中央に集めます。

20
00:01:29.142 --> 00:01:36.869
スペース・ビトウィーンは、最初と最後の項目を両端にそろえ、余白を項目の間だけへ均等に配ります。

21
00:01:36.869 --> 00:01:46.403
スペース・アラウンドは各項目の周囲に同じ量の余白を配り、スペース・イーブンリーは端も含めてすべての間隔をそろえます。

22
00:01:46.403 --> 00:01:53.143
フレックスでは、フレックス・スタートやフレックス・エンドという書き方も使われます。

23
00:01:53.143 --> 00:01:58.404
項目の大きさではなく、余白をどこへ置くかで選ぶのがポイントです。

24
00:01:58.404 --> 00:02:00.015
初期値と継承を確認します。

25
00:02:00.015 --> 00:02:03.237
ジャスティファイ・コンテンツの初期値はノーマルです。

26
00:02:03.237 --> 00:02:10.548
ノーマルは多くの場面でスタート側へ寄せる扱いに近い振る舞いをしますが、値そのものはノーマルである点に注意してください。

27
00:02:10.548 --> 00:02:15.381
通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。

28
00:02:15.381 --> 00:02:18.356
配置を変えたいコンテナーごとに指定してください。

29
00:02:18.356 --> 00:02:23.188
また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。

30
00:02:23.188 --> 00:02:26.782
ブラウザーの既定スタイルや別のクラスが重なると見た目が変わることもあるので、

31
00:02:26.782 --> 00:02:30.376
最終的には開発者ツールで確認しましょう。

32
00:02:30.376 --> 00:02:32.112
軸の考え方を整理します。

33
00:02:32.112 --> 00:02:38.479
フレックスボックスには、項目が並ぶ方向である主軸と、それに直角に交わる交差軸があります。

34
00:02:38.479 --> 00:02:42.674
ジャスティファイ・コンテンツが担当するのは主軸の方向です。

35
00:02:42.674 --> 00:02:48.462
初期状態の横並びでは主軸が左右になるので、左右の寄せ方と余白の配り方を決めます。

36
00:02:48.462 --> 00:02:52.875
ところが、フレックス・ディレクションで縦並びに変えると主軸が上下に入れ替わり、

37
00:02:52.875 --> 00:02:57.288
今度は上下方向の配分を決める指定になります。

38
00:02:57.288 --> 00:03:06.548
縦方向の揃え方はアライン・アイテムズではないかと迷う場面でも、まずは今の並び方向で主軸がどちらを向いているかを確認してください。

39
00:03:06.548 --> 00:03:08.206
実例を見ていきます。

40
00:03:08.206 --> 00:03:11.191
まずエイチティーエムエルの用意です。

41
00:03:11.191 --> 00:03:17.161
ステージという外側の箱の中にデモがあり、その中に項目が三つ入っています。

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

43
00:03:22.799 --> 00:03:25.784
親と子の構造そのものが例の一部です。

44
00:03:25.784 --> 00:03:31.090
三つの項目は幅がそろえてあるので、親の中に余った横幅ができます。

45
00:03:31.090 --> 00:03:36.148
その余白を、項目の間へ広げるのか、項目全体を中央へ寄せるために使うのかが、

46
00:03:36.148 --> 00:03:41.206
このあとの比較で一目で分かるようになっています。

47
00:03:41.206 --> 00:03:46.512
項目の数は少なくても、余白の配り方を観察するには十分な構成です。

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

49
00:03:51.280 --> 00:03:57.587
デモはディスプレイ、フレックスで横並びにし、ギャップで項目の最小の間隔を空けます。

50
00:03:57.587 --> 00:04:03.278
最小の高さは10レムと大きめに取っていますが、今回注目するのは横方向です。

51
00:04:03.278 --> 00:04:10.200
項目の幅は、フレックスの指定で3レムに固定しているので、親の幅との差が余白として残ります。

52
00:04:10.200 --> 00:04:14.892
そして主役は最後の行で、ジャスティファイ・コンテンツにスペース・ビトウィーンを指定し、

53
00:04:14.892 --> 00:04:19.584
余白を項目と項目の間へ配っています。

54
00:04:19.584 --> 00:04:26.044
土台の指定は違いを見やすくするためのものなので、項目の左右の位置に注目してください。

55
00:04:26.044 --> 00:04:28.067
値を変えて比べてみましょう。

56
00:04:28.067 --> 00:04:35.002
最後のジャスティファイ・コンテンツの値だけを、スペース・ビトウィーンからセンターへ置き換えます。

57
00:04:35.002 --> 00:04:39.842
ファイルを保存してブラウザーを再読み込みすると、両端へ広がっていた項目が、

58
00:04:39.842 --> 00:04:44.682
まとまりとして中央へ寄り、左右に同じくらいの余白が残ります。

59
00:04:44.682 --> 00:04:48.583
エイチティーエムエルや項目の中身は一切変えていません。

60
00:04:48.583 --> 00:04:55.662
スペース・ビトウィーンは余白を間へ配る指定、センターは余白を両端へ残して項目を中央に置く指定です。

61
00:04:55.662 --> 00:04:59.130
比較のコツは、変える値を一つだけにすることです。

62
00:04:59.130 --> 00:05:03.464
ほかの指定を同時に変えると、違いの原因が分からなくなります。

63
00:05:03.464 --> 00:05:05.431
間違えやすい点を整理します。

64
00:05:05.431 --> 00:05:09.225
最も多いのは、配分できる余白がそもそもないケースです。

65
00:05:09.225 --> 00:05:14.704
親の幅いっぱいに項目が広がっていると、どの値を指定しても見た目は変わりません。

66
00:05:14.704 --> 00:05:23.135
次に、フレックス・グローで項目が伸びるようになっている場合や、子にオートのマージンが指定されている場合も注意が必要です。

67
00:05:23.135 --> 00:05:30.301
これらはジャスティファイ・コンテンツより先に余白を使ってしまうため、指定が効いていないように見えます。

68
00:05:30.301 --> 00:05:33.111
また、このプロパティは親に書く指定です。

69
00:05:33.111 --> 00:05:39.012
子へ書くアライン・セルフなどと混同しないように、対象と書く場所を分けて考えましょう。

70
00:05:39.012 --> 00:05:41.691
効かないときの確認手順です。

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

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

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

74
00:06:05.226 --> 00:06:15.749
コンピューテッドでジャスティファイ・コンテンツの最終的な値を確認し、あわせて親にディスプレイ、

75
00:06:15.749 --> 00:06:26.273
フレックスがあるか、主軸方向に余った空間があるか、子のフレックス・グローやオートマージンが余白を使っていないかも調べましょう。

76
00:06:26.273 --> 00:06:33.544
最後に、三百二十ピクセル程度の画面幅でも内容が利用できるか確かめてください。

77
00:06:33.544 --> 00:06:35.440
最後に互換性とまとめです。

78
00:06:35.440 --> 00:06:40.764
ジャスティファイ・コンテンツは、記事ではクローム29以降、エッジ12以降、

79
00:06:40.764 --> 00:06:46.088
ファイアフォックス20以降、サファリ9以降で対応すると紹介されています。

80
00:06:46.088 --> 00:06:53.964
フレックスの文脈とグリッドの文脈で細かな対応開始の記録は異なりますが、現在の主要ブラウザーでは広く使えます。

81
00:06:53.964 --> 00:06:58.194
練習は、まずスペース・ビトウィーンとセンターの違いを自分の言葉で説明し、

82
00:06:58.194 --> 00:07:02.424
次に親の幅だけを変えて結果を比べることです。

83
00:07:02.424 --> 00:07:03.299
まとめます。

84
00:07:03.299 --> 00:07:08.550
ジャスティファイ・コンテンツは主軸方向の余白の配り方で、継承はしません。

85
00:07:08.550 --> 00:07:09.863
お疲れさまでした。

86
00:07:09.863 --> 00:07:17.156
関連するアライン・アイテムズやフレックス・ラップもあわせて確認すると、配置の理解がさらに深まります.