5.1 プロパティ line-height
テキストのパラメーターである line-height、letter-spacing、word-spacing は、ウェブページ上のテキストのスタイリングにおいて重要な役割を果たしてるんだ。これらは、それぞれ行間（テキスト間の距離）、文字間隔、単語間隔を制御するのに使われるよ。それでは、これらのプロパティを詳しく見ていこう。
line-height プロパティはテキスト行の高さを決めるんだ。隣接するテキスト行のベースライン間の距離を設定して、テキストの密度や読みやすさに影響を与えるよ。
値:
- 数値: 単位のない相対値（例: 1.5）で、現在のフォントサイズに乗じて計算される
- パーセンテージ値: フォントサイズに対しての相対値（例: 150%）
- 絶対値: 固定単位での値（例: ピクセル — 24px）
- キーワード
normal: デフォルト値、通常は1.2に相当する
使用例:
CSS
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
HTML
<body>
<p class="normal">これは通常の行の高さのテキストです。これは通常の行の高さのテキストです。</p>
<p class="one-point-five">これは行の高さが1.5のテキストです。これは行の高さが1.5のテキストです。</p>
<p class="double">これはダブル行の高さのテキストです。これはダブル行の高さのテキストです。</p>
</body>
5.2 プロパティ letter-spacing
letter-spacing プロパティは、文字間の距離、つまりテキストの文字間の追加スペースを決めるんだ。読みやすさの向上や視覚的効果の作成に利用できるんだよ。
値:
- 絶対値: 固定単位での値（例: ピクセル — 2px）
- 負の値: 文字間の距離を縮める（例: -1px）
- キーワード
normal: デフォルト値、追加スペースなし（0に相当）
使用例:
CSS
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
HTML
<body>
<p class="normal">これは通常の文字間隔のテキストです。</p>
<p class="wide">これは広い文字間隔のテキストです。</p>
<p class="narrow">これは狭い文字間隔のテキストです。</p>
</body>
5.3 プロパティ word-spacing
word-spacing プロパティはテキスト内の単語間の距離を決めるんだ。単語間にスペースを追加したり削除したりして、読みやすさの向上や視覚的効果の作成に役立つんだよ。
値:
- 絶対値: 固定単位での値（例: ピクセル — 4px）
- 負の値: 単語間の距離を縮める（例: -2px）
- キーワード
normal: デフォルト値、通常の単語間隔（通常は0）に相当する
使用例:
CSS
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
HTML
<body>
<p class="normal">これは通常の単語間隔のテキストです。</p>
<p class="wide">これは広い単語間隔のテキストです。</p>
<p class="narrow">これは狭い単語間隔のテキストです。</p>
</body>
GO TO FULL VERSION