SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

align-itemsの役割と主な指定値を解説。高さが異なる項目の揃い方が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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