テキストの水平方向の配置を指定するプロパティです。left、right、center、justifyなどの値があり、文章の見た目や読みやすさに大きく影響します。ブロック要素内のテキストやインライン要素に適用されます。
text-align: left | right | center | justify | start | end| text-left | text-align: left |
| text-center | text-align: center |
| text-right | text-align: right |
| text-justify | text-align: justify |
書字方向対応の論理値は text-start / text-end。
テキストの配置を変更できます。左寄せ、中央寄せ、右寄せ、両端揃えが選択できます。
.element {
text-align: left;
}text-align: left;このテキストは中央に配置されます
左揃え(デフォルト)
text-align: center;両端揃えのテキストです。長い文章の場合、左右の端が揃うように文字間隔が自動調整されます。新聞や雑誌のような整然とした見た目になります。
中央揃え
text-align: justify;このテキストは右端に揃えられます
両端揃え
text-align: right;left: 左揃え(デフォルト)
center: 中央揃え
right: 右揃え
右揃え
startとendは国際化対応。justifyは英語以外では注意が必要。
text-alignが配置するのは「インラインコンテンツ」であり、ブロック要素自体の中央寄せ(margin-inline: auto)とは別物です。この混同はAIにも頻発します。またtext-align: justify(両端揃え)は日本語では約物や英単語の周りで不自然な空きを生みやすく、扱いが難しい指定です。
「ボックス自体を中央に、その中のテキストは左寄せ」を、text-alignとmargin autoの役割分担で実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。