text-align

テキスト・フォント

テキストの水平方向の配置を指定するプロパティです。left、right、center、justifyなどの値があり、文章の見た目や読みやすさに大きく影響します。ブロック要素内のテキストやインライン要素に適用されます。

構文

Syntax
text-align: left | right | center | justify | start | end
🎮

インタラクティブデモ

コントロール

プレビュー

テキストの配置を変更できます。左寄せ、中央寄せ、右寄せ、両端揃えが選択できます。

生成されたCSS

.element { text-align: left; }

コード例

1

text-align: left;
実行結果
text-align: center - 中央揃え

このテキストは中央に配置されます

💡 見出し、ボタンテキスト、キャッチコピーでよく使用

左揃え(デフォルト)

2

text-align: center;
実行結果
text-align: justify - 両端揃え

両端揃えのテキストです。長い文章の場合、左右の端が揃うように文字間隔が自動調整されます。新聞や雑誌のような整然とした見た目になります。

💡 文章が短いと文字間隔が不自然になる場合があるので注意

中央揃え

3

text-align: justify;
実行結果
text-align: right - 右揃え

このテキストは右端に揃えられます

💡 日付、価格表示、署名などでよく使用

両端揃え

4

text-align: right;
実行結果
配置の比較

left: 左揃え(デフォルト)

center: 中央揃え

right: 右揃え

💡 start/endは書字方向(RTL/LTR)に応じて動的に変わる

右揃え

💡 TIPS

startとendは国際化対応。justifyは英語以外では注意が必要。

関連プロパティ

ブラウザサポート

全ブラウザ対応