文字を中央へ置くと箱も動く？text-alignで行のそろえ方を比べよう

文章を左・中央・右へそろえると、読み始める場所が変わるよね。CSSのtext-alignは、主にブロックの中にある行のそろえ方を指定するもの。箱そのものの置き場所とは分けて覚えよう。

このページでは、同じ短い段落のそろえ方を切り替える。ブラウザだけで試せるよ。

行をそろえる四つの例

.paragraph { text-align: left; }

justifyは、すべての行が同じ見た目になる指定ではない。最終行の扱いや、文字間の調整は別の条件にも関係するよ。

作例で、同じ文章を比べる

1. leftを選び、各行の始まりを見る。
2. centerへ変え、長さの違う行の始まりを比べる。
3. rightとjustifyも選び、文字や単語の間隔を見る。
4. リセットでleftへ戻す。

作例では、外側の箱の位置と幅は変えず、中の文章だけを切り替えている。中央揃えにしても、ブロックの箱自体が画面中央へ移動するわけではないと確認しよう。

長い本文では、読み進め方も考える

中央揃えは短い見出しに合うことがある一方、長い段落では行頭を探し直す必要がある。両端揃えも、言語や幅によって不自然な空きが出ることがあるので、見た目だけで一律に決めないでね。

leftやrightとは別に、書字方向に合わせるstart・endという値もある。MDNのtext-alignで確認できるよ。

文字サイズや一行の長さも一緒に見て、同じ内容を読み比べてみよう。