text-justify:テキストの行端揃えに対して均等割り付けの方法を指定する
初期値 | auto |
適用対象 | インラインおよびテーブルセル要素 |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
text-justifyプロパティの説明
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
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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
で調整しましょう。
表示確認
CSS
.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;
}
HTML
<div class="samp_box">
<section class="tj_1">
<h1>text-justify: none;</h2>
<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;</h2>
<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;</h2>
<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;</h2>
<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>
text-justifyに関連するCSSプロパティ
テキスト関連 | |
---|---|
text-align | ボックスに含まれる内容の横位置の揃え方を指定する |
text-align-last | ボックスに含まれる内容の最後の行を揃える位置を指定する |
text-combine-upright | 一文字分の空間に挿入する文字の組み合わせを指定する |
text-decoration | 文字の装飾線に関する値を一括で指定する |
text-decoration-color | 文字に加えられた装飾線の色を指定する |
text-decoration-line | 文字に加えられた装飾線の種類を指定する |
text-decoration-skip-ink | 装飾線が文字を通過する祭の処理を指定する |
text-decoration-style | 文字に加えられた装飾線の形状を指定する |
text-decoration-thickness | 文字に加えられた装飾線の太さを指定する |
text-emphasis | テキストに付加する圏点、傍点、脇点に関する値を一括で指定する |
text-emphasis-color | テキストに付加する圏点、傍点、脇点の色を指定する |
text-emphasis-position | テキストに付加する圏点、傍点、脇点の位置を指定する |
text-emphasis-style | テキストに付加する圏点、傍点、脇点の記号を指定する |
text-indent | テキストの一行目に挿入するインデントの幅を指定する |
text-justify | テキストの行端揃えに対して均等割り付けの方法を指定する |
text-orientation | 縦書きモードの文字の向きを指定する |
text-overflow | 行からテキストが溢れている状態の表現方法を指定する |
text-shadow | 文字に影(ドロップシャドウ)を付ける |
text-transform | テキストの大文字・小文字の表記を指定する |
text-underline-position | 文字の下に引かれる装飾線の位置を指定する |