今回はテキストの両端を揃える方法を紹介します。超簡単です。
テキストの両端を揃える方法
CSSにはテキストの両端を揃えるtext-align: justify;が用意されているのでこれを指定するだけでokです！
p.justify {
text-align: justify;
text-justify: inter-ideograph; /* IE用 */
}ただし、text-align: justify;はIEでは効かないのでtext-justify: inter-ideograph;も追加しておきます。これはIE用のtext-align: justify;みたいなものです。
text-align: center;とかはよく使うと思いますが、text-alignにはjustifyという値も用意されていて、これがテキストを両端揃えにする値という感じですね。
実際に指定するとこんな感じになります（画面下）。文章の両端が揃っているのがわかるかと思います。
See the Pen
by wagashi000327 (@wagashi000327)
on CodePen.
最終行も両端揃えにする方法
text-align: justify;では最終行までは両端揃えになりません（そっちのほうが自然かもしれませんが…）
最終行も両端揃えにしたい場合はtext-align-last: justify;を指定すればokです！
p.justify {
text-align: justify;
text-justify: inter-ideograph; /* IE用 */
text-align-last: justify; /* ←追加 */
}
実際に見てみるとこんな感じです（画面下）。最終行まで両端揃えになっています。
See the Pen
by wagashi000327 (@wagashi000327)
on CodePen.
ただし、text-align-last: justify;はSafariでは使えないのでここだけ注意してください。
普通に使うと不自然になってしまう場面が多いですが、たまーに最終行も両端揃えにしたい時があるのでその時に使えますね。
まとめ
テキストの両端を揃えるのは今回紹介した方法でかなり簡単にできます。
これを指定するだけでも日本語の文章は特に綺麗に見えるようになるので積極的に使っていきたいですね。
