初心者でも簡単にできるCSSでテキストの両端揃え

初心者でも簡単にできるCSSを使ったテキストの両端揃えの方法を紹介します。

イラレを使っているDTPデザイナーは、WEBでも両端揃えをしたくなると思いますが、テキストにたった2行のCSSを適用するだけで、両端揃えにする方法があります。

CSSで両端揃えしてない場合

両端揃えをしてないと、テキストの文末のラインが揃いません。
2〜3行のテキストなら問題ないですが、行数が増えるとやっぱり気になります。
特にグリッドレイアウトを使用する場合は、テキストのラインが揃っていないと見た目も良くありません。

テキストの文末のラインが揃っています。
グリッドレイアウトはやっぱこうでしょ！と言わんばかりに文末が揃っているので、見た目がキレイです。

追加するコードはわずか2行です。

p {
   text-align: justify; /* 両端揃え */
   text-justify: inter-ideograph; /* 両端揃えの種類を定義 */
}

p {

text-align: justify; /* 両端揃え */

text-justify: inter-ideograph; /* 両端揃えの種類を定義 */

}

text-align: justify; のみだと、Internet ExplorerやEdgeの日本語文で両端揃えにならないという問題が発生しますので、text-justify: inter-ideograph; を記述しましょう。

やっぱりテキストの文末が揃っていると見栄えが違いますよね。
ちょっとした事ですが、文章量が多いサイトでは重要なポイントになってきます。
初心者でもカンタンに導入できますので、CSSで両端揃えをしたことのない方は使ってみてください。

初心者でもできる！CSSでテキスの両端揃えでした。