行間・文字間隔
line-heightletter-spacingword-spacing
テキストの読みやすさを左右する行間・文字間隔・単語間隔のCSSプロパティです。適切な設定により可読性を大きく向上させることができます。
デモ：line-height の違い
line-height: 1
日本語のテキストは行間が読みやすさに大きく影響します。このサンプルは行間が非常に狭い例です。
line-height: 1.7（推奨）
日本語のテキストは行間が読みやすさに大きく影響します。このサンプルは適切な行間の例です。
line-height: 3
日本語のテキストは行間が読みやすさに大きく影響します。このサンプルは行間が広すぎる例です。
デモ：letter-spacing / word-spacing
letter-spacing: normal
あいうえおかきくけこ — ABCDEFGHIJ
letter-spacing: 0.1em
あいうえおかきくけこ — ABCDEFGHIJ
letter-spacing: 0.3em
あいうえおかきくけこ — ABCDEFGHIJ
word-spacing: normal
Hello World — This is a word spacing demo
word-spacing: 1em
Hello World — This is a word spacing demo
コード例
/* line-height: 単位なし（推奨） */
p {
line-height: 1.7; /* フォントサイズの1.7倍 */
}
/* letter-spacing: emを使うと文字サイズに比例 */
h1 {
letter-spacing: 0.05em; /* 文字サイズの5% */
}
/* word-spacing: 単語間隔 */
.spaced {
word-spacing: 0.5em;
}
/* lh単位（2023年〜）: line-heightの単位 */
.margin-lh {
margin-bottom: 1lh; /* 1行分のマージン */
}
/* ex単位: x-heightの高さ */
.small-cap {
font-size: 0.8ex;
}比較：line-height の単位ありvs単位なし
| 指定方法 | 単位なし（例: 1.7） | px / em（例: 1.7em） |
|---|---|---|
| 子要素への継承 | ✅ 倍率として継承（子の font-size × 1.7） | ⚠️ 計算済みのpx値が継承される |
| font-size変更時 | ✅ 自動的に追従する | ❌ 親のfont-sizeに固定される |
| 推奨度 | ⭐ 推奨（柔軟でバグが少ない） | 注意が必要 |
| 使用例 | line-height: 1.7 | line-height: 1.7em |
NEWlh 単位 — line-height ベースの相対単位（2023年〜）
lh 単位は要素の line-height を基準にした相対単位です。 テキストの行数に比例したスペーシングが簡単に実現できます。
/* lh単位: 1行分の高さを基準にした単位 */
.paragraph {
line-height: 1.7;
margin-bottom: 1lh; /* 1行分のマージン（= font-size × 1.7） */
padding-top: 0.5lh; /* 半行分のパディング */
}
/* rlh単位: ルート要素のline-heightを基準 */
.element {
margin: 1rlh;
}🤖 AIプロンプトテンプレート
CSSの行間・文字間隔プロパティを使った可読性デモをReact + Tailwind CSSで作成してください。 要件: - line-height の値（1 / 1.4 / 1.7 / 2）を切り替えて比較できるインタラクティブデモ - letter-spacing / word-spacing の値をスライダーで変更できるデモ - 単位なしのline-height（推奨）と単位ありの違いを継承の観点で比較する説明 - 日本語テキストと英語テキスト両方での表示確認ができるサンプル - lh単位（1行分の高さ）を使ったスペーシングの実例 - タイポグラフィのベストプラクティス（推奨値）をまとめた比較表
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。