SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、アライン・セルフです。
  4. 0:06これはフレックスボックスやグリッドの中で、特定の項目だけ、交差軸方向の揃え方を変えるプロパティです。
  5. 0:14親に指定するアライン・アイテムズは、すべての項目をまとめて揃えますが、アライン・セルフは、
  6. 0:19対象の項目ひとつだけに効きます。
  7. 0:24たとえばほかの項目は上に揃えたまま、このカードだけ下端や中央に置きたい、
  8. 0:28といった細かな調整ができます。
  9. 0:32横並びなら上下方向、縦並びなら左右方向が対象になります。
  10. 0:36基本の書き方、値の意味、実例での動き、効かないときの確認まで、順番に見ていきましょう。
  11. 0:43まず基本の書き方です。
  12. 0:45セレクターのあとに、アライン・セルフ、コロン、値、セミコロンを書きます。
  13. 0:51スライドの例では、デモというクラスを持つ項目に、フレックス・エンドを指定しています。
  14. 0:57ここで大切なのは書く場所です。
  15. 1:00アライン・セルフは親ではなく、位置を変えたい子、つまりフレックスアイテムやグリッドアイテム自身に書きます。
  16. 1:08親にはあらかじめ、ディスプレイ、フレックスやグリッドを指定しておく必要があります。
  17. 1:14親が全体の並べ方を用意し、子が自分の位置を上書きする、という役割分担をまず覚えてください。
  18. 1:21値にピクセルなどの単位は付けず、キーワードで指定する点も特徴です。
  19. 1:27指定できる主な値を整理します。
  20. 1:29フレックス・スタートは交差軸の開始側、横並びなら上側に寄ります。
  21. 1:35フレックス・エンドは終了側、横並びなら下側に寄ります。
  22. 1:40センターは中央に置きます。
  23. 1:42ベースラインは、文字のベースライン、つまり文字が乗る見えない線でほかの項目と揃えます。
  24. 1:50ストレッチは、項目の大きさが決まっていないときに、交差軸いっぱいに伸ばします。
  25. 1:57グリッドでは、スタートやエンドという書き方も使えますが、考え方は同じで、
  26. 2:02セルの中でどこに置くかを表します。
  27. 2:07まずは上、中央、下の三つから覚えると分かりやすいです。
  28. 2:11少し特殊な二つの値を、もう少し詳しく見ます。
  29. 2:15オートは、アライン・セルフの初期の状態で、親のアライン・アイテムズの値をそのまま引き継ぐ、
  30. 2:19という意味です。
  31. 2:23親に何も指定がなければ、結果としてストレッチに近い扱いになります。
  32. 2:28ストレッチは便利ですが、条件があります。
  33. 2:31たとえば横並びで高さがすでに決まっている項目は、それ以上伸びません。
  34. 2:36幅や高さを固定していない項目だけが、空いた領域いっぱいに広がります。
  35. 2:41オートに戻せば親全体の設定に従う、ストレッチは大きさが未指定のときだけ伸びる、
  36. 2:45とセットで覚えてください。
  37. 2:49迷ったら、まずオートで親の動きを確認するとよいでしょう。
  38. 2:53初期値と継承を確認します。
  39. 2:55初期値はオートです。
  40. 2:57何も指定しなければ、項目は親のアライン・アイテムズに従って揃います。
  41. 3:03そして通常の継承はしません。
  42. 3:05親要素にアライン・セルフを書いても、子へ自動で受け継がれることはありません。
  43. 3:12あくまで、フレックスやグリッドの直接の子である項目ごとに指定するプロパティだと考えてください。
  44. 3:20またイニシャルを指定すると初期値のオートに戻ります。
  45. 3:25インヘリットなどの共通キーワードの考え方は、ほかのプロパティと同じです。
  46. 3:31親全体はアライン・アイテムズ、個別の上書きはアライン・セルフ、という使い分けが、
  47. 3:36この項目の要点です。
  48. 3:40実例を見ていきます。
  49. 3:42まずエイチティーエムエルの用意です。
  50. 3:45ステージという親の箱の中に、項目が三つ入っています。
  51. 3:49一つ目と三つ目は通常の項目、二つ目だけが対象で、アイテムとデモ、二つのクラスを持っています。
  52. 3:56頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
  53. 4:02親と子の構造そのものが例の一部です。
  54. 4:05この例では、二番目に書かれた対象だけを、シーエスエスで下端や中央へ動かします。
  55. 4:11三つの項目は横並びになる想定で、まずはすべて同じ揃え方になっている状態がスタート地点です。
  56. 4:18対象だけがどうずれるかに注目してください。
  57. 4:22次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  58. 4:27ステージはディスプレイ、フレックスとし、隙間はれい点ごレム、項目は横に並びます。
  59. 4:34ステージには高さの目安も用意し、上下に動ける余白を作ります。
  60. 4:39ステージや項目には、余白や枠線、背景色といった土台の見た目を先に整えます。
  61. 4:45そして主役は最後の行で、デモにアライン・セルフ、フレックス・エンドを指定します。
  62. 4:52すると二番目の対象だけが下端へ移動して表示されます。
  63. 4:56ほかの二つは元の位置のままです。
  64. 4:59土台は共通なので、最後の指定だけに注目してください。
  65. 5:03枠線が太く背景が付いた対象が下に来るので、動いたことがひと目で分かります。
  66. 5:09値を変えて比べてみましょう。
  67. 5:12最後のアライン・セルフの値だけを、フレックス・エンドから、センターへ置き換えます。
  68. 5:19ファイルを保存してブラウザーを再読み込みすると、二番目に書かれた対象が、
  69. 5:23今度は上下の中央へ移動します。
  70. 5:28ほかの項目の位置は変わりません。
  71. 5:31エイチティーエムエルは一切変えていません。
  72. 5:35値ひとつで、端に置くか中央に置くかが切り替わる点が、アライン・セルフの分かりやすい特徴です。
  73. 5:43比較のコツは、変えるのはこの値ひとつだけにすることです。
  74. 5:48下端のフレックス・エンドと、中央のセンター、この二つを比べるだけでも、働きは十分につかめます。
  75. 5:56間違えやすい点を整理します。
  76. 5:58いちばん多いのは、親と子の混同です。
  77. 6:01アライン・セルフを親に書いても、項目の個別指定にはなりません。
  78. 6:06親全体を揃えたいときはアライン・アイテムズ、ひとつだけ変えたいときは子のアライン・セルフを使います。
  79. 6:14もう一つ、親がフレックスやグリッドになっていないと、アライン・セルフ自体が効きません。
  80. 6:21さらに、ストレッチを指定しても、項目の高さや幅が固定されていると伸びない点も注意してください。
  81. 6:28余白を作るマージンのオート指定と組み合わせた場合も、見え方が変わることがあります。
  82. 6:34誰に、何を書いたかを確認する習慣が大切です。
  83. 6:38効かないときの確認手順です。
  84. 6:40まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。
  85. 6:46次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。
  86. 6:51スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。
  87. 6:56コンピューテッドで最終的なアライン・セルフの値を確認し、親の表示方式がフレックスかグリッドになっているか、
  88. 7:01親に十分な高さや幅があるかも調べましょう。
  89. 7:06最後に、三百二十ピクセル程度の画面幅や、キーボード操作でも内容を利用できるかを確かめてください。
  90. 7:13ひとつずつ切り分けることで、原因を特定しやすくなります。
  91. 7:17最後に互換性とまとめです。
  92. 7:19フレックスボックスのアライン・セルフは、現在の主要ブラウザーで広く対応しており、
  93. 7:23グリッドでも同じ考え方で使えます。
  94. 7:27古いブラウザーではベンダープレフィックスが必要だった時期もありますが、学習用の現代的な環境では標準の書き方で問題ありません。
  95. 7:37練習は、まずフレックス・エンドとセンターの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。
  96. 7:45まとめます。
  97. 7:46アライン・セルフは、親のアライン・アイテムズを、項目ひとつだけ上書きする指定で、
  98. 7:50初期値はオート、継承はしません。
  99. 7:54関連するアライン・アイテムズやアライン・コンテンツもあわせて確認すると理解が深まります。
  100. 8:01お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

align-selfの役割と主な指定値を解説。対象の項目だけが交差軸の端または中央へ移動します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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