CSSのtext-justifyプロパティとは？使い方と各値の解説
text-justifyプロパティとは
CSSのtext-justifyプロパティは、text-alignプロパティにjustify(両端揃え)が指定されている場合に、テキストをどのような方法で均等割り付けするかを制御するためのプロパティです。単語間のスペースで調整するか、文字間のスペースで調整するかなどを細かく指定できます。
構文
text-justify: auto | inter-word | inter-character | none | initial | inherit;
プロパティの値一覧
- auto — ブラウザが最適な揃え方を自動的に判断します(既定値)。
- inter-word — 単語と単語の間隔を伸縮させて両端揃えを行います。英語など、単語ごとに区切られる言語に適した方式です。
- inter-character — 文字と文字の間隔を伸縮させて両端揃えを行います。日本語・中国語・韓国語などのCJK言語に適した方式です。
- none — 両端揃えを無効にします。
- initial — プロパティを初期値に戻します。
- inherit — 親要素の値を継承します。
実装例
それでは、実際にCSSでtext-justifyプロパティを使ったサンプルコードを見てみましょう。ここではinter-wordを指定して、単語間隔による両端揃えを実装しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: gray;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>
表示結果
上記のコードをブラウザで表示すると、グレーの背景の中に白いテキストが両端揃えで配置されます。inter-wordが指定されているため、行末までの余白は単語と単語の間のスペースとして分配されます。
次に、ブラウザのウィンドウ幅を変更してみましょう。
ウィンドウサイズが変わると、各行に収まるテキスト量が変化し、それに合わせて単語間のスペースも自動的に再調整されます。このようにtext-justifyプロパティを使うことで、レスポンシブ環境でも自然な両端揃えのレイアウトを実現できます。
まとめ
text-justifyプロパティは、text-align: justifyと組み合わせて使うことで効果を発揮します。英語圏向けのコンテンツにはinter-word、日本語などのCJK言語にはinter-characterを選択すると、より美しい均等割り付けが可能になります。対応ブラウザについては一部制限があるため、利用前に最新のブラウザサポート状況を確認しておくことをおすすめします。
-
CSSのrightプロパティとは？構文と使い方を実例付きで解説
CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini
-
CSSでテキストを整形する方法｜主要プロパティとサンプルコードを徹底解説
CSSを使うことで、テキストを見栄えよく整形し、読み手にとって魅力的なコンテンツを作成できます。この記事では、CSSでテキストのスタイルを設定する際に使用される主なプロパティについて、役割と使い方をわかりやすく解説します。 CSSの主なテキストフォーマット用プロパティ color（文字色） テキストの色を変更するためのプロパティです。カラーキーワード、16進数カラーコード、rgb()関数などで色を指定できます。 letter-spacing（文字間隔） 文字と文字の間隔を調整します。値を大きくすると字間が広がり、見出しなどにゆったりとした印象を与えられます。 line-height（行