text-justifyプロパティの説明
CSSのtext-justifyプロパティは、テキストの行端揃えに対して均等割り付けの方法を指定します。均等割り付け（きんとうわりつけ）とは、要素の幅に合わせてテキストを等間隔に並べる機能です。HTMLでは行に収まる単語をコンテンツ・エリアの両端にそろえて、余白を単語間に均等に割り当てます。
text-alignの値にjustifyが指定された要素は、最終行を除くテキストを行端揃えで配置しますが、その祭に単語の間に割り振られる空間の計算方法を指定することができます。
最終行を含めてテキストを全て行端揃えにしたい場合は、text-align-lastの値にjustifyを指定します。
text-justifyに指定できる値
none- テキストの行端揃えを無効にします。これは
text-alignのjustifyを一時的に停止したい場合などに有効です。ただし、text-align-lastの効果は打ち消しません。 auto- ブラウザが言語設定や環境に合わせて自動的に処理します。これが初期値です。
inter-word- 単語ごとの間隔を調整してテキストを揃えます。機能としては
word-spacingを変化させることになります。英語などの単語ごとに区切られた文章に適しています。 inter-character- 文字ごとの間隔を調整してテキストを揃えます。機能としては
letter-spacingを変化させることになります。日本語などの単語ごとに区切りのない文章に適しています。 distribute（非推奨）- 文字ごとの間隔を調整してテキストを揃えます。機能としては
inter-characterの後方互換です。
text-justifyの使い方とサンプルコード
text-justifyプロパティの構文は以下の通りです。
/* キーワード値 */
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* 非推奨 */
/* グローバル値 */
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: unset;
text-justifyの実例
それでは実際にtext-justifyプロパティの書き方を見ていきましょう。以下の例は、text-alignとtext-align-lastの両方にjustifyを指定した段落の挙動です。対応しているブラウザであれば、テキストが行端揃えで並びます。
text-justifyに対応していないブラウザでは、値を変更しても効果が現れません。単語同士の間隔はword-spacing、文字同士の間隔はletter-spacingで調整しましょう。
<div class="samp_box">
<section class="tj_1">
<h1>text-justify: none;</h1>
<p>This element have text-align: justify;<br>Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
<p>日本語の行端揃えを確認します。<br>この段落はスタイルシートを使って文字を両端に揃えています。文字た単語の間隔は、該当するプロパティの値によって変わります。</p>
</section>
<section class="tj_2">
<h1>text-justify: auto;</h1>
<p>This element have text-align: justify;<br>Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
<p>日本語の行端揃えを確認します。<br>この段落はスタイルシートを使って文字を両端に揃えています。文字た単語の間隔は、該当するプロパティの値によって変わります。</p>
</section>
<section class="tj_3">
<h1>text-justify: inter-word;</h1>
<p>This element have text-align: justify;<br>Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
<p>日本語の行端揃えを確認します。<br>この段落はスタイルシートを使って文字を両端に揃えています。文字た単語の間隔は、該当するプロパティの値によって変わります。</p>
</section>
<section class="tj_4">
<h1>text-justify: inter-character;</h1>
<p>This element have text-align: justify;<br>Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
<p>日本語の行端揃えを確認します。<br>この段落はスタイルシートを使って文字を両端に揃えています。文字た単語の間隔は、該当するプロパティの値によって変わります。</p>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background: #fff;
}
section > h1 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: 1rem 0 0;
text-align: justify;
text-align-last: justify;
}
.tj_1 p {
text-justify: none;
}
.tj_2 p {
text-justify: auto;
}
.tj_3 p {
text-justify: inter-word;
}
.tj_4 p {
text-justify: inter-character;
}