CSSで均等揃え｜text-align: justifyの使い方と注意点を初心者向けに解説

5

Views

CSSで均等揃え

Webサイトで文章を表示する際、左右のバランスが気になることはありませんか？ そんなときに活躍するのが、text-align: justifyによる均等揃えです。

このプロパティを使えば、雑誌や新聞のようにテキストの両端をキレイに揃えることができます。 本記事では、その使い方と注意点、さらには応用テクニックまで、初心者向けにわかりやすく解説します。

目次

text-align: justifyとは？

text-alignはテキストの揃え方を指定するCSSプロパティです。 通常は left（左揃え）、center（中央揃え）などを使いますが、justifyを指定すると、

  • 各行の左右両端がピッタリ揃う
  • 文字と文字の間隔を調整して揃える

という特徴があります。

p {
  text-align: justify;
}

どんなときに使う？

以下のような場面でjustifyがよく使われます：

  • 長文の読み物ページ（ブログやコラム）
  • PDF風のページや書類系サイト
  • 新聞や書籍のレイアウトに近づけたいとき

注意点：「。」や短い行では効かない！

text-align: justifyはすべての行に適用されるわけではありません。 以下のようなケースでは均等揃えが適用されません：

  • 段落の最終行
  • <br>で明示的に改行された行
  • 1行の文字数が少ない場合

つまり、「。」で毎回改行してしまうと、均等揃えにならない行が増え、見た目が不揃いになってしまいます。

均等揃えのコツ

見栄えよく均等揃えを活かすために、以下のような工夫がおすすめです：

  • 文末の「。」で毎回改行しない
  • <br>は使わず、<p>タグで段落を区切る
  • max-widthを設定して読みやすい行幅にする
p {
  text-align: justify;
  max-width: 40em;
  line-height: 1.8;
}

応用：text-align-lastで最終行を制御

均等揃えでは最終行だけ左揃えになってしまうのが一般的です。 これをカスタマイズするには、text-align-lastプロパティを使います。

p {
  text-align: justify;
  text-align-last: center;
}

これで、段落の最後の行だけ中央揃えなどにすることも可能です。

まとめ

  • text-align: justifyで、文章を両端揃えにできる
  • ただし、改行の仕方や行の長さによっては揃わないこともある
  • text-align-lastで最終行の調整もできる

読みやすさと美しさのバランスを見ながら、ぜひ活用してみてください！

関連記事