和文におすすめのtext-align : justifyを使った両端揃えにして綺麗にみせるサンプルコード

今回は、細かいけどサイトの印象を大きく左右するポイントのうちの１つ「テキストの端っこを綺麗に揃える」方法です。text-align:justifyを使用して、テキストの均等割付をして、左右両端揃えに設定してみます。

一生懸命サイトやブログを作って、レイアウトもイメージ通りに完成！でも… なんだか…素人臭さが抜けないなぁ。。。

こんな事、CSS初心者のうちは誰もが感じる事です。そんな「なんかチープだなぁ…」の原因は、ほとんどの場合、こういった細かい部分にあります。

実際のサンプルを載せますが、長文の場合は見栄えが格段に違います。ぜひ試してみてください。

text-align:left（start）とjustifyの見栄えの違い

text-alignがleft（今回はstartと同じとみなします）とjustifyで、それぞれ同じ文章がどんな感じに見えるのか見てみましょう。

text-align : left(start)の場合

まず、特にtext-alignを指定していない場合や、”left”に指定してある場合です。

text-align : left(start)

今回は、”text-align : justiry”を使用して綺麗に両端揃えにしてみようと思います。testとして123などの1byte文字もふんだんに混ぜたtextにしています。長い英単語の例として”Antidisestablishmentarianism”という単語があるそうです。意味は知りません。
さて、次のような長い数字も綺麗に両端揃えになってくれるでしょうか。999999999999999999999999999999999999999999

日本人の感覚からして、右端がガタガタしてなんだか気持ちが悪いと感じるかもしれません。

text-align : justifyの場合

さて次は、今回の主役の”justify”を指定した場合です。

text-align : justify

今回は、”text-align : justiry”を使用して綺麗に両端揃えにしてみようと思います。testとして123などの1byte文字もふんだんに混ぜたtextにしています。長い英単語の例として”Antidisestablishmentarianism”という単語があるそうです。意味は知りません。
さて、次のような長い数字も綺麗に両端揃えになってくれるでしょうか。999999999999999999999999999999999999999999

どうでしょうか。右端が綺麗に揃っていますね。英単語の途中でもしっかり改行されています。

英語圏の方から見ると単語中の改行は違和感があるかもしれません。しかし日本人なら、こちらの方が綺麗で読みやすいと感じる方が多いでしょう。

とは言っても、何が綺麗か？には個人差があります。あくまで作り手の好みで決まるところでしょうが、もし上の例のような形で表示したい場合は、次にCSSのサンプルを載せておきます。

和文の場合のおすすめの指定

英単語や数字なども混在する一般的な和文でtext-align : justify を使用する場合は、他にもいくつか適切に指定をしてあげないと上の例のようにはなってくれません。

下の指定をしてあげる事で、英単語や数字の途中でもきっちり改行が入り、両端がピッタリそろいます。

word-breakプロパティは単語の途中で改行されるかどうかを指定しています。和文を両端揃えにするには、これは必須ですね。
この指定は日本語の単語では正しく解釈されません。ですので実質、英語などのスペース区切りで表記していく言語の単語の改行指定となります。（英語以外は表記したことが無いので知りませんが。。）

text-justifyプロパティのinter-ideographは、もしかするとCSSのリファレンス等には載っていないかもしれません。これは昔、いつものようにIEが先走って実装した時の名残です。IEはver11でも、これを書いていないと綺麗に両端揃えになってくれません。

text-justifyプロパティのinter-characterは、ほとんどのケースで無くても平気だと思います。ただ、これをしっかり指定しておいてやると長い数字や英単語がある場合に若干右端がガタつくのが防げます。

ここまでの指定だけでも、ボックスはみ出し問題はほぼ発生しないのですが、半角記号の連続などの場合、ボックスを突き破ってはみ出すケースがあります。そこで、word-wrapやoverflow-wrapも併せて記述しています。

例外的に注意する事

テキストに関するCSSはどんどん進化していますが、言語の多様さもあってか未だに100%想定通りにコントロールできない気がします。text-align:justifyによる両端揃えも、上記の指定で99%（数字は適当）思い通りに表示されますが、例外的に表示が崩れるケースがあります。

他にもあるかもしれませんが、一例を載せておきます。

半角記号の連続

まれなケースですので、普通の日本語文であれば一切心配はありませんが、半角記号の長い連続があると想定しない形にになってしまいます。半角数字でも半角英字でも問題ないのですが、半角記号だとこれが起こります。

数字で問題の無い場合

次のような長い数字も綺麗に両端揃えになってくれるでしょうか。999999999999999999999999999999999999999999

半角記号で崩れるケース

長い記号の連続も綺麗に両端揃えになってくれるでしょうか。!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

最後に

どうでしょうか。綺麗に両端揃えになりましたか。

今回の記事の内容の対応ブラウザは、Chrome・Firefox・Edge・Safariの各最新バージョン（2020-12-23時点）とIE11です。IEの古いバージョンは切り捨てるようになって久しいので忘れかけています。。IE10以前については一切保証しません！