WEBページで文章を表示していると、文章の右端がガタガタに見えることがあります。特に、会社紹介ページ、サービス紹介ページなどでは、文章の右端が揃っていないと、少し読みづらく見えたり、デザイン全体が不安定に見えたりします。
この記事では、CSSを使って文章の右端をきれいに揃える方法を解説します。
文章の右端がずれる理由
通常、文章は左揃えで表示されます。
p {
text-align: left;
}左揃えの場合、文字は左から順番に並びます。
そのため、左端はきれいに揃いますが、右端は行ごとにバラバラになります。
例えば、次のような表示です。
私たちは、空に浮かぶ都市と地上の小さな町をつなぎ、すべての人が自分らしい未来へ進めるように支援します。見えない不安やまだ名前のない課題に寄り添い、一人ひとりが持つ可能性を新しいかたちで広げながら、次のステージへ踏み出せる環境づくりを大切にしています。
このように、各行の文字数や文字幅が違うため、右端が揃わないのは自然な表示です。
右端を揃えるには text-align: justify を使う
文章の右端を揃えたい場合は、CSSで text-align: justify; を指定します。
p {
text-align: justify;
}
text-align: justify; は、文章を均等に配置して、左端と右端の両方を揃える指定です。
新聞や雑誌のように、文章の左右をきれいに揃えたい場合に使われます。
日本語の文章では text-justify も指定する
日本語の文章で使う場合は、次のように text-justify: inter-character; も一緒に指定するとよいです。
p {
text-align: justify;
text-justify: inter-character;
}
text-justify: inter-character; は、文字と文字の間隔を調整して、文章の右端を揃える指定です。
日本語のように単語間のスペースが少ない文章では、この指定を入れておくと右端が揃いやすくなります。
最後の行だけ左寄せにする
text-align: justify; を使うと、文章の右端は揃います。
ただし、場合によっては最後の行まで無理に広がってしまうことがあります。
最後の行まで均等に広がると、不自然な見た目になることがあります。
そこで使うのが text-align-last: left; です。
p {
text-align: justify;
text-align-last: left;
text-justify: inter-character;
}この指定を入れることで、通常の行は右端まで揃い、最後の行だけは左寄せになります。
実際に使うCSS
本文全体に適用する場合は、次のように書きます。
p {
text-align: justify;
text-align-last: left;
text-justify: inter-character;
}ただし、サイト全体のすべての段落に適用すると、意図しない場所まで変わる可能性があります。
そのため、特定の文章ブロックだけに適用するのがおすすめです。
WordPressで特定のブロックだけに適用する方法
WordPressの場合は、対象のブロックに追加CSSクラスを設定します。
例えば、文章ブロックに次のクラス名を付けます。
vision-textそのうえで、追加CSSに次のコードを入れます。
.vision-text p {
text-align: justify;
text-align-last: left;
text-justify: inter-character;
line-height: 2.0;
}
これで、vision-text というクラスを付けたブロック内の段落だけ、右端がきれいに揃います。
スマホだけに適用する場合
スマホ表示だけ右端を揃えたい場合は、メディアクエリを使います。
@media (max-width: 767px) {
.vision-text p {
text-align: justify;
text-align-last: left;
text-justify: inter-character;
line-height: 2.0;
}
}PC表示はそのままにして、スマホ表示だけ文章の右端を整えたい場合に便利です。
右端が揃わないときの確認ポイント
CSSを入れても右端が揃わない場合は、本文内に手動改行が入っていないか確認してください。
例えば、WordPressの編集画面で文章の途中に改行を入れていると、そこで1行が終わった扱いになります。
悪い例です。
関わるすべての人が、
ひとつ上のステージへ
進めるように支援します。このように途中で改行していると、CSSで右端を揃えにくくなります。
できるだけ、文章は1つの段落としてつなげて入力します。
良い例です。
関わるすべての人が、ひとつ上のステージへ進めるように支援します。CSSに任せて自動で折り返させることで、右端がきれいに揃いやすくなります。
注意点
text-align: justify; は便利ですが、狭い幅で使うと文字間が広がりすぎる場合があります。
特にスマホでは、1行あたりの文字数が少ないため、文字と文字の間隔が不自然に空くことがあります。
その場合は、すべての文章に使うのではなく、見出し下の説明文や理念ページの本文など、見た目を整えたい部分だけに使うとよいです。
まとめ
文章の右端が揃わないのは、通常の左揃え表示では自然なことです。
右端まできれいに揃えたい場合は、CSSで text-align: justify; を使います。
さらに、最後の行だけ左寄せにしたい場合は、text-align-last: left; を追加します。
実際に使うなら、次のCSSがおすすめです。
.vision-text p {
text-align: justify;
text-align-last: left;
text-justify: inter-character;
line-height: 2.0;
}文章の右端を整えるだけで、ページ全体の印象はかなり変わります。
特に、会社紹介、サービス紹介などの文章では、右端の揃い方を意識すると、より整ったデザインに見せることができます。