この記事は、そんな方に向けて書いています。
どうも！20代なのにここ１ヶ月の間で２回もぎっくり腰になったシュンヤです！
（この記事もシップを貼りながら書いています・・・。）
さて、今回はCSSの話。
文章の均等割付けに関する指定ができる「text-justify」プロパティですが、ネット上の情報だと少し古かったり、内容が難しかったりしますよね。
というわけで今回は、「text-justify」について知りたいCSS初心者さん向けに
・text-justifyの基本的な使い方を実際のコードを示して解説
の２本立てで説明していきます。
CSSを学び始めた初心者さんなど、text-justifyプロパティについて詳しく知りたい人はぜひ最後までご覧ください。
目次
text-justifyプロパティとは
text-justifyプロパティの読み方
text-justifyは【テキスト-ジャスティファイ】と読みます。
そのまま訳すとtextは「文章」、justifyは「正当化する」や「整える・そろえる」という意味。
テキストの均等割付に関するプロパティなので、CSSの世界では「整える・そろえる」といった意味合いが強いでしょう。
text-justifyプロパティの説明
text-justifyプロパティは、text-alignプロパティの値に justify を指定した際の、均等割付の形式を指定する際に使用します。
「均等割付ってなに？」
という人にカンタンに解説すると、Wordなどで文章を書いているとき、見やすさを考慮して途中で改行するときってありますよね？
その際、中途半端に改行している文章の両端を、規定の行幅にそろえることを均等割付（両端揃え）と言います。
text-justifyプロパティを使うことで、日本語や英語など、それぞれの言語に適した間隔で均等割付けをすることが可能です。
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」プロパティを使うときは、試験運用版の機能を有効にする必要があります。
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が効かない時に想定されるシーンは、先ほどβ版の説明をしましたが、「デフォルトでは効かない」という理由のほかに、だいたい次の２パターンになるかと思います。
- 文章の末尾の行だけ効かない
- 表を挿入する際の＜th＞タグに効かない
なぜこの場合に効かないのかというと、そもそも「text-align」の仕様で「最後の行は均等割付けしない」と決まっているからです。
例えば最後の行が3文字だった場合に均等割付けをしてしまうと、両端と真ん中に1文字ずつバラけることになります。
それでは文章の見た目がおかしくなってしまいますよね。
＜th＞タグも最後の段落と認識されているため、均等割付が効かないのでしょう。
text-justifyが効かない時の対処法
「text-align」プロパティの値には、今回紹介している「justify」だけでなく「justify-all」という値もあるのです。
この値を使うことで、最終行も強制的に均等割付けされます。
先ほども言ったように文章の見た目がおかしくなるので、あまり使うことはないかもしれませんが、知識として覚えておきましょう。
まとめ
いかがでしたでしょうか？今回は、text-justifyプロパティの概要と基本的な使い方について解説しました。
他のCSSプロパティとも関連してきたり、ブラウザによって動作状況が異なったりと、意外にややこしいtext-justifyプロパティ。
その割に使う頻度は高くないプロパティですが、こういうちょっとしたデザインが見やすさの向上につながり、結果としてユーザビリティの高いページになります。
この記事が、少しでもあなたの参考になれば幸いです。ぜひこれを機会に、CSSの学びを深めていってください。
最後までご覧いただき、ありがとうございました。
参考文献：htmlクイックリファレンス
参考文献：MDN Web Docs
