VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、ジャスティファイ・アイテムズです。
0:07グリッドでカードを並べたとき、一つひとつのカードが、自分のマス目の中央に寄ってほしい、
0:12あるいはマス目の幅いっぱいに広がってほしい、と思う場面があります。
0:17このプロパティは、まさにその横方向、正確にはインライン方向の置き方を、並べる側の親からまとめて決めるためのものです。
0:26カードが中央へ寄る様子と、セル幅へ伸びる様子の違いを比べながら、順番に見ていきましょう。
0:32前回学んだプレイス・アイテムズの、横方向を担当する片方だと思ってください。
0:37まず基本の書き方です。
0:39書き方はほかのプロパティと同じで、対象のセレクターに、プロパティ名、コロン、
0:43値、セミコロンを書きます。
0:47スライドの例では、クラス名デモを持つ要素に、ジャスティファイ・アイテムズ、
0:52センターと指定しています。
0:56センターは中央という意味で、これで子要素がそれぞれのセルの横方向の中央に置かれます。
1:02大切なのは、動かしたい子ではなく、並べる側の親に書く点です。
1:07まずはこの一行を書いて、カードの位置がどう変わるかをブラウザーで確かめてみてください。
1:14縦方向は別プロパティに任せ、横だけを決める、という役割の絞り込みがこの書き方の特徴です。
1:21指定できる主な値を、二回に分けて整理します。
1:25まず中心となる二つです。
1:27センターは、項目をセルの横方向の中央へ寄せます。
1:31項目は自分の幅を保ったまま、真ん中に小さく収まるイメージです。
1:36ストレッチは逆に、項目をセルの幅いっぱいに伸ばします。
1:41カードの幅が列ごとにそろって見えるのは、こちらを選んだときです。
1:46同じ並びでも、中央に集めるか、枠まで広げるかで印象は大きく変わります。
1:52この二つの違いを自分の言葉で言い分けられることが、理解の第一歩になります。
1:58幅の違うカードを並べたとき、この差は特に目立ちます。
2:02そろえたいのか、余白を残したいのかを先に決めてください。
2:07続いて、端へ寄せる二つの値です。
2:10スタートは始まり側、エンドは終わり側へ項目を寄せます。
2:14横書きの日本語や英語では、始まり側は左、終わり側は右に当たります。
2:19レフトやライトと直接書くのではなく、文章の進む方向を基準に考えるのが、スタートとエンドの考え方です。
2:27そのため、右から左へ書く言語では、見た目の左右が入れ替わることもあります。
2:33普段の制作では、センターとストレッチに加えて、この二つを知っておけば十分です。
2:39まずは四つの値を実際に切り替えて、カードが左、中央、右、そして幅いっぱい、
2:43とどう動くかを目で追ってみてください。
2:48初期値と継承を確認します。
2:50仕様上の初期値はレガシーです。
2:53ただし、仕様上の初期値と、ブラウザーの既定スタイルで実際に見えている値が、
2:57必ずしも同じとは限りません。
3:01要素に既定のスタイルや別のクラスが付いていれば、その結果が優先されることもあります。
3:08そして通常の継承はしません。
3:11つまり、親要素に書いたからといって、その指定が子の要素へ自動で引き継がれるわけではありません。
3:19置き方を決めたい並びの親、そのものへ直接書く必要があります。
3:24汎用値では、インヘリットは親の計算値、イニシャルは仕様の初期値に戻す指定です。
3:30アンセットは、継承しないプロパティなのでイニシャルとして扱われます。
3:36実例を見ていきます。
3:38まずエイチティーエムエルの用意です。
3:41ステージという土台の箱の中にデモの箱を置き、その中に項目と書かれた小さなカードを六つ入れます。
3:48頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
3:54親と子の構造そのものが例の一部です。
3:57ジャスティファイ・アイテムズを書くのは親であるデモの方で、動くのは子である項目の方、
4:02という役割分担を意識してください。
4:07次のシーエスエスで土台を整えてから、最後に主役の一行を加えます。
4:12項目を六つにしたのは、三列で二行の並びになり、すべてのセルで横方向の置き方を比べやすいためです。
4:20次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
4:26ステージとデモ、項目には、余白や枠線、背景色といった土台の見た目を先に整えます。
4:32デモにはディスプレイ、グリッドを指定して三列の並びにし、ギャップで間隔を空け、
4:37最小の高さも確保します。
4:41そして最後に、今回変更するプロパティとして、ジャスティファイ・アイテムズ、
4:45センターを追加します。
4:49これで六つの項目が、それぞれのセルの横方向の中央に寄ります。
4:54土台は違いを見せるための下準備で、横の置き方を決めているのは最後の一行です。
5:00同じデモが複数回登場する場合は、通常は後の同じ詳細度の宣言が優先される、
5:05という決まりも思い出してください。
5:09値を変えて比べてみましょう。
5:11最後のジャスティファイ・アイテムズの値だけを、センターからストレッチへ置き換えます。
5:17ファイルを保存してブラウザーを再読み込みすると、今度は項目がセルの幅いっぱいに伸びて、
5:21列ごとに幅がそろいます。
5:24比較のコツは、変えるのはこの値ひとつだけにすることです。
5:28ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。
5:33中央に寄っていたカードが、枠まで広がる様子を目で追うと、二つの値の役割がはっきり分かります。
5:39余裕があれば、スタートやエンドへも変えてみてください。
5:43寄る方向が変わる様子まで見ると、値の意味がさらに深まります。
5:47間違えやすい点を整理します。
5:49名前が似たジャスティファイ・コンテントは、グリッド全体の余白の配り方を決めるもので、
5:53各セル内の置き方とは対象が違います。
5:57セルが動くのか、セル内の項目が動くのか、で見分けてください。
6:02また、フレックスボックスでは、この指定で主軸の項目を個別に揃えることはできません。
6:08効かないと感じたら、まず親がグリッドかどうかを確認しましょう。
6:12関連として、縦横をまとめるプレイス・アイテムズ、そして項目ごとに例外を作るジャスティファイ・セルフも覚えておくと便利です。
6:21全体は親で決め、一つだけ子で上書きする、という使い分けができます。
6:26効かないときの確認手順です。
6:28まず親の表示方式がグリッドになっているか、列のトラックが定義されているかを見てください。
6:35ここが違うと、値を変えても置き方は変わりません。
6:39次に開発者ツールで、ネットワークからスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認します。
6:50スタイルズで宣言が無効扱いになっていたり、別の宣言に上書きされたりしていないかも見ましょう。
6:57コンピューテッドで最終的な値を確認し、グリッド表示で明示トラックと暗黙トラックを見分けると原因を絞りやすくなります。
7:07三百二十ピクセル程度の画面幅や文字の拡大でも、内容を利用できるかまで確かめてください。
7:13最後に互換性とまとめです。
7:15主要ブラウザーで古くから対応し、クロームは五十二以降、エッジは十二以降、
7:19ファイアフォックスは二十以降、サファリは九以降という記録です。
7:24アンドロイド版クロームは五十二以降、アイオーエス版サファリは九以降です。
7:28ただしグリッド文脈では、クローム五十七以降、サファリ十点一以降など、値や文脈ごとに開始版が異なる点には注意してください。
7:36練習は、まずセンターとストレッチの違いを自分の言葉で説明し、次に値だけを一つずつ変えて結果を比べることです。
7:43まとめます。
7:44ジャスティファイ・アイテムズは各セル内の横方向の揃え、初期値はレガシーで継承はしません。
7:50親がグリッドであることを確かめてから使う、この順番を忘れないでください。
7:54お疲れさまでした。

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

この動画で学べること

justify-itemsの役割と主な指定値を解説。各カードがセルの中央へ寄るか、セル幅へ伸びるかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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