CSS辞書

text-align

テキスト・フォント

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

構文

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

Tailwindでは

text-lefttext-align: left
text-centertext-align: center
text-righttext-align: right
text-justifytext-align: justify

書字方向対応の論理値は text-start / text-end。

インタラクティブデモ

Try it

コントロール

プレビュー

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

生成された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は英語以外では注意が必要。

🤖 AIがよく間違えるポイント

text-alignが配置するのは「インラインコンテンツ」であり、ブロック要素自体の中央寄せ(margin-inline: auto)とは別物です。この混同はAIにも頻発します。またtext-align: justify(両端揃え)は日本語では約物や英単語の周りで不自然な空きを生みやすく、扱いが難しい指定です。

💬 AIへの頼み方

「ボックス自体を中央に、その中のテキストは左寄せ」を、text-alignとmargin autoの役割分担で実装して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
1+
Firefox
1+
Safari
1+
Edge
12+