【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう

文章を表示する時、行と行の間が空いているか、詰まっているかで、印象や読みやすさが違います。
そんな行間（行の高さ）を指定するには line-heightプロパティを使います。

本日のINDEX

1. line-heightプロパティの値
2. line-height の値は「単位なし」がオススメ
3. line-height の構造
   1. ブロックレベルの要素での line-height の構造
   2. 非置換インラインの要素での line-height の構造
   3. 置換インラインの要素では line-height は無効

フォント関連のプロパティは、fontショートハンドプロパティで まとめて指定することができます。今回も含めて数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント（書体）を指定しよう

【26-2】font-sizeプロパティでフォントのサイズを指定しよう

【26-3】font-weightでフォントのウェイト（太さ）を指定しよう

【26-4】font-stretch で condensed などの文字幅を選択しよう

【26-5】font-styleプロパティでフォントを斜体に指定しよう

【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう　←今日はココ

【26-7】フォントをまとめて指定する fontショートハンドプロパティ

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font - CSS | MDN

line-heightプロパティの値

line-heightプロパティの値は以下のものがあります。

line-heightプロパティの値
単位のない数値	line-height は「単位なし」で指定することができます。 その要素自身のフォントサイズの高さが「1」となる相対値です。
単位付きの数値	em, ex, rem, px, pt などの単位を付けて数値で指定します。マイナスの値は不可 ※単位については【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）をご覧ください。
パーセンテージ	% で指定します。自分自身のフォントサイズを「100％」とした相対値になります
キーワード	normal これがデフォルト値。 フォントファミリーによって違うが、ブラウザは だいたい「1.2」を使います
グローバル値	line-height: inherit; 親のline-heightの値を継承（コレ書かなくても継承するけど） line-height: initial; 継承した親のline-heightの値を解消しデフォルト値に戻す line-height: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

line-height の値は「単位なし」がオススメ

line-heightプロパティ は「単位なし」の数値で指定できます。
これは、自分自身のフォントサイズを「1」とした相対値で指定できます。

値を「単位なし」の数値で指定するプロパティって、かなり少数派です。
line-height の他には、フレックスボックスの flex-grow, flex-shrinkプロパティくらいかな。

line-height を em、%、px などで指定すると、ボックス内にいろいろなフォントサイズの要素があっても、すべて親要素のフォントサイズを元に line-height が計算されるので、意図する行間にならないことがあります。

サンプルです。3番目のボックスだけがタイトルの行間がまともですね。

line-height: 1.2emで指定したボックス

このボックスは line-height: 1.2emで指定しています。

line-height: 18px で指定したボックス

このボックスは line-height: 18px で指定しています。

line-height: 1.2 で指定したボックス

このボックスは line-height: 1.2 で指定しています。

サンプルのHTMLはこちら。

<div class="mihon smpBox1">
  <h3>line-height: 1.2emで指定したボックス</h3>
  このボックスは line-height: 1.2em で指定しています。
</div>
<div class="mihon smpBox2">
  <h3>line-height: 18px で指定したボックス</h3>
  このボックスは line-height: 18px で指定しています。
</div>
<div class="mihon smpBox3">
  <h3>line-height: 1.2 で指定したボックス</h3>
  このボックスは line-height: 1.2 で指定しています。
</div>

CSSはこちら。

.mihon {
	font-size:15px;
	margin:0 .5em 1em 0;
	border:solid 1px #ccc;
	padding:.7em;
	width:25%;
	display:inline-block;
	vertical-align:top}
.mihon h3 {font-size:25px}
.smpBox1 {line-height:1.2em}
.smpBox2 {line-height:18px}
.smpBox3 {line-height:1.2}

.smpBox1 は、line-height: 1.2em なので、<h3>は 行間30px（25×1.2=30）になりそうなもんですが、外側の親要素 <div>のフォントサイズ 15px を基準に計算されてしまうので、15×1.2=18px になっちゃいます。
比較用に .smpBox2 を line-height: 18px にしましたが、同じですね。

.smpBox3 は line-height: 1.2（単位なし） にしたので、<h3>は 25×1.2=30px、本文は 15×1.2=18px になり、両方とも line-height は自分自身のフォントサイズに対する相対値になります。

というわけで、line-height の値は「単位なし」の数値がオススメです。

line-height の構造

下図は、実際に CSS で指定した表示のスクショに解説を入れた画像です。
<p>要素の中に <span>要素を入れ、<span>要素は backgroundを黄緑色にしています。この高さがフォントサイズです。
フォントサイズ50px、line-height を 1.6 で指定しています。

ソースコードはこちら。
<p>要素、<span>要素にインラインで CSSを書いてます。

<p style="font-size:50px; line-height:1.6; background:#69f; padding:0">
  <span style="background:#cf0">
  日本ごÈÇqpgyMx<br>
  font-size: 50px;<br>
  line-height: 1.6
  </span>
</p>

line-height は文字の上と下に均等につくことに注目。
行間は 80 - 50 = 30px ですが、文字の上に15px、下に15pxずつ付いてます。

グラフィック アプリケーション（Illustratorなど）だと「行送り」を指定すると、テキストの下にスペースが付くので、DTP のデザイナーは line-height もそうかと思いがちですが、ちょっと違うんです。

これは CSSレイアウトで大事なことなので覚えておこう。

ブロックレベルの要素での line-height の構造

例えば、上の図のブロックレベルの要素（<p>要素）に「ボーダー」をつけた場合。
単にボーダーをつけただけだと（図の左のボックス）、上下の空きより行間の空きのほうが大きくて変です。左側もつまっています。

そこで、p要素にpaddingを指定して整えます（図の右のボックス）
line-height が 1.6 なので、行間は 0.6 です。行の上に 0.3 、下に 0.3 空きがある状態。
ですので padding は、上下は 0.3em、左右は 0.6em にすればスッキリ。
line-height の構造を理解していれば、このように最適な指定ができますね。

非置換インラインの要素での line-height の構造

非置換インライン要素とは、中身がテキストである一般的なインラインの要素のこと。
<span>要素、 <b>、 <ins>、<a>要素 などです。

line-height の指定は、非置換インラインの要素だと ちょっと様子が違ってきます。

これは span要素のサンプルです。インラインの要素の場合、上下の margin は効きませんので、line-height で行間の空きスペースを作ります。padding は各行の上下左右に付けられます。

HTMLはこちら。

<div id="sample2">
<span>これは span要素のサンプルです。（...略）</span>
</div>

CSSはこちら。

div#sample2 {
	padding:1em;
    border:solid 1px #ccc}
div#sample2 span {
	background:#cf0;
	padding:1em 0;
	line-height:5}

サンプルでは、<span>要素に背景色をつけ、padding を上下に 1em ずつ付けています。
line-height が 5 なので、テキストと padding の合計 3em を引いた 2em が 行の上下に 1em ずつ付いている。
インラインでは、line-height も padding も、テキストの上端と下端から同時発生するんですね。ブロックレベルとずいぶん違いますね。
（ブロックレベルの padding は、line-height の外側にできますから）

インラインの要素でのレイアウトは、
●height は使えない→ padding で高さを作る。
●margin の上下は使えない→ line-height で行間を離す。指定した背景色がくっつかないようにするには、line-height で調整します。

非置換インライン要素・置換インライン要素については、こちらをご覧ください。
【9】HTML要素の インラインレベル・ブロックレベル について

置換インラインの要素では line-height は無効

置換インライン要素とは、インラインの要素の中でも中身がテキストでない他のものに置き換わる要素です。<img> <input> 要素などがあります。
これらは、line-height は無効。指定しても何も起こりません。

下のボタン（ <input type="image"> ）は「line-height: 10」を指定しています。外枠からの開きが広がらず、line-height が無効なのがわかります。

下は <span>要素に「line-height: 10」を指定。line-height は効いていますね。

span要素に line-height: 10 を指定

上の2つのサンプルのソースはこちら。CSSはインラインで書いてます。

<div style="border:solid 1px #ccc; padding:10px; margin:1em 0">
  <input type="image" src="image/btnImage.jpg" alt="送信する" width="200" height="40" 
  style="margin-top:0.5em; line-height:10">
</div>

<div style="border:solid 1px #ccc; padding:10px; margin:1em 0; font-size:15px">
  <span style="line-height:10">span要素に line-height: 10 を指定</span>
</div>

次回予告

次回は、fontショートハンドプロパティを使います。
これは、今回の line-height も含めて、これまでやったフォントに関するプロパティの値を全部まとめて指定できるプロパティです。