テキスト揃え（左・中央・右）
text-aligntext-align-lasttext-justify
インラインコンテンツ（テキスト・インライン要素）の水平方向の揃え方を制御するプロパティです。ブロック要素自体の中央揃えは margin: auto を使います。
デモ：各テキスト揃えの比較
text-align: left
日本語テキストの左揃えの例です。デフォルトの挙動はleftですが、RTL言語では右揃えになります。start を使うと言語方向に自動追従します。
text-align: center
中央揃えの例です。見出しやキャッチコピーによく使われます。長い文章には向きません。
text-align: right
右揃えの例です。価格表示や日付など右側に寄せたいコンテンツに使います。
text-align: justify
両端揃えの例です。新聞や雑誌のように両端を揃えたいときに使います。最後の行は左揃えになります。英語テキストでは単語間のスペースが不均等になることがあります。
デモ：text-align-last
justify のみ
両端揃えの段落です。最後の行は左揃えのままになります。これがデフォルトの動作です。
justify + text-align-last: center
両端揃えの段落です。text-align-last: center を指定すると最後の行が中央揃えになります。
コード例
/* 基本的なテキスト揃え */
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
/* 論理プロパティ（RTL対応・推奨） */
.start { text-align: start; } /* LTRなら左、RTLなら右 */
.end { text-align: end; } /* LTRなら右、RTLなら左 */
/* 両端揃えの最終行だけ中央に */
.article {
text-align: justify;
text-align-last: center;
}
/* 縦書き要素内での水平位置（vertical-align） */
span {
vertical-align: middle; /* top / middle / bottom / baseline */
}比較：中央揃えの方法
| 方法 | text-align: center | margin: 0 auto |
|---|---|---|
| 対象 | インラインコンテンツ（テキスト・inline要素） | ブロック要素自体 |
| 使用例 | 段落内のテキストを中央に | div・画像などのブロック要素を中央に |
| 必要条件 | 親要素に指定すればOK | width の指定が必要 |
| 子要素への影響 | 子のインラインコンテンツにも継承 | その要素のみに適用 |
比較：left vs start
| 値 | start / end | left / right |
|---|---|---|
| RTL対応 | ✅ 言語方向に自動追従 | ❌ 常に物理的な左/右 |
| 国際化 | ✅ アラビア語・ヘブライ語対応 | ⚠️ 別途RTL用CSS必要 |
| 推奨度 | ⭐ 新しいコードでは推奨 | 従来からの指定方法 |
NEWtext-align: start / end — 論理プロパティでRTL対応
start と end は書字方向（LTR/RTL）に応じて自動的に左/右を切り替えます。 国際化対応アプリでは left/right の代わりにこちらを使うのが推奨されています。
/* 国際化対応の書き方 */
p {
text-align: start; /* LTR: 左揃え / RTL: 右揃え */
}
/* HTML側でdir属性を設定 */
/* <html lang="ar" dir="rtl"> */
/* <p>النص العربي</p> */🤖 AIプロンプトテンプレート
CSSのtext-alignプロパティを使ったテキスト揃えの実装例をReact + Tailwind CSSで作成してください。 要件: - left / center / right / justify / start / end の各値を比較できるインタラクティブデモ - ボタンで揃え方を切り替えてリアルタイムにプレビューできるUI - text-align: justify + text-align-last の組み合わせデモ - text-align: center と margin: 0 auto の違いを説明する比較デモ - start / end による論理プロパティでのRTL対応の実装例 - 実用例：ヘッダー・価格表示・ナビゲーションなど異なる揃え方の使い分け
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。