ブラウザで文章を表示したとき、テキストが改行し、各行の右端が揃わない場合がありますよね。
気にはなるけど、揃えるのは面倒くさそうだし放っておくかと、あきらめていませんか？
実は簡単に両端揃えができちゃうので、紹介します。
両端揃え用のコード
HTML
<p>Once upon a time, there lived an old couple in a small village.One day the old wife was washing her clothes in the river when a huge peach came tumbling down the stream.The old woman brought the peach home and cut it up to share with her husband.</p>
CSS
p { text-align: justify; text-justify: inter-ideograph; }
表示確認
スタイル設定前
Once upon a time, there lived an old couple in a small village.One day the old wife was washing her clothes in the river when a huge peach came tumbling down the stream.The old woman brought the peach home and cut it up to share with her husband.
スタイル設定後
Once upon a time, there lived an old couple in a small village.One day the old wife was washing her clothes in the river when a huge peach came tumbling down the stream.The old woman brought the peach home and cut it up to share with her husband.
■表示結果
設定前には不揃いだった右端ラインが、設定後には揃っているのがわかります。
コードの説明
上の例では、<p>タグを使用していますが、タグは<p>タグ以外でも問題ありません。
ブロック要素であれば、両端揃えを反映することができます。
次にCSSの説明ですが、まず、
text-align: justify;
を設定することで、右端欄を揃えることができます。
ただ、この記述はIE、Edgeでは動いてくれません。そのため、IE、Edge対策として、以下の記述も一緒に記載してあげる必要があります。
text-justify: inter-ideograph;
text-justifyは、IE、Edgeが採用している独自のプロパティであり、text-align: justifyを指定した時の拡張機能になります。
値にinter-ideographを指定することで、日本語・中国語・韓国語などのテキストを均等割り付けに調整してくれます。
【補足】記事を書いた時点でIE、Edgeでの挙動を確認したところ、text-justify: inter-ideographを記述しなくても均等割り付けされているようでしたが、念のために記載しておくようにしましょう。
まとめ
たった2行のCSSで簡単に右揃えができるの便利ですね。
特にサイトのデザインにこだわる場合など、テキストの右側のグリッドが揃っているかなど、細かい部分が気になるものです。
設定にも手間いらずなので、どんどん使っていきましょう。神は細部に宿るということで。