CSSの text-justify: inter-character; とは？日本語の文章をきれいに均等割り付けする方法

WEBページで文章を表示していると、右端がガタガタに見えることがあります。

特に日本語の文章では、英語のように単語ごとのスペースが少ないため、単純に text-align: justify; を指定しても、思ったように右端が揃わないことがあります。

そのようなときに使うのが、

text-justify: inter-character;

です。

この記事では、text-justify: inter-character; の意味、使い方、注意点を初心者向けにわかりやすく解説します。

text-justify: inter-character; とは

text-justify: inter-character; は、文章を均等割り付けするときに、文字と文字の間隔を調整するためのCSSです。

名前を分解すると、意味がわかりやすくなります。

text-justify
文章の均等割り付け方法を指定する

inter-character
文字と文字の間で調整する

つまり、text-justify: inter-character; は、日本語のように文字単位で並ぶ文章に対して、文字間を調整しながら右端を揃えやすくする指定です。

単体では効果が分かりにくい

重要なのは、text-justify: inter-character; だけを書いても、基本的には効果が分かりにくいという点です。

この指定は、主に text-align: justify; と組み合わせて使います。

p {
  text-align: justify;
  text-justify: inter-character;
}

text-align: justify; で文章を両端揃えにし、text-justify: inter-character; で文字間の調整方法を指定する、というイメージです。

なぜ日本語で使いやすいのか

英語の文章では、単語と単語の間にスペースがあります。

そのため、両端揃えをするときは、単語間のスペースを広げて調整しやすいです。

一方、日本語の文章は、基本的に単語と単語の間にスペースを入れません。

私たちは未来に向けて新しい価値を創造します。

このような文章では、英語のように単語間スペースで調整することができません。

そこで、文字と文字の間隔を調整する inter-character が役立ちます。

基本の書き方

基本のCSSは以下です。

p {
  text-align: justify;
  text-justify: inter-character;
}

これで、段落の文章が左右に広がり、右端が揃いやすくなります。

ただし、最後の行まで無理に広がると不自然に見えることがあります。

そのため、実務では次のように書くことが多いです。

p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
}

text-align-last: left; も一緒に使う

text-align-last: left; は、最後の行だけ左寄せにする指定です。

p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
}

この組み合わせにすると、次のような表示になります。

通常の行    右端まできれいに揃う
最後の行    無理に広がらず左寄せになる

文章の見た目を自然に整えたい場合は、text-align-last: left; も一緒に入れるのがおすすめです。

WordPressで使う場合

WordPressでサイト全体の段落に適用すると、意図しない場所まで変わる可能性があります。

そのため、特定のブロックだけにCSSを適用するのが安全です。

まず、対象のブロックに追加CSSクラスを付けます。

justify-text

次に、追加CSSへ以下を入れます。

.justify-text p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
}

これで、justify-text を付けたブロック内の段落だけに適用できます。

スマホだけに適用する場合

スマホ表示で文章の右端だけが気になる場合は、メディアクエリを使います。

@media (max-width: 767px) {
  .justify-text p {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-character;
  }
}

これで、スマホ幅のときだけ均等割り付けが適用されます。

PCでは自然な左揃えのままにして、スマホだけ整えたい場合に便利です。

使用例

以下のような文章に使うと、見た目の違いが分かりやすいです。

私たちは、未来都市アステリアに暮らすすべての人が、自分らしい可能性を発揮し、ひとつ上のステージへ進めるように支援します。日々変化する環境の中で生まれる課題に向き合い、人と社会をつなぐ新しい仕組みを通じて、より豊かな明日を創造していきます。

CSSは以下です。

.sample-text {
  max-width: 420px;
  line-height: 1.9;
}

.sample-text p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
}

横幅がある程度決まっている文章ブロックで使うと、右端が整って見えやすくなります。

うまく効かない場合の原因

text-justify: inter-character; を指定しても、見た目が変わらない場合があります。

主な原因は次の通りです。

原因	内容
`text-align: justify;` がない	`text-justify` だけでは効果が出にくい
文章が短すぎる	1行だけ、または短文では違いが出にくい
手動改行が多い	改行ごとに別の行として扱われる
横幅が広すぎる	右端のズレが目立ちにくい
ブラウザ側の対応差	環境によって見え方が変わることがある

特に多いのは、本文中に手動改行が入っているケースです。

手動改行はできるだけ減らす

文章の途中で手動改行を入れると、そこで1行が終わった扱いになります。

悪い例です。

私たちは、すべての人が、
ひとつ上のステージへ進めるように
支援します。

このように手動で改行すると、CSSによる均等割り付けがきれいに効きにくくなります。

良い例です。

私たちは、すべての人が、ひとつ上のステージへ進めるように支援します。

文章はできるだけ1つの段落として入力し、折り返しはCSSとブラウザに任せるのが基本です。

注意点

text-justify: inter-character; を使うと、文字間が広がって右端が揃いやすくなります。

ただし、横幅が狭すぎると、文字と文字の間隔が不自然に広がることがあります。特にスマホでは、1行に入る文字数が少ないため、文字間が空きすぎる場合があります。

その場合は、無理にすべての文章に適用せず、以下のような場所だけに使うとよいです。

会社紹介文
サービス紹介文
LPの説明文

長文記事の本文全体に使うより、デザインを整えたい短めの説明文に使うほうが向いています。

まとめ

text-justify: inter-character; は、日本語の文章を均等割り付けするときに、文字間を調整するためのCSSです。

単体で使うよりも、次のように組み合わせて使うのが基本です。

p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
}

右端を揃えるには text-align: justify;、最後の行を自然に見せるには text-align-last: left;、日本語の文字間調整には text-justify: inter-character; を使います。

文章の右端が揃うと、ページ全体の印象が整って見えます。文章そのものを美しく見せたい部分では効果的なCSSです。

eguchi.net