「text-align」プロパティは、要素を左揃え・中央揃え・右揃えにする場合によく使われますね。
「text-align」には、「justify」という値があります。
Word（ワード）でもよく使われる、「均等割り付け」と同じ機能で、文字の幅を揃えて見栄えをきれいにすることができるCSSです。
詳しく説明していきます。
「text-align: justify」とは
テキストを「均等割り付け」できるCSSです。
文字間を自動で調整し、テキストの改行位置がボックスの両端ぴったりに揃うようになります。
最後の行のみ、「left」を指定した場合と同じ挙動になります。
ひらがな・カタカナ・漢字・数字・英語。
1文字1文字の幅はそれぞれ異なるため、通常だと改行位置がガタガタに見えてしまいますが、「text-align: justify」を指定することで、改行位置が揃って見栄えが良くなります。
このように、改行位置が右端にぴったりに揃いました。
文章量が多ければ多いほど違いがわかると思います。
記述方法
セレクタorクラス {
text-align: justify;
}均等割り付けしたい要素に指定します。
モダンブラウザではすべてサポートされているので、ベンダープレフィックスは必要ありません。
基本の表示は「text-align: left」と同じなので、子要素すべてにかけてしまっても良いかもしれませんね。
* {
text-align: justify;
}最後の行も均等割り付けしたい場合
「text-align: justify」では、最後の行のみ「left」と同じ挙動になると先述しました。
以下のように、最後の行もすべて均等割り付けする方法もあります。
Safariでは動作せず、IE・Edgeでは特別な記述が必要になります。
記述方法
セレクタorクラス {
text-align-last: justify;
}均等割り付けしたい要素に指定します。
すべてのテキストが両端に揃っていますね。
IE・Edge用の記述が必要
IE・Edgeでは、「text-align-last: justify」だけでは動作しません。
「text-justify」プロパティというIE独自のプロパティを記述すると、同じように動作してくれます。
セレクタorクラス {
text-align-last: justify;
text-justify: inter-ideograph;
}まとめ
初心者の方に向けて、「text-align: justify」の使い方をご紹介しました。
文章の多いページでは改行箇所が多くなるため、どうしてもガタついた見た目になってしまいます。
グリッドデザインのWebサイトでは特に目立ってしまいます。
こうした細かい部分にもこだわることで、サイトの質はグッと高まります。
個人的にはすべてのサイトで指定しておいた方が良いのではないかと思ってます。