【text-justify】初心者でもわかる!基本の使い方を徹底解説

text-justifyプロパティの詳しい情報や使い方を知りたい。

この記事は、そんな方に向けて書いています。

どうも!20代なのにここ1ヶ月の間で2回もぎっくり腰になったシュンヤです!
(この記事もシップを貼りながら書いています・・・。)

さて、今回はCSSの話。

文章の均等割付けに関する指定ができる「text-justify」プロパティですが、ネット上の情報だと少し古かったり、内容が難しかったりしますよね。

というわけで今回は、「text-justify」について知りたいCSS初心者さん向けに

・text-justifyとは?読み方から対応ブラウザまで詳しく解説
・text-justifyの基本的な使い方を実際のコードを示して解説

の2本立てで説明していきます。

CSSを学び始めた初心者さんなど、text-justifyプロパティについて詳しく知りたい人はぜひ最後までご覧ください。

text-justifyプロパティとは

text-justifyプロパティの読み方

text-justifyは【テキスト-ジャスティファイ】と読みます。

そのまま訳すとtextは「文章」、justifyは「正当化する」や「整える・そろえる」という意味。

テキストの均等割付に関するプロパティなので、CSSの世界では「整える・そろえる」といった意味合いが強いでしょう。

text-justifyプロパティの説明

text-justifyプロパティは、text-alignプロパティの値に justify を指定した際の、均等割付の形式を指定する際に使用します。

「均等割付ってなに?」

という人にカンタンに解説すると、Wordなどで文章を書いているとき、見やすさを考慮して途中で改行するときってありますよね?

その際、中途半端に改行している文章の両端を、規定の行幅にそろえることを均等割付(両端揃え)と言います。

text-justifyプロパティを使うことで、日本語や英語など、それぞれの言語に適した間隔で均等割付けをすることが可能です。

MEMO
ちなみにtext-align(テキスト–アライン)プロパティは、文字や画像の水平方向の揃え方を指定するプロパティで、右端揃え、中央揃え、左端揃えなどの指定をする時に使います。

text-justifyプロパティの値

text-justifyのプロパティの値は次のとおりです。

値名 説明
auto(初期値) 日本語や英語など、適用させたい言語に最適な間隔をブラウザが自動で設定する
none 均等割付けが無効になる
inter-word 単語間に間隔を挿入する(英語など単語で区切る文章に向いている)
inter-character 文字間に間隔を挿入する(日本語に向いている)
distribute(非推奨) inter-characterと同じ効果

inter-wordが単語間(半角スペース)のサイズを調整するのに対し、inter-characterは1文字1文字の間隔を調整するので、似ているようで異なります。

なお、非推奨であるdistributeは、CSSのブラウザ対応状況を確認できるサイト(can i use…)によると、一部のブラウザ(Google ChromeとOpera)では動作不良を起こすかもしれないとのことです。

また、上記の値のほかにもInternet Explorer限定で使用できる値がいくつかありますが、ほとんど使う機会はないのでここでは説明を省略します。

text-justifyプロパティの対応ブラウザ

text-justifyの対応ブラウザは次のとおりです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 部分対応
Safari 未対応
スマートフォン用ブラウザ 対応状況
Android webview 未対応
Android版Chrome 部分対応
Android版Firefox 完全対応
Android 版 Opera 部分対応
iOS版Safari 未対応
Samsung Internet 未対応

なお、FirefoxやInternet Explorer以外の対応ブラウザで「text-justify」プロパティを使うときは、試験運用版の機能を有効にする必要があります。

MEMO
GoogleChromeなどには試験運用版、いわゆるβ(ベータ)版が存在し、安定板のブラウザにはない多くの機能が備わっています。
text-justifyはまだ開発途中であることから、ほとんどのブラウザでは最初からサポートされていません。
しかし、このβ版の機能を有効にすることで使えるようになるのです。
有効にする方法は検索すれば出てきますが、それによってブラウザのデータが失われたりすることもあるので、注意しましょう。

text-justifyプロパティの基本的な使い方

text-justifyプロパティの使い方

それではさっそく使い方を解説していきます。

冒頭でも説明しましたが、text-justifyはtext-alignプロパティの値に justify を指定した際の、均等割付の形式を指定する際に使用します。

<auto>の場合

See the Pen
justify_auto
by shunya (@shunya1031)
on CodePen.

<none>の場合

See the Pen
justify_none
by shunya (@shunya1031)
on CodePen.

<inter-word>の場合

See the Pen
justify_inter-word
by shunya (@shunya1031)
on CodePen.

<inter-character>の場合

See the Pen
justify_inter-character
by shunya (@shunya1031)
on CodePen.


<distribute>の場合

See the Pen
text-justify_distribute
by shunya (@shunya1031)
on CodePen.

text-justifyが効かない!?

text-justifyが効かない時に想定されるシーンは、先ほどβ版の説明をしましたが、「デフォルトでは効かない」という理由のほかに、だいたい次の2パターンになるかと思います。

  1. 文章の末尾の行だけ効かない
  2. 表を挿入する際の<th>タグに効かない

なぜこの場合に効かないのかというと、そもそも「text-align」の仕様で「最後の行は均等割付けしない」と決まっているからです。

例えば最後の行が3文字だった場合に均等割付けをしてしまうと、両端と真ん中に1文字ずつバラけることになります。

それでは文章の見た目がおかしくなってしまいますよね。

<th>タグも最後の段落と認識されているため、均等割付が効かないのでしょう。

text-justifyが効かない時の対処法

「text-align」プロパティの値には、今回紹介している「justify」だけでなく「justify-all」という値もあるのです。

この値を使うことで、最終行も強制的に均等割付けされます。

先ほども言ったように文章の見た目がおかしくなるので、あまり使うことはないかもしれませんが、知識として覚えておきましょう。

まとめ

いかがでしたでしょうか?今回は、text-justifyプロパティの概要と基本的な使い方について解説しました。

他のCSSプロパティとも関連してきたり、ブラウザによって動作状況が異なったりと、意外にややこしいtext-justifyプロパティ。

その割に使う頻度は高くないプロパティですが、こういうちょっとしたデザインが見やすさの向上につながり、結果としてユーザビリティの高いページになります。

この記事が、少しでもあなたの参考になれば幸いです。ぜひこれを機会に、CSSの学びを深めていってください。

最後までご覧いただき、ありがとうございました。

参考文献:htmlクイックリファレンス
参考文献:MDN Web Docs

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?