VIDEO LESSON

CSSのjustify-contentの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:17動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、ジャスティファイ・コンテンツです。
0:07これは、フレックスボックスやグリッドで並べた項目について、主軸方向に余った余白をどう配るかを決めるプロパティです。
0:16横並びなら左右方向が主軸になるので、項目を左に寄せるか、中央に集めるか、
0:21項目と項目の間へ余白を広げるかが、この一行で変わります。
0:26この動画では、代表的な値であるスペース・ビトウィーンとセンターを比べて違いを確認します。
0:33基本の書き方、主な値、主軸の考え方、実例、効かないときの確認まで、順番に解説します。
0:40まず基本の書き方です。
0:41セレクターのあとに、ジャスティファイ・コンテンツ、コロン、値、セミコロンを書きます。
0:48スライドの例では、デモというクラスを持つ要素に、スペース・ビトウィーンを指定しています。
0:54ここで大切なのは書く場所です。
0:57このプロパティは、並べられる子ではなく、並べ方を決める親のコンテナーに書きます。
1:03親がフレックスやグリッドとして項目を並べ、その主軸方向の余白の配り方をまとめて調整する、
1:07という役割分担を覚えてください。
1:11子に書いてもほかの項目は動かないので、まずは親子関係を確認する習慣をつけましょう。
1:18指定できる主な値を確認します。
1:20スタートは開始側の端へ、エンドは終了側の端へ項目を寄せます。
1:25センターは、項目全体を主軸の中央に集めます。
1:29スペース・ビトウィーンは、最初と最後の項目を両端にそろえ、余白を項目の間だけへ均等に配ります。
1:36スペース・アラウンドは各項目の周囲に同じ量の余白を配り、スペース・イーブンリーは端も含めてすべての間隔をそろえます。
1:46フレックスでは、フレックス・スタートやフレックス・エンドという書き方も使われます。
1:53項目の大きさではなく、余白をどこへ置くかで選ぶのがポイントです。
1:58初期値と継承を確認します。
2:00ジャスティファイ・コンテンツの初期値はノーマルです。
2:03ノーマルは多くの場面でスタート側へ寄せる扱いに近い振る舞いをしますが、値そのものはノーマルである点に注意してください。
2:10通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。
2:15配置を変えたいコンテナーごとに指定してください。
2:18また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。
2:23ブラウザーの既定スタイルや別のクラスが重なると見た目が変わることもあるので、
2:26最終的には開発者ツールで確認しましょう。
2:30軸の考え方を整理します。
2:32フレックスボックスには、項目が並ぶ方向である主軸と、それに直角に交わる交差軸があります。
2:38ジャスティファイ・コンテンツが担当するのは主軸の方向です。
2:42初期状態の横並びでは主軸が左右になるので、左右の寄せ方と余白の配り方を決めます。
2:48ところが、フレックス・ディレクションで縦並びに変えると主軸が上下に入れ替わり、
2:52今度は上下方向の配分を決める指定になります。
2:57縦方向の揃え方はアライン・アイテムズではないかと迷う場面でも、まずは今の並び方向で主軸がどちらを向いているかを確認してください。
3:06実例を見ていきます。
3:08まずエイチティーエムエルの用意です。
3:11ステージという外側の箱の中にデモがあり、その中に項目が三つ入っています。
3:17頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
3:22親と子の構造そのものが例の一部です。
3:25三つの項目は幅がそろえてあるので、親の中に余った横幅ができます。
3:31その余白を、項目の間へ広げるのか、項目全体を中央へ寄せるために使うのかが、
3:36このあとの比較で一目で分かるようになっています。
3:41項目の数は少なくても、余白の配り方を観察するには十分な構成です。
3:46次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
3:51デモはディスプレイ、フレックスで横並びにし、ギャップで項目の最小の間隔を空けます。
3:57最小の高さは10レムと大きめに取っていますが、今回注目するのは横方向です。
4:03項目の幅は、フレックスの指定で3レムに固定しているので、親の幅との差が余白として残ります。
4:10そして主役は最後の行で、ジャスティファイ・コンテンツにスペース・ビトウィーンを指定し、
4:14余白を項目と項目の間へ配っています。
4:19土台の指定は違いを見やすくするためのものなので、項目の左右の位置に注目してください。
4:26値を変えて比べてみましょう。
4:28最後のジャスティファイ・コンテンツの値だけを、スペース・ビトウィーンからセンターへ置き換えます。
4:35ファイルを保存してブラウザーを再読み込みすると、両端へ広がっていた項目が、
4:39まとまりとして中央へ寄り、左右に同じくらいの余白が残ります。
4:44エイチティーエムエルや項目の中身は一切変えていません。
4:48スペース・ビトウィーンは余白を間へ配る指定、センターは余白を両端へ残して項目を中央に置く指定です。
4:55比較のコツは、変える値を一つだけにすることです。
4:59ほかの指定を同時に変えると、違いの原因が分からなくなります。
5:03間違えやすい点を整理します。
5:05最も多いのは、配分できる余白がそもそもないケースです。
5:09親の幅いっぱいに項目が広がっていると、どの値を指定しても見た目は変わりません。
5:14次に、フレックス・グローで項目が伸びるようになっている場合や、子にオートのマージンが指定されている場合も注意が必要です。
5:23これらはジャスティファイ・コンテンツより先に余白を使ってしまうため、指定が効いていないように見えます。
5:30また、このプロパティは親に書く指定です。
5:33子へ書くアライン・セルフなどと混同しないように、対象と書く場所を分けて考えましょう。
5:39効かないときの確認手順です。
5:41まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
5:50次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
5:57スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。
6:05コンピューテッドでジャスティファイ・コンテンツの最終的な値を確認し、あわせて親にディスプレイ、
6:15フレックスがあるか、主軸方向に余った空間があるか、子のフレックス・グローやオートマージンが余白を使っていないかも調べましょう。
6:26最後に、三百二十ピクセル程度の画面幅でも内容が利用できるか確かめてください。
6:33最後に互換性とまとめです。
6:35ジャスティファイ・コンテンツは、記事ではクローム29以降、エッジ12以降、
6:40ファイアフォックス20以降、サファリ9以降で対応すると紹介されています。
6:46フレックスの文脈とグリッドの文脈で細かな対応開始の記録は異なりますが、現在の主要ブラウザーでは広く使えます。
6:53練習は、まずスペース・ビトウィーンとセンターの違いを自分の言葉で説明し、
6:58次に親の幅だけを変えて結果を比べることです。
7:02まとめます。
7:03ジャスティファイ・コンテンツは主軸方向の余白の配り方で、継承はしません。
7:08お疲れさまでした。
7:09関連するアライン・アイテムズやフレックス・ラップもあわせて確認すると、配置の理解がさらに深まります.

日本語字幕をダウンロード（WebVTT）

この動画で学べること

justify-contentの役割と主な指定値を解説。余白を項目の間へ配るか、項目を中央に寄せるかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのjustify-contentの使い方：指定値・実例・効かない原因とブラウザー互換性 →