【両端揃え】たった1行のCSSで文章の見栄えを美しくする

こんにちは。今回はHTML上でどのように文章の両端揃えを行うかを解説します。

指定方法

指定はとても簡単で、1行追加するだけです。

text-align: justify;

これだけで両端揃えを実現できます。

英語や数字が混ざっていても概ね問題なく両端揃えにできるので、少なくとも静的なコンテンツでは十分使っていけるプロパティだと思います。

注意点

非常に便利なtext-align: justifyですが、記号周りで文章が崩れる場合があります。

このように、確かに両端揃えにはなっているものの文字の間隔が空きすぎですね。記号をたくさん連続させるような文章が想定される場合は使わない方が良さそうです。

特に動的なコンテンツが対象の場合は注意が必要ですね。

さらに記号の場合は文字の折り返し、改行を強制させるword-break: break-all;が効かずoverflow-wrap: break-word;使う必要があるなど、それ自体の扱いを気をつけなければなりません。

まとめ

というわけで、CSSによる文字の両端揃えを紹介しました。右端が揃ってなくてむずむずする、という方はぜひ試してみてください。