text-align
text-align はテキストやインラインコンテンツの水平方向の揃え方を制御する基本的なプロパティです。left、right、center、justify の4つの基本値に加え、論理値の start と end もサポートしています。多言語サイトでは論理値を使用することで、テキスト方向に応じた適切な配置が自動的に行われます。
概要
text-align はテキストやインラインコンテンツの水平方向の揃え方を制御する基本的なプロパティです。left、right、center、justify の4つの基本値に加え、論理値の start と end もサポートしています。多言語サイトでは論理値を使用することで、テキスト方向に応じた適切な配置が自動的に行われます。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.center { text-align: center; }
.justify { text-align: justify; }
.logical { text-align: start; } 実務での使いどころ
-
コンテンツの配置制御
見出しを中央揃え、本文を左揃え、引用文を右揃えなど、コンテンツの種類に応じた適切なテキスト配置を設定します。
注意点
- text-align: justify は短い行で不自然な空白が生じることがあるため、十分な幅のあるコンテナで使用してください。
アクセシビリティ
- justify は単語間の不均等な間隔により、ディスレクシアのあるユーザーにとって読みづらくなる場合があります。