line-height:行の高さを指定する
初期値 | normal |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | する |
アニメーション | <length>値、<number>値 |
対応ブラウザ | caniuseで確認 |
line-heightプロパティの説明
line-height
は、テキストが並ぶ行の高さを指定します。具体的にはCSSのボックス・モデルにおける行ボックスの高さを表します。ブロック要素に対しては、その要素に含まれる行ボックスの最小の高さとなり、非置換インライン要素では、行ボックスの高さの計算に使われる値となります。
このプロパティは、主にページ全体の行間を整えるために使用されます。多くの場合、単位なしの番号を用いてline-height: 1.5;
のように記述します。
line-heightに指定できる値
- normal
- ブラウザの既定値を採用します。多くの場合、
font-family
に付随する1.2
程度の高さとなります。 - <number>(推奨)
- 単位なしの数字で指定します。小数点を含む正の数値が使用可能です。ここで指定される値はフォントサイズの倍数を意味します。例えば、
1.5
であれば行間はフォントサイズで得られる1
の高さの1.5倍の幅となります。 - <length>
- CSSで使用できる単位つきの長さを表す数値です。フォントサイズを基準とする
em
などを使用すると、意図しない場所でレイアウトが崩れることがあります。 - <percentage>
- 要素のフォントサイズに対する割合を表します。指定されたパーセンテージにフォントサイズを掛け合わせたものが計算結果として使われます。文字の大きさが変わるような要素で使用すると、意図しない場所でレイアウトが崩れることがあります。
line-heightの使い方とサンプル
line-height
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
line-height: normal;
/* <number>値 */
line-height: 1.5;
line-height: 2;
/* <length>値 */
line-height: 16px;
line-height: 1.5em;
line-height: 2rem;
/* <percentage>値 */
line-height: 16%;
line-height: 120%;
/* グローバル値 */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: unset;
line-heightの実例
それでは実際にline-height
プロパティの書き方を見ていきましょう。以下の例は、同じ内容の要素を並べて行間の寸法を変えた時の比較です。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 1rem;
background: #eee;
display: grid;
grid: repeat(2, auto) / repeat(3, 1fr);
gap: 1rem;
resize: horizontal;
}
.samp_box > div {
padding: .3rem;
background: #fff;
}
.samp_box h2 {
margin: 0;
font-size: 1rem;
}
.samp_box p {
margin: 0;
border: 1px solid #fff;
}
#lh_norm {
line-height: normal;
}
#lh_1 {
line-height: 1.5;
}
#lh_2 {
line-height: 2;
}
#lh_1em {
line-height: 1.5em;
}
#lh_2em {
line-height: 2em;
}
#lh_90p {
line-height: 90%;
}
HTML
<section class="samp_box">
<div id="lh_norm">
<h2>normal</h2>
<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
</div>
<div id="lh_1">
<h2>1.5</h2>
<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
</div>
<div id="lh_2">
<h2>2</h2>
<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
</div>
<div id="lh_1em">
<h2>1.5em</h2>
<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
</div>
<div id="lh_2em">
<h2>2em</h2>
<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
</div>
<div id="lh_90p">
<h2>90%</h2>
<p>行間の設定は単位なしの数値で行うことを推奨します。単位の指定は他のプロパティの影響を受けてレイアウトが崩れることがあります。</p>
</div>
</section>
単位つきの値で行間を指定する場合
line-height
の値に単位つきの数値を指定すると、想定したものとは違う挙動を示すことがあります。例えば、親要素のフォントサイズを継承した子要素が、別のフォントサイズを持つ場合に計算に使われるフォントサイズが変わります。
表示確認
line-heightに関連するCSSプロパティ
文字揃え・段落の振る舞い | |
---|---|
direction | 文字表記の方向(左右)を指定する |
hanging-punctuation | 句読点、括弧、引用符などの禁則処理を指定する |
letter-spacing | 文字同士の間隔を指定する |
line-break | 句読点や記号などの禁則処理を指定する |
line-height | 行の高さを指定する |
tab-size | タブ(tab)文字の表示幅を指定する |
unicode-bidi | Unicodeのアルゴリズムを上書きして文字表記の方向を変更する |
white-space | 要素内のホワイトスペースの扱い方を指定する |
word-break | 要素の幅を超過するテキストの自動改行について指定する |
word-spacing | 単語同士の間隔を指定する |
word-wrap | インライン要素に対して単語の途中で改行処理を行うかどうかを指定する |
writing-mode | テキストの書字方向やブロックのフローを指定する |
widows | ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する |