SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、テキストアラインです。
  4. 0:06これは、箱の中で文章の行を左、中央、右のどこに揃えるかを決めるプロパティです。
  5. 0:11見出しを中央に置いたり、本文を行頭に揃えたりするときに、毎日のように使います。
  6. 0:17今回は、センターで中央揃えにする例と、スタートで行頭揃えにする例を比べながら、
  7. 0:23基本の書き方から効かないときの注意点まで、初心者向けに分かりやすく解説します。
  8. 0:28一番大切なのは、動くのは行の中身であって、箱そのものではない、という点です。
  9. 0:34ここを最初に押さえておくと、設定が効かないと感じる場面でも、原因が見つけやすくなります。
  10. 0:40左揃え、中央揃え、右揃えの違いを、実際の画面で比べながら覚えていきましょう。
  11. 0:46まず基本の書き方です。
  12. 0:47セレクターのあとにプロパティ名、テキストアラインを書き、コロンを挟んで値を一つ書き、
  13. 0:51最後にセミコロンを付けます。
  14. 0:54スライドの例では、センターを指定しているので、デモというクラスを持つ要素の中の文章が、
  15. 0:58行ごとに中央へ揃います。
  16. 1:01指定する相手は、文章を包んでいるブロック要素です。
  17. 1:04文字そのものではなく、文章の入れ物に指定する、というイメージを持つと分かりやすくなります。
  18. 1:10セレクターとクラス名が合っているかを確認しながら、まずはこの形をそのまま書いて、
  19. 1:14ブラウザーで中央揃えになる様子を確かめてみましょう。
  20. 1:18この一行が、今回のすべての実験の出発点になります。
  21. 1:21代表的な値を紹介します。
  22. 1:23レフトは左端、ライトは右端に各行を揃えます。
  23. 1:27センターは行を箱の中央に寄せ、見出しやボタンの文字で特によく使われます。
  24. 1:32ジャスティファイは、行の左右の端がそろうように文字の間隔を調整する、両端揃えです。
  25. 1:38新聞や本のような見た目になりますが、最終行は通常、行頭側に揃います。
  26. 1:44日本語の本文では、ジャスティファイにすると行ごとに間隔が変わり、かえって読みにくくなる場合もあるので、
  27. 1:49用途に合わせて選んでください。
  28. 1:54まずはレフト、センター、ライトの三つを使い分けることが、最初の一歩です。
  29. 1:59もう二つ、大切な値があります。
  30. 2:02スタートは行の始まり側、エンドは行の終わり側に揃えます。
  31. 2:06日本語や英語のように左から右へ読む言語では、スタートはレフトと同じ左側、
  32. 2:11エンドはライトと同じ右側になります。
  33. 2:15一方、アラビア語のように右から左へ読む言語では、スタートは右側になります。
  34. 2:21つまり、スタートとエンドは文字の進む方向に合わせて自動で切り替わる、論理的な指定です。
  35. 2:28多言語対応のサイトを作る予定がある場合は、レフトやライトよりも、スタートとエンドを優先すると、
  36. 2:34言語ごとに書き換える手間が減ります。
  37. 2:39基本情報を確認します。
  38. 2:41テキストアラインの仕様上の初期値は、文字の方向によってスタート相当になる、
  39. 2:45少し特殊な決まり方をしています。
  40. 2:49ブラウザーの既定の見た目も、通常は行頭揃えです。
  41. 2:53そして、このプロパティは通常、継承します。
  42. 2:56親要素にセンターと書けば、その中にある見出しや段落の文章も中央揃えになります。
  43. 3:02逆に、子要素でスタートと書き直せば、その部分だけ行頭揃えに戻せます。
  44. 3:08インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。
  45. 3:14最終的な値は、開発者ツールのコンピューテッドで確認する習慣を付けましょう。
  46. 3:20継承の仕組みを知ると、書く場所を工夫して、指定を少なくできます。
  47. 3:25ここからは記事の実例です。
  48. 3:27エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
  49. 3:35デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容で、
  50. 3:39折り返して複数行になる長さにしてあります。
  51. 3:44複数行あると、各行の始まりと終わりの位置の違いがはっきり見えるため、揃え方の比較には最適です。
  52. 3:51頭の部分では、スタイルシートをリンクで読み込んでください。
  53. 3:56親と子の構造も例の一部なので、この土台は変えずに固定し、次のスライドで変える一行の効果だけを観察します。
  54. 4:04土台のシーエスエスです。
  55. 4:06ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
  56. 4:12最後の行でテキストアラインにセンターを指定すると、デモの中の各行が箱の中央に集まります。
  57. 4:19一行目も二行目も、左右にほぼ同じ余白が残る形です。
  58. 4:23ポイントは、デモの箱自体はステージの中で動いておらず、変わったのは箱の中の行の位置だけ、
  59. 4:27という点です。
  60. 4:31ファイルを保存してブラウザーを再読み込みし、枠の位置はそのままで、文章だけが中央に寄る様子をよく観察してください。
  61. 4:40色や余白の土台は、行の動きを見やすくするためのもので、主役は最後の一行です。
  62. 4:46次に最後の行だけを、センターからスタートへ置き換えます。
  63. 4:51すると、同じ箱の中で、各行が一斉に行頭側、つまり左側に揃い直します。
  64. 4:56箱の幅も、枠の位置も、背景色も一切変わっていません。
  65. 5:01変わったのは行の揃え方だけです。
  66. 5:03この対比が、テキストアラインの役割を一番よく表しています。
  67. 5:08中央揃えは目立たせたい短い見出し向き、行頭揃えは長い本文向き、という使い分けも、
  68. 5:13この実験を通して実感できるはずです。
  69. 5:18変更後はファイルを保存してブラウザーを再読み込みし、二つの見え方を自分の言葉で説明できるか試してみてください。
  70. 5:27間違えやすい点を確認します。
  71. 5:30一番多い誤解は、テキストアラインのセンターで箱そのものが中央に移動すると思ってしまうことです。
  72. 5:37実際には、箱の幅が親いっぱいに広がっている場合、行を中央にしても箱は動きません。
  73. 5:44幅のある箱自体を中央に置きたいときは、幅を指定したうえで、マージンインラインにオートを指定する方法を検討してください。
  74. 5:53指定が効かないと感じたら、開発者ツールで、ネットワーク、エレメンツ、スタイルズ、
  75. 6:00コンピューテッドの順に調べ、対象のクラスや別の宣言による上書きがないかを確認しましょう。
  76. 6:06狭い画面幅や文字拡大でも読めるかの確認も大切です。
  77. 6:10特に、親から継承した値が残っていないか、という視点は忘れやすいので注意してください。
  78. 6:17ブラウザー互換性を確認します。
  79. 6:20記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
  80. 6:26エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
  81. 6:32アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
  82. 6:38値ごとに見ても、センターはクローム一以降、スタートはサファリ三点一以降など、
  83. 6:42古くから使えます。
  84. 6:46とても歴史の長いプロパティなので、今回比べたセンターとスタートを含む基本の値は、
  85. 6:51安心して使えると考えてよいでしょう。
  86. 6:56ただし、新しい値を使う場合は、値ごとの対応も確認してください。
  87. 7:01対応表は、プロパティ本体と値ごとの記録を分けて読むことが大切です。
  88. 7:06最後に練習とまとめです。
  89. 7:08まとめます。
  90. 7:09テキストアラインは、ブロックの中で行の揃え方を決めるプロパティで、親から子へ継承しました。
  91. 7:16センターで中央揃え、スタートで行頭揃えになる例を比べ、箱は動かず行だけが動くことを確認できた点が大切でした。
  92. 7:24練習として、まず二つの値の違いを言葉で説明し、次に文章量や親の幅だけを変えて、
  93. 7:29結果がどう変わるかを比べてみてください。
  94. 7:33お疲れさまでした。
  95. 7:35関連するフォントやラインハイトも一緒に学ぶと、文章まわりの整え方の理解がさらに深まります。
  96. 7:42値を一つずつ変えて比べる練習を重ねることが、確かな理解への近道です。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

text-alignの役割と主な指定値を解説。同じ箱の中で、文章の行が中央揃えから行頭揃えへ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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