text-justifyプロパティは、`text-align: justify;`が設定されているときに、テキストの行内における配置方法を指定します。これにより、文字間や単語間のスペースの扱いを細かく制御することができます。
text-justifyの値とその効果の一覧
- auto: ブラウザが最適と判断した方法で文字間や単語間を調整します。
- inter-word: 単語間のスペースを調整して、行を均等にします。英文に適している。
- inter-character: 文字間のスペースを調整して、行を均等にします。日本語に適している。
- none: 均等割り付けを無効にし、通常のテキスト配置になります。
注意点と関連情報
text-justifyプロパティは、text-align: justify;と一緒に使用する必要があります。対応しているブラウザが限られるため、ブラウザ互換性には注意が必要です。また、特に多言語コンテンツを扱う場合、文字間隔の違いに注意して適用することが推奨されます。
text-justifyが効かない時の原因と対策
text-align: justifyが設定されていない
text-justifyは、text-align: justifyと一緒に使用して、テキストの両端揃えの際にスペースをどのように配分するかを指定します。text-alignがjustify以外の値（例: left, right, center）になっていると、text-justifyは機能しません。
対策: text-justifyを使用する際は、text-align: justify;を併用します。例えば、text-align: justify; text-justify: inter-word;のように指定します。
インライン要素に適用している
text-justifyは、ブロックレベルの要素に対してのみ効果を発揮します。インライン要素（例: <span>, <a>）に適用しても、効果は現れません。
対策: text-justifyをブロックレベル要素（例: <p>, <div>）に適用します。例えば、<p style="text-align: justify; text-justify: inter-word;">のように指定します。
word-breakやwhite-spaceプロパティが影響している
word-breakやwhite-spaceプロパティが設定されていると、text-justifyが期待通りに動作しないことがあります。例えば、word-break: break-all;やwhite-space: nowrap;が設定されている場合、単語の間でのスペース調整ができなくなり、text-justifyの効果が薄れます。
対策: word-breakとwhite-spaceのプロパティを確認し、必要に応じてこれらを調整します。例えば、word-break: normal;やwhite-space: normal;に設定することで、text-justifyが効果的に機能するようにします。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 400px;
background-color: #f9f9f9;
}
.css-sample-text {
border: 1px solid #999;
padding: 10px;
font-size: 16px;
text-align: justify;
}text-justify: auto
ブラウザが自動で最適な調整を行います。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-auto">
これはtext-justify: auto; の表示例です。この文章は均等割り付けされ、ブラウザが最適と考えた間隔で配置されます。
</div>
</div>CSSコード
.css-sample-text-auto {
text-justify: auto;
}表示結果
text-justify: inter-word
単語間のスペースを調整して、行を均等にします。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-inter-word">
これはtext-justify: inter-word; の表示例です。単語間のスペースを調整して行を均等にします。
</div>
</div>CSSコード
.css-sample-text-inter-word {
text-justify: inter-word;
}表示結果
text-justify: inter-character
文字間のスペースを調整して、行を均等にします。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-inter-character">
これはtext-justify: inter-character; の表示例です。文字間のスペースを調整して行を均等にします。
</div>
</div>CSSコード
.css-sample-text-inter-character {
text-justify: inter-character;
}表示結果
text-justify: none
均等割り付けを無効にし、通常のテキスト配置になります。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-text css-sample-text-none">
これはtext-justify: none; の表示例です。均等割り付けを無効にし、通常のテキスト配置になります。
</div>
</div>CSSコード
.css-sample-text-none {
text-justify: none;
}表示結果
まとめ
- text-justifyは、text-align: justify;が設定されている際に、行内のスペースの調整方法を定義するプロパティです。
- 主に4つの値があり、それぞれ文字や単語の間隔を調整します。
- ブラウザによって異なる表示結果を出す可能性があるため、互換性に注意が必要です。