CSSによる文章の両端揃え

ABOUTこの記事をかいた人

フロントエンドエンジニア。

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

指定方法

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

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

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

注意点

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

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

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

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

まとめ

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

line-heightの邪魔な上下の余白をこの世から消す

2021年3月25日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください