HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テキスト ジャスティファイ

text-justifyプロパティ

テキストの幅を均等にするためのプロパティです。

  • 初期値

    auto

  • 継承

    継承あり

  • 適用できる要素

    ブロックレベル要素

次のような値を設定することができます。このプロパティは、text-alignプロパティで「justify」を指定されている上で使用する必要があります。

  • auto – 自動的にテキストの幅を割り振ります
  • distribute – 値に「newspaper」を指定したときのように間隔調整を行います。タイ語のようなアジア圏のテキストで使用すると便利です。
  • distribute-all-lines – 間隔の割り付け方は「distribute」と同じですが、こちらの値は最終行も含めて最適化を行います。
  • distribute-center-last – 値として策定中で、現在は未実装です。
  • inter-cluster – 単語と単語の間にスペースを持たないような言語に対し、テキスト幅の最適化を行います。主にアジア圏の言語に有効です。
  • inter-ideograph – 「inter-word」と同じようにスペース調整を行いつつ、加えて研究などの専門用語についてもスペース調整を適用します。
  • inter-word – 単語と単語の間にあるスペースに対し幅を割り振って、行の幅を調整します。この値は最終行の幅には影響を与えません。
  • kashida – テキスト中の句点や句読点の幅を調整し、テキストの幅を調整します。IE5.5以降で対応しています。
  • newspaper – 文字と文字の間や、テキスト同士の間を自動調整し、テキストの幅を揃えます。ラテンアルファベットに対し、最も綺麗に調整できる値です。

パターン1

次の例では、上記の値をそれぞれ指定しています。IE9以降のブラウザのみ対応となるので、Macで見た場合やFirefox、Chromeなどでは特にCSSが適用されません。

CSSコード例

.sample_css1 .text1 {
	text-align: justify;
	text-justify: distribute;
}
.sample_css1 .text2 {
	text-align: justify;
	text-justify: inter-word;
}

表示例:

このコードは「text-justify」の使用例です。対応しているブラウザでのみ、指定した値に応じてテキストの間隔が調整されます。

表示例:

このコードは「text-justify」の使用例です。対応しているブラウザでのみ、指定した値に応じてテキストの間隔が調整されます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。