SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、アライン・コンテンツです。
  4. 0:06これは、項目が複数行に折り返したときに、行の集まり全体をコンテナーの中でどう配るかを決めるプロパティです。
  5. 0:14一行一行の中身ではなく、行全体と余った空間の関係を調整するのが役割です。
  6. 0:20この動画では、行を上下いっぱいに広げるスペース・ビトウィーンと、中央に集めるセンターを比べて、
  7. 0:25見た目がどう変わるかを確認します。
  8. 0:30基本の書き方、主な値、効くための条件、実例、効かないときの確認まで、順番に見ていきましょう。
  9. 0:37フレックスボックスでもグリッドでも使える、大切な配置の指定です。
  10. 0:41高さに余裕のあるカード一覧やギャラリーで、この違いは特に分かりやすく現れます。
  11. 0:47まず基本の書き方です。
  12. 0:49セレクターのあとに、アライン・コンテンツ、コロン、値、セミコロンを書きます。
  13. 0:56スライドの例では、デモというクラスを持つ要素にスペース・ビトウィーンを指定しています。
  14. 1:03ここで大切なのは書く場所です。
  15. 1:05このプロパティは、並べられる子ではなく、並べ方を決める親のコンテナーに書きます。
  16. 1:12親がフレックスやグリッドとして行を作り、その行の集まり全体の位置をこの一行で調整する、
  17. 1:17という役割分担を覚えてください。
  18. 1:22子に書いても行全体は動かないので、まずは親子関係を確認する習慣をつけましょう。
  19. 1:29書き方自体はシンプルなので、値の意味を理解することに集中しましょう。
  20. 1:34指定できる主な値を確認します。
  21. 1:37スタートは行の集まりを開始側の端へ寄せ、エンドは終了側の端へ寄せます。
  22. 1:43センターは中央に集めます。
  23. 1:45ストレッチは、行の高さが自動のときに余った空間ぶんだけ行を引き伸ばします。
  24. 1:51スペース・ビトウィーンは最初と最後の行を両端に置き、余白を行と行の間へ均等に配ります。
  25. 1:58ほかに、周囲へ余白を配るスペース・アラウンドや、全体に均等に配るスペース・イーブンリーもあります。
  26. 2:06値の名前は、余白をどこへ置くかを表していると考えると覚えやすくなります。
  27. 2:12迷ったときは、端寄せ、中央、均等配分という三つの考え方に分けて選ぶと整理できます。
  28. 2:19初期値と継承を確認します。
  29. 2:21アライン・コンテンツの初期値はノーマルです。
  30. 2:24ノーマルは文脈によって扱いが変わり、フレックスやグリッドではストレッチに近い既定の振る舞いとして解釈されることがあります。
  31. 2:34通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。
  32. 2:40配置を変えたいコンテナーごとに指定してください。
  33. 2:43また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。
  34. 2:49ブラウザーの既定スタイルや別のクラスが重なると見た目が変わることもあるので、
  35. 2:53最終的には開発者ツールで確認しましょう。
  36. 2:58このプロパティが効く条件を整理します。
  37. 3:01第一に、行が複数あることが前提です。
  38. 3:04フレックスボックスならフレックス・ラップで折り返しを許可し、項目が二行以上になる必要があります。
  39. 3:12第二に、コンテナーの高さなど、交差軸の方向に余った空間が必要です。
  40. 3:18行の集まりがコンテナーいっぱいに広がっていると、配る余白自体がありません。
  41. 3:24逆に言えば、一行しかない場面や、余白がない場面で値が変わって見えなくても、
  42. 3:28書き方が間違っているとは限りません。
  43. 3:33条件がそろっているかを先に点検することが、理解への近道です。
  44. 3:38グリッドでも考え方は同じで、トラック全体をブロック方向へどう配るかが対象になります。
  45. 3:45実例を見ていきます。
  46. 3:46まずエイチティーエムエルの用意です。
  47. 3:49ステージという外側の箱の中にデモがあり、その中に項目が六つ入っています。
  48. 3:55頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
  49. 4:00親と子の構造そのものが例の一部です。
  50. 4:03このあとデモをフレックスボックスにして折り返しを許可するので、六つの項目は幅に収まらず、
  51. 4:07複数行に分かれて並びます。
  52. 4:12行が複数できる構成だからこそ、アライン・コンテンツで、行全体を広げたり中央に集めたりする違いを、
  53. 4:17一つの画面で観察できるようになっています。
  54. 4:22項目が六つあることで、折り返し後に行が複数できる様子を確かめやすくなっています。
  55. 4:28次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  56. 4:33デモはディスプレイ、フレックスで並べ、フレックス・ラップのラップで折り返しを許可します。
  57. 4:41高さは18レムと大きめに取り、行の上下に配れる余白を意図的につくっています。
  58. 4:47項目のフレックス・ベーシスは7レムなので、六つの項目は複数行に分かれます。
  59. 4:53そして主役は最後の行で、アライン・コンテンツにスペース・ビトウィーンを指定し、
  60. 4:58最初の行と最後の行を上下の端へ広げています。
  61. 5:03土台の指定は違いを見やすくするためのものです。
  62. 5:06緑色の背景の領域がコンテナーなので、行がその中でどう動くかに注目してください。
  63. 5:13値を変えて比べてみましょう。
  64. 5:15最後のアライン・コンテンツの値だけを、スペース・ビトウィーンからセンターへ置き換えます。
  65. 5:22ファイルを保存してブラウザーを再読み込みすると、上下に広がっていた行の集まりが、
  66. 5:26コンテナーの中央へ寄って集まります。
  67. 5:31エイチティーエムエルや項目の大きさは一切変えていません。
  68. 5:35広げる指定は高さ全体を使ったゆったりした配置に、中央に集める指定はまとまりのある配置になります。
  69. 5:43比較のコツは、いつも通り、変える値を一つだけにすることです。
  70. 5:48ほかの指定を同時に変えると、違いの原因が分からなくなります。
  71. 5:52間違えやすい点を整理します。
  72. 5:55もっとも混同しやすいのはアライン・アイテムズとの違いです。
  73. 5:59アライン・コンテンツが複数行の集まり全体を対象にするのに対し、アライン・アイテムズは一行の中での各項目の揃い方を対象にします。
  74. 6:08たとえば各項目の中身を中央に寄せたい場面でアライン・コンテンツだけを変えても、
  75. 6:12期待した動きにはなりません。
  76. 6:16また、フレックスの親へ書く指定なのか、子へ書く指定なのかも確認してください。
  77. 6:22一行しかないレイアウトで効かないと感じたら、まず行の数と余白の有無を疑うことが大切です。
  78. 6:28名前が似ているプロパティほど、対象の大きさの違いで区別すると間違えにくくなります。
  79. 6:34効かないときの確認手順です。
  80. 6:37まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
  81. 6:44次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
  82. 6:50スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。
  83. 6:56コンピューテッドでアライン・コンテンツの最終的な値を確認し、あわせて親の表示方式、
  84. 7:02折り返しの設定、高さに余りがあるかも調べましょう。
  85. 7:07最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容が利用できるかを確かめてください。
  86. 7:14一行ずつ条件を直して再読み込みし、変化が出た時点で原因が絞り込めます。
  87. 7:20最後に互換性とまとめです。
  88. 7:22アライン・コンテンツは、記事ではクローム29以降、エッジ12以降、ファイアフォックス28以降、
  89. 7:27サファリ9以降で対応すると紹介されています。
  90. 7:32フレックスの文脈ではクローム21以降、グリッドの文脈ではクローム57以降、
  91. 7:38サファリ10.1以降などの記録もあり、現在の主要ブラウザーでは広く使えます。
  92. 7:43練習は、まずスペース・ビトウィーンとセンターの違いを自分の言葉で説明し、
  93. 7:48次に文章量や親の幅だけを変えて結果を比べることです。
  94. 7:53まとめます。
  95. 7:53アライン・コンテンツは複数行全体の余白の配分で、継承はしません。
  96. 7:58お疲れさまでした。
  97. 8:00関連するアライン・アイテムズやフレックス・ラップもあわせて確認すると、配置の理解がさらに深まります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

align-contentの役割と主な指定値を解説。複数の行全体を上下へ配るか中央へ集めるかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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