CSSで日本語の文章の両端をそろえる方法

​2026年11月9日​CSS​Playwright,日本語組版

日本語の段落の右端をまっすぐにそろえるには、段落に text-align: justify を指定します。行の最後に残った空きを、ブラウザーが行の中の文字の間に配って、左右の端を要素の幅にそろえます。最後の行や、「氏名」「住所」のような1行だけの項目名もそろえたいときは、text-align-last: justify を使います。

text-align: justify を段落に付ける

書き方は1行です。

p {
  text-align: justify;
}

検証環境で、日本語と英数字が混ざった段落を幅 330px に入れ、指定なしと justify を比べました。行の右端と要素の右端の間の空きは、次のようになりました。

1〜4行目は右端がそろい、最後の行だけは左に寄ったままです。どの行も、折り返す位置は指定なしと同じでした。この段落では、justify は折り返しを変えず、決まった行の中で文字の間を広げただけです。

日本語の行がでこぼこになる理由

漢字やかなは、ほぼ同じ幅で並びます。そのため、要素の幅が文字の大きさのちょうど倍数なら、指定しなくても右端はかなりそろいます。検証環境で、漢字とかなだけの段落を幅 320px（16px の文字で20文字分）に入れると、1行目は空きが 0px でした。

それでも、2行目は 16.5px の空きが残りました。2行目は「…倍数にする」の19文字で終わり、「と、」は3行目の頭に来ています。「と」は2行目に収まる幅でしたが、「、」が行の頭に来ないように、いっしょに次の行へ送られました。句読点を行の頭に置かないこの決まりは禁則と呼ばれ、指定しなくても働きます。どこまで厳しく守るかは、CSS の line-break プロパティで選べます。英単語や数字のように幅の違う文字が入る行も、ちょうど端で終わらず、空きが残ります。

justify を付けると、幅 320px でも 330px でも、最後の行を除くすべての行の空きが 0px になりました。画面の幅によって要素の幅が変わるページでは、幅を倍数に合わせるより、justify を付けたほうが確実です。

英数字が混ざった行は、和文の文字の間と空白が広がる

空きをどこに配るかは、text-justify プロパティで決まります。何も書かないときは auto で、MDN では、ブラウザーがテキストの言語なども加味して、最適な揃え方を選ぶ値と説明されています。

検証環境の Chromium 153 で、auto のまま、3行目の「し、2026年11月の Chromium で試しまし」の1文字ずつの幅を、指定なしと比べました。

広がったのは、和文の文字のまわりと半角の空白だけでした。「2026」や「Chromium」の文字の間は広がらず、英単語や数字がばらばらに見えることはありません。CSS の仕様にも、auto の解釈の例として、空白と、日本語・中国語・韓国語や東南アジアの文字の間に空きを配るやり方が、図で示されています。

段落の lang 属性を en にしても、足された幅は ja のときと同じでした。検証環境の Chromium では、justify でそろえたときの間隔に、lang の指定は影響しませんでした。

text-justify で、空きを配る場所を変える

text-justify の値を変えると、空きを配る場所が変わります。MDN では、inter-character は文字の間に、inter-word は単語の間に空きを入れる値と説明されています。

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

検証環境で、同じ3行目を比べると次のようになりました。

inter-character では、和文と英数字の区別なく、同じ幅ずつ広がりました。上の画像の3段目では、「Chromium」の文字の間も少し空いています。

inter-word では、空白だけに空きが集まりました。3行目には空白が2つしかないので、1つあたり 15.1px 広がり、画像の4段目のように「の　Chromium　で」と大きく空いています。空白のない1行目と4行目は、右端がそろわず、指定なしと同じ 11.8px と 10.3px の空きが残りました。仕様では、行を広げられないときは text-align-last のとおりに配置すると定められていて、この場合は左寄せになります。

none は両端そろえをしない値で、text-align: justify を書いても、指定なしと同じ表示になりました。auto は英単語や数字の文字の間を広げないので、日本語の段落では auto のままにしておくのが無難です。

互換性データでは、text-justify に対応しているのは Chrome 145 以降、Chromium ベースの Edge 145 以降、Firefox 55 以降です。Safari は iOS 版も含めて対応していません。

最後の行もそろえるときは text-align-last

text-align: justify では、最後の行は左に寄ったままです。MDN の text-align-last のページでは、最初の値の auto は、text-align が justify のとき start（左から右へ書く言語なら左寄せ）と同じになると説明されています。

text-align-last: justify を足すと、検証環境では最後の行も左右の空きが 0px になりました。text-align-last: center なら、最後の行だけが左右 6px ずつの空きで中央に寄りました。

text-align-last のページにあるとおり、このプロパティは、最後の行と強制的な改行の直前の行に効きます。段落の途中に <br> を入れると、<br> の直前の行も最後の行と同じ扱いになります。「一つ目の文は短いです。」のあとに <br> を入れた段落では、その行は右に 156.1px の空きを残したまま、左に寄っていました。

項目名を均等割り付けにする

フォームの「氏名」「住所」「電話番号」のような項目名を、同じ幅に広げてそろえるときも text-align-last を使います。1行しかない文字列では、その1行が最後の行なので、text-align: justify だけでは広がりません。

dt {
  width: 4em;
  text-align-last: justify;
}

検証環境で、幅 64px（4文字分）の項目名に付けると、文字の左端の位置は次のようになりました。

text-align-last: justify だけで、「氏名」の「名」の左端が 48px になり、「電話番号」の右端とそろいました。text-align: justify を書かなくても広がります。全角の空白を入れて「氏　名」と書く方法と違い、HTML の文字列は「氏名」のままです。

text-justify: inter-word を足すと、項目名は広がらず、検証環境の Chromium 153 では指定なしと同じ左寄せになりました。仕様では、行を広げられず、text-align-last が justify のときは中央寄せにすると定められていて、この結果は仕様と違います。項目名を均等割り付けにするときは、text-justify を inter-word にしないでください。

互換性データでは、text-align-last: justify は Chrome 47、Edge 12、Firefox 49（12〜53 は -moz- 接頭辞付き）、Safari 16（iOS 版も 16）から対応しています。

読みやすさの面で気をつけること

MDN の text-align のページには、両端そろえで間隔が一定にならないことが、ディスレクシアなどのある人にとって問題になる場合があると書かれています。

上で測った段落では、auto のときに足された幅は1文字あたり 0.5〜2.3px（数字のすぐ後ろの「年」「月」で 4.6px）でした。間隔が大きく空いたのは、和文が多く空白の少ない行を inter-word でそろえたとき（空白1つあたり 15.1px）と、短い最後の行を text-align-last: justify で広げたとき（上の囲みの例）です。スマホのように幅の狭い画面で、英単語や URL の多い文章を表示するページでは、実際の画面で間隔を確かめてから付けると安心です。