SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 8:18動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、プレイス・アイテムズです。
  4. 0:05グリッドでカードを並べたとき、一つひとつのカードがセルの真ん中に来てほしい、
  5. 0:10あるいはセルいっぱいに広がってほしい、と思う場面があります。
  6. 0:14このプロパティは、縦方向の揃え方と横方向の揃え方を、まとめて一行で決めるためのものです。
  7. 0:20もとの二つのプロパティを別々に書く代わりに、短く書ける便利な形だと覚えてください。
  8. 0:25カードが中央へ寄る様子と、領域へ伸びる様子の違いを比べながら、順番に見ていきましょう。
  9. 0:31たとえばログイン画面の小さなパネルを画面の真ん中に置くような場面でも、この発想がそのまま役立ちます。
  10. 0:37まず基本の書き方です。
  11. 0:39書き方はほかのプロパティと同じで、対象のセレクターに、プロパティ名、コロン、
  12. 0:43値、セミコロンを書きます。
  13. 0:47スライドの例では、クラス名デモを持つ要素に、プレイス・アイテムズ、センターと指定しています。
  14. 0:54センターは中央という意味で、これで子要素がセルの縦横の中央に置かれます。
  15. 0:59大切なのは、動かしたい子ではなく、並べる側の親に書く点です。
  16. 1:03まずはこの一行を書いて、カードの位置がどう変わるかをブラウザーで確かめてみてください。
  17. 1:10一行で済むぶん、後から読み返したときにも、縦横をそろえる意図がひと目で伝わる書き方になります。
  18. 1:17指定できる主な値を、二回に分けて整理します。
  19. 1:20まず中心となる二つです。
  20. 1:22センターは、項目をセルの縦と横の中央へ寄せます。
  21. 1:26項目は自分の大きさを保ったまま、真ん中に小さく収まるイメージです。
  22. 1:32ストレッチは逆に、項目をセルの領域いっぱいに伸ばします。
  23. 1:36カードの高さや幅がそろって見えるのは、こちらを選んだときです。
  24. 1:41同じ並びでも、中央に集めるか、枠まで広げるかで印象は大きく変わります。
  25. 1:47この二つの違いを自分の言葉で言い分けられることが、理解の第一歩になります。
  26. 1:53高さの違うカードを並べたとき、この差は特に目立ちます。
  27. 1:58そろえたいのか、遊ばせたいのかを先に決めてください。
  28. 2:02続いて、端へ寄せる値と、値の書き方です。
  29. 2:05スタートは始まり側、エンドは終わり側へ項目を寄せます。
  30. 2:10そして書き方には決まりがあります。
  31. 2:12値を一つだけ書くと、その指定が縦と横の両方に効きます。
  32. 2:17値を二つ書くと、最初が縦方向のアライン・アイテムズ、次が横方向のジャスティファイ・アイテムズとして扱われます。
  33. 2:26たとえばセンター、スタートと書けば、縦は中央、横は始端寄せになります。
  34. 2:32順番を逆にすると結果も変わるので、二つ書くときほど、縦が先、横が後、と声に出して確認してください。
  35. 2:40なお、二つの値が同じときは一つにまとめて書けます。
  36. 2:45無理に二つ書く必要はない、という点も覚えておきましょう。
  37. 2:49初期値と継承を確認します。
  38. 2:51このプロパティ自体の初期値は、元になるアライン・アイテムズとジャスティファイ・アイテムズ、
  39. 2:57それぞれの初期値を参照する形になっています。
  40. 3:02そして通常の継承はしません。
  41. 3:04つまり、親要素に書いたからといって、その指定が子の要素へ自動で引き継がれるわけではありません。
  42. 3:12置き方を決めたい並びの親、そのものへ直接書く必要があります。
  43. 3:16汎用値も使えます。
  44. 3:18インヘリットは親の計算値、イニシャルは初期値に戻す指定、アンセットは継承しないプロパティなのでイニシャルとして扱われます。
  45. 3:28そのため、別の並びにも同じ置き方を使いたいときは、それぞれの親へ改めて書き直す必要があります。
  46. 3:35実例を見ていきます。
  47. 3:37まずエイチティーエムエルの用意です。
  48. 3:40ステージという土台の箱の中にデモの箱を置き、その中に項目と書かれた小さなカードを六つ入れます。
  49. 3:48頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
  50. 3:54親と子の構造そのものが例の一部です。
  51. 3:57プレイス・アイテムズを書くのは親であるデモの方で、動くのは子である項目の方、
  52. 4:02という役割分担を意識してください。
  53. 4:07次のシーエスエスで土台を整えてから、最後に主役の一行を加えます。
  54. 4:13項目の数を六つにしたのは、三列で二行の並びになり、縦方向の置き方まで目で追いやすいためです。
  55. 4:21次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  56. 4:26ステージとデモ、項目には、余白や枠線、背景色といった土台の見た目を先に整えます。
  57. 4:32デモにはディスプレイ、グリッドを指定して三列の並びにし、ギャップで間隔を空け、
  58. 4:36最小の高さも確保します。
  59. 4:40そして最後に、今回変更するプロパティとして、プレイス・アイテムズ、センターを追加します。
  60. 4:47これで六つの項目が、それぞれのセルの縦横中央に寄ります。
  61. 4:51土台は違いを見せるための下準備で、置き方を決めているのは最後の一行です。
  62. 4:57同じデモが複数回登場する場合は、通常は後の同じ詳細度の宣言が優先される、
  63. 5:02という決まりも合わせて思い出してください。
  64. 5:06値を変えて比べてみましょう。
  65. 5:08最後のプレイス・アイテムズの値だけを、センターからストレッチへ置き換えます。
  66. 5:13ファイルを保存してブラウザーを再読み込みすると、今度は項目がセルの領域いっぱいに伸びて、
  67. 5:17高さと幅がそろいます。
  68. 5:20比較のコツは、変えるのはこの値ひとつだけにすることです。
  69. 5:24ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。
  70. 5:29中央に寄っていたカードが、枠まで広がる様子を目で追うと、二つの値の役割がはっきり分かります。
  71. 5:35余裕があれば、スタートやエンドへも変えてみてください。
  72. 5:38寄る方向が変わる様子まで見ると、値の意味がさらに深まります。
  73. 5:42実際の使いどころと注意点を整理します。
  74. 5:45このプロパティが力を発揮するのはグリッドです。
  75. 5:49セルごとに縦横の置き方を決めるので、中央寄せのような指定が素直に効きます。
  76. 5:55一方でフレックスボックスでは注意が必要です。
  77. 5:58元のプロパティの一つであるジャスティファイ・アイテムズは、フレックスの主軸方向の揃え方としては働きません。
  78. 6:07中央に寄らないからと値を疑う前に、まず親の表示方式がグリッドかどうかを確認してください。
  79. 6:14縦横をそろえたいのか、一方向だけでよいのか、目的に合わせて元のプロパティを分けて書く場面もあります。
  80. 6:22名前が似たジャスティファイ・コンテントとの混同も起きやすいので、項目そのものの置き方かどうかで見分けてください。
  81. 6:31効かないときの確認手順です。
  82. 6:33まず親の表示方式がグリッドになっているかを見てください。
  83. 6:37ここが違うと、値を変えても置き方は変わりません。
  84. 6:41次に開発者ツールで、ネットワークからスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認します。
  85. 6:52スタイルズで宣言が無効扱いになっていたり、別の宣言に上書きされたりしていないかも見ましょう。
  86. 6:59コンピューテッドで最終的な値を確認し、グリッド表示でトラックの様子を追うと原因を絞りやすくなります。
  87. 7:07三百二十ピクセル程度の画面幅でも内容を利用できるかまで確かめてください。
  88. 7:13開発者ツールのグリッド表示では、明示したトラックと自動でできたトラックを見分けると、
  89. 7:17思わぬ行や列に気付けます。
  90. 7:21最後に互換性とまとめです。
  91. 7:24主要ブラウザーで広く対応し、クロームは五十九以降、エッジは七十九以降、ファイアフォックスは四十五以降、
  92. 7:29サファリは十一以降という記録です。
  93. 7:35アンドロイド版クロームは五十九以降、アイオーエス版サファリは十一以降です。
  94. 7:41グリッドの文脈でもフレックスの文脈でも、同じ範囲が示されています。
  95. 7:46練習は、まずセンターとストレッチの違いを自分の言葉で説明し、次に値だけを一つずつ変えて結果を比べることです。
  96. 7:55まとめます。
  97. 7:56プレイス・アイテムズは縦と横の一括指定、継承はしません。
  98. 8:01親がグリッドであることを確かめてから使う、この順番を忘れないでください。
  99. 8:06お疲れさまでした。
  100. 8:08次に学ぶジャスティファイ・アイテムズは、このプロパティの片方を単独で担うものです。
  101. 8:15合わせて比べると理解が深まります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

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

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