CSS辞典 line-heightプロパティの解説
行の高さを指定する「line-heightプロパティ」の使用方法を掲載
CSS3/2.1
対応ブラウザ
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome](https://kcfran.com/wp-content/uploads/2022/05/crome_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox](https://kcfran.com/wp-content/uploads/2022/05/firefox_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari](https://kcfran.com/wp-content/uploads/2022/05/safari_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge](https://kcfran.com/wp-content/uploads/2022/05/msedge_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie](https://kcfran.com/wp-content/uploads/2022/05/msie_icon.png)
![ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera](https://kcfran.com/wp-content/uploads/2022/05/opera_icon.png)
概要・使用方法
初期値 | normal |
適用される要素 | すべての要素 |
モジュール | CSS Fonts Module Level3及びLevel4 |
継承 | あり |
{line-height: 高さ;}
line-heightプロパティは行の高さを指定します。高さの値はピクセル、数値、フォントサイズに対する倍率や割合(%)で指定します。行の高さはline-heightとfont-sizeのサイズの差分を文字の上下に余白として挿入することで調整されます。
文字の上下に挿入される余白はレディング(leading)と呼ばれます。
![行の高さが調整される仕組み図](https://kcfran.com/wp-content/uploads/2022/06/image-226-1024x385.png)
行の高さはline-heightとfont-sizeのサイズの差分を文字の上下に余白を差し込むことで調整しています。全体で32pxの高さになる場合は、8pxずつ上下に空白行を挿入しています。
![コンテンツに合わせたボックスの高さ解説1](https://kcfran.com/wp-content/uploads/2022/06/image-227.png)
インラインボックス(span)や高さを指定していないブロックボックス(div)はボックス内のコンテンツの高さになります。フォントサイズを50pxに指定した場合、ブラウザによっては1.5倍の60pxに高さがなった場合、span要素やdiv要素も高さが60pxとなります。Safari/iOS Safariでは、インラインボックスの高さはフォントサイズで調整されるため高さが50pxとなります。
![コンテンツに合わせたボックスの高さ解説2](https://kcfran.com/wp-content/uploads/2022/06/image-229.png)
「line-heightプロパティ」を2倍すると、ブロックボックス(div)が高さが「line-heightプロパティ」の高さになります。ただし、span要素は60pxのままです。
値の指定方法
指定値 | 意味 |
---|---|
normal(初期値) | フォントサイズに従って自動的に指定されます。 |
none | 文字を太く表示する「700」の指定と同じ |
任意の数値+単位 | 親要素での指定よりも文字を太く表示する |
%値 | 親要素での指定よりも文字を細く表示する |
※倍率と%は要素のフォントサイズに対して処理されます。
使用できる任意の単位
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSサンプルページ</title>
<meta charset="uft-8">
<style>
p.type1{
line-height:2;
}
p.type2{
line-height:300%;
}
</style>
</head>
<body>
<h1 class="top">竹細工について</h1>
<div>
<h2>標準の行の高さ</h2>
<p>「竹」と一口に言ってもたくさんあり世界には1200種類の丈があるとも考えられています。日本ではそのうち600種類が生息していると言われて、なかでもよく見るのは真竹、孟宗竹、淡竹の3種類です。</p>
<h2>2倍の行の高さ</h2>
<p class="type1">うちわけは、真竹が6割、孟宗だけが2割、淡竹が1割となっています。この3種類で日本の竹の9割を占めていることになります。それだけに竹製品に使われることも多く、この3種類は「三大有用竹」とも呼ばれています。</p>
<h2>300%の行の高さ</h2>
<p class="type2">三大有用竹のなかでも竹のかごや器作りによく使われているのが真竹です。曲げやすく割りそぎもしやすいので、竹細工に向いているのです。身近なところに豊富にあった真竹が素材として優れた性質を備えていたからこそ、暮らしの役に立つ多様な竹のかごや器が生まれたのです。</p>
</div>
</body>
</html>
竹細工について
標準の行の高さ
「竹」と一口に言ってもたくさんあり世界には1200種類の丈があるとも考えられています。日本ではそのうち600種類が生息していると言われて、なかでもよく見るのは真竹、孟宗竹、淡竹の3種類です。
2倍の行の高さ
うちわけは、真竹が6割、孟宗だけが2割、淡竹が1割となっています。この3種類で日本の竹の9割を占めていることになります。それだけに竹製品に使われることも多く、この3種類は「三大有用竹」とも呼ばれています。
300%の行の高さ
三大有用竹のなかでも竹のかごや器作りによく使われているのが真竹です。曲げやすく割りそぎもしやすいので、竹細工に向いているのです。身近なところに豊富にあった真竹が素材として優れた性質を備えていたからこそ、暮らしの役に立つ多様な竹のかごや器が生まれたのです。
chromeブラウザ実行結果
![chrome](https://kcfran.com/wp-content/uploads/2022/06/image-222.png)
Firefox ブラウザ実行結果
![Firefox](https://kcfran.com/wp-content/uploads/2022/06/image-223.png)
edgeブラウザ実行結果
![edge](https://kcfran.com/wp-content/uploads/2022/06/image-224.png)
operaブラウザ実行結果
![opera](https://kcfran.com/wp-content/uploads/2022/06/image-225.png)