HTMLの行間を詰めるCSS設定方法【line-height解説】

はい、承知いたしました。HTMLの行間を詰めるCSS設定方法、特にline-heightプロパティに焦点を当てた詳細な解説記事を作成します。約5000語を目指し、網羅的な内容と具体的な例を含めます。

---

HTMLの行間を詰めるCSS設定方法【line-height徹底解説】

ウェブデザインにおけるテキスト表示は、その可読性や美しさを大きく左右します。特に、テキストの「行間」は、コンテンツが読みやすいか、視覚的に快適かといったユーザー体験に直結する非常に重要な要素です。行間が狭すぎると文字が詰まって読みにくく、広すぎると散漫な印象を与えてしまいます。

HTMLで表示されるテキストの行間を調整するために、CSSでは主にline-heightプロパティを使用します。この記事では、このline-heightプロパティの基本的な使い方から、指定できる値の種類、それぞれの値がどのように計算され、要素に適用されるのか、さらには他のCSSプロパティとの関連性、実践的なテクニック、そしてよくある落とし穴まで、詳細かつ網羅的に解説します。ウェブサイトのタイポグラフィを改善したいすべての人にとって、役立つ情報となることを目指します。

1. 行間（line-height）とは何か？ なぜ重要なのか？

まず、「行間」とは具体的に何を指すのでしょうか？タイポグラフィの世界では、行間は「ベースライン間隔」と呼ばれることが多いです。ベースラインとは、アルファベットなどの文字が並ぶ仮想的な線のことです。HTMLにおける行間は、厳密にはこのベースライン間隔と少し異なりますが、概念としては似ています。

CSSのline-heightプロパティが指定するのは、厳密には各行のテキストが占める垂直方向の領域の高さ、すなわち「ラインボックス (Line Box)」の高さです。このラインボックスは、その行に含まれるすべてのインライン要素（テキスト、画像など）を囲む仮想的なボックスです。line-heightの値を調整することで、このラインボックスの高さを制御し、結果として各行のテキストの間にできる空白の量を調整します。

なぜ行間が重要なのでしょうか？その理由は主に以下の点にあります。

• 可読性の向上: 適切な行間は、目が次の行へスムーズに移動するのを助け、長文でも疲れずに読めるようにします。行間が狭すぎると、上の行の文字と下の行の文字が視覚的に干渉し合い、非常に読みにくくなります。逆に広すぎると、各行がバラバラに見え、文章全体のまとまりが失われます。
• デザインの美しさ: 行間は、フォントサイズやフォントファミリーと並んで、テキストの視覚的な印象を大きく左右します。適切な行間は、洗練されたプロフェッショナルな印象を与え、コンテンツの質を高めます。行間を調整することで、テキストブロックの密度や余白（ホワイトスペース）をコントロールし、ページ全体のレイアウトにリズムとバランスをもたらすことができます。
• ユーザー体験の向上: ウェブサイトの目的は、多くの場合、ユーザーに情報を伝えることです。情報が読みやすく整理されていれば、ユーザーはストレスなくコンテンツに集中できます。適切な行間は、ウェブサイト全体のユーザビリティとアクセシビリティを高める上で不可欠な要素です。

このように、line-heightは単なる装飾ではなく、ウェブサイトの機能性やユーザー体験に深く関わる基本的なCSSプロパティなのです。

2. line-height プロパティの基本

CSSで要素の行間を指定するには、line-heightプロパティを使用します。このプロパティは、テキストを含むブロックレベル要素（例: <p>, <div>, <h1>など）や、直接テキストが記述されるインライン要素（ただし、多くの場合、テキストを含む親のブロック要素に指定することが一般的です）に適用できます。

基本的な構文は以下の通りです。

css
セレクタ {
line-height: 値;
}

値には、いくつかの種類を指定できます。それぞれの値がどのように解釈され、行間に影響するのかを理解することが、line-heightを使いこなす上で最も重要です。

指定できる主な値の種類は以下の4つです。

1. normal (初期値)
2. <number> (単位なし数値)
3. <length> (長さの単位付き数値 例: px, em, rem, %)
4. <percentage> (パーセント値)

この他に、CSSの標準的な値であるinitial、inherit、unset、revertなども使用可能ですが、これらはプロパティ自体の値をリセットしたり、親から継承したりするためのもので、行間の具体的な高さを指定する値とは異なります。

それぞれの値について、詳しく見ていきましょう。

3. line-height の値の種類と解説

3.1. normal (初期値)

normalはline-heightの初期値です。この値が指定された場合、ブラウザのデフォルト設定に基づいて行間が計算されます。normalの値は、要素のfont-sizeに対する比率として解釈されることが一般的ですが、その具体的な比率はブラウザやOS、使用されるフォントによって異なります。

多くのブラウザでは、normalのline-heightはfont-sizeの約1.2倍から1.4倍程度になる傾向があります。ただし、これはあくまで目安であり、異なる環境で表示を確認しないと正確な値はわかりません。

特徴:

• ブラウザ依存のため、異なる環境で表示にばらつきが生じる可能性がある。
• 特定のフォントによっては、他の値よりも見た目のバランスが良い場合がある。

使用例:

“`html

これはline-heightがnormalの段落です。ブラウザのデフォルト設定に基づいて行間が調整されます。
多くのブラウザでは、フォントサイズに対して自然な行間が設定されます。

“`

css
.normal-line-height {
font-size: 16px;
line-height: normal; /* 初期値なので省略可能だが、明示的に指定することもできる */
border: 1px solid #ccc; /* デバッグ用に境界線を追加 */
}

normalは、特にCSSをリセットしていない場合や、特定の要素に行間を明示的に指定しない場合に適用される値です。多くの場合はこれで事足りるかもしれませんが、デザインの意図を正確に反映させたい場合や、異なるブラウザでの一貫性を保ちたい場合には、次に説明する具体的な数値を指定することが推奨されます。

3.2. <number> (単位なし数値)

単位なしの数値は、line-heightプロパティで最も推奨される値の形式です。これは、要素自体のfont-sizeに対する「倍率」を指定します。例えば、line-height: 1.5;と指定した場合、行の高さは要素のfont-sizeの1.5倍になります。

計算方法:

行の高さ = 要素の font-size × 単位なし数値

特徴:

• 継承の特性: この値が最も優れている点は、子要素への継承方法です。単位なし数値は、その数値自体（倍率）が子要素に継承されます。つまり、子要素が独自のfont-sizeを持っている場合、継承された倍率を使ってその子要素自身のfont-sizeに基づいた行の高さが計算されます。これにより、親要素と子要素でfont-sizeが異なっていても、行間がfont-sizeの変化に比例して自動的に調整され、全体としてバランスの取れたタイポグラフィを維持しやすくなります。
• 柔軟性とレスポンシブ対応: font-sizeをメディアクエリなどで変更した場合、line-heightもそれに追従してスケールするため、レスポンシブデザインにおいて非常に扱いやすいです。
• 一貫性: ブラウザやOSに依存せず、指定した倍率で計算されるため、環境による表示のばらつきが少ないです。

使用例:

“`html

“`

“`css
.parent {
font-size: 16px;
line-height: 1.5; / 単位なし数値 /
border: 1px solid blue;
padding: 10px;
}

.parent p {
margin: 0 0 1em 0; / 段落下の余白 /
border: 1px dashed rgba(0, 0, 255, 0.3); / デバッグ用 /
}

.child {
font-size: 20px; / 親よりも大きいフォントサイズ /
border: 1px solid red;
padding: 10px;
}

.child p {
margin: 0;
border: 1px dashed rgba(255, 0, 0, 0.3); / デバッグ用 /
}
“`

この例では、親要素にline-height: 1.5;を指定しています。子要素はfont-size: 20px;ですが、line-heightの値である1.5を継承し、その自身のfont-size（20px）に対して計算が行われるため、行の高さは30pxになります。もしここでパーセント値などを指定していた場合とは異なる結果になります（後述）。

本文の段落など、広範囲に適用する行間には、この単位なし数値を設定するのが最も一般的で推奨される方法です。1.5から1.8程度が一般的な本文の行間としてバランスが良いとされていますが、使用するフォントファミリーやfont-size、1行あたりの文字数（line length）によって最適な値は異なります。

3.3. <length> (長さの単位付き数値)

px (ピクセル)、em (親要素のfont-sizeに対する相対値)、rem (ルート要素のfont-sizeに対する相対値)、pt (ポイント) などの長さの単位を付けて指定します。

計算方法:

行の高さ = 指定された長さの値

特徴:

• 固定値: 指定した値がそのまま行の高さになります。
• 継承の特性: 長さの値は、計算済みの値 (computed value) が子要素に継承されます。例えば、親要素のfont-sizeが16pxでline-height: 24px;と指定した場合、親要素の計算上の行の高さは24pxです。子要素はこの24pxという値を継承します。たとえ子要素のfont-sizeが大きくても、継承されたline-heightが24pxであれば、行の高さは常に24pxになります。これは単位なし数値の場合とは決定的に異なります。
• 精確な制御: ピクセル単位で正確な行間を指定したい場合に有効です。

使用例:

“`html

“`

“`css
.parent-length {
font-size: 16px;
line-height: 24px; / 長さの単位付き数値 /
border: 1px solid blue;
padding: 10px;
}

.parent-length p {
margin: 0 0 1em 0;
border: 1px dashed rgba(0, 0, 255, 0.3);
}

.child-length {
font-size: 20px; / 親よりも大きいフォントサイズ /
border: 1px solid red;
padding: 10px;
}

.child-length p {
margin: 0;
border: 1px dashed rgba(255, 0, 0, 0.3);
}
“`

この例では、親要素にline-height: 24px;を指定しています。子要素はfont-size: 20px;ですが、親から継承するのは計算済みの値である24pxです。そのため、子要素の行の高さは24pxになります。これは子要素のfont-size（20px）に対して非常に狭い行間となり、文字が詰まって表示されます。

一般的に、本文の段落などの可変的なテキストに対しては、pxなどの固定単位でline-heightを指定することは避けるべきです。なぜなら、ユーザーがブラウザのフォントサイズ設定を変更したり、レスポンシブデザインでフォントサイズを調整したりした場合に、行間がそれに応じてスケールせず、レイアウトが崩れたり可読性が損なわれたりする可能性があるためです。

ただし、特定の要素（例: 見出しや短いキャプション）で、デザイン上の理由からピクセル単位で厳密に行間を制御したい場合や、単一行の要素を垂直方向の中央に配置するテクニック（後述）など、用途によっては有効な場合もあります。

emやrem単位を使用すると、ある程度の柔軟性を持たせつつ長さで指定できますが、継承の特性はpxと同様に「計算済みの値」が継承されるため、やはり単位なし数値ほど汎用的ではありません。

3.4. <percentage> (パーセント値)

パーセント値は、要素自体のfont-sizeに対する割合として指定します。例えば、line-height: 150%;と指定した場合、行の高さは要素のfont-sizeの150%になります。

計算方法:

行の高さ = 要素の font-size × (指定されたパーセント値 / 100)

line-height: 150%; は line-height: 1.5; と同じ行の高さになります。数値として同じ結果になるため、単位なし数値と同じように扱えると思いがちですが、継承の特性が異なります。

特徴:

• font-sizeに対する相対値: 要素自身のfont-sizeに基づいて計算されます。
• 継承の特性: パーセント値は、計算済みの値 (computed value) が子要素に継承されます。これは<length>と同じ挙動です。親要素のfont-sizeが16pxでline-height: 150%; (計算値 24px) と指定した場合、子要素はこの24pxという値を継承します。子要素のfont-sizeが異なっても、継承されたline-heightが24pxであれば、行の高さは常に24pxになります。

使用例:

“`html

“`

“`css
.parent-percent {
font-size: 16px;
line-height: 150%; / パーセント値 /
border: 1px solid blue;
padding: 10px;
}

.parent-percent p {
margin: 0 0 1em 0;
border: 1px dashed rgba(0, 0, 255, 0.3);
}

.child-percent {
font-size: 20px; / 親よりも大きいフォントサイズ /
border: 1px solid red;
padding: 10px;
}

.child-percent p {
margin: 0;
border: 1px dashed rgba(255, 0, 0, 0.3);
}
“`

この例でも、親要素にline-height: 150%;を指定しています。計算結果は24pxです。子要素はfont-size: 20px;ですが、親から継承するのは計算済みの値である24pxです。そのため、子要素の行の高さは24pxになります。

単位なし数値とパーセント値は、指定された要素自身の行の高さを計算する際には同じ結果になります（例: 1.5と150%）。しかし、子要素に継承される値が異なるため、ネストされた要素でfont-sizeが変わる場合に表示結果が大きく変わります。

単位なし数値 vs パーセント値 (継承の比較):

指定値	継承されるもの	子要素のfont-sizeが変わった場合	推奨用途
<number>	数値自体 (倍率)	子要素のfont-size × 継承された数値 で計算される → スケールする	最も推奨。 本文など広範囲のテキスト。
<percentage>	計算済み値 (px)	親要素で計算された固定値がそのまま適用される → スケールしない	限定的。特定の場所でのみ使用。
<length>	計算済み値 (px/em/rem)	親要素で計算された固定値がそのまま適用される → スケールしない	限定的。特定の場所でのみ使用。

この継承の特性の違いから、特別な理由がない限り、本文などの一般的なテキストには単位なし数値でline-heightを指定することがベストプラクティスとされています。 これにより、レスポンシブデザインやユーザーのフォントサイズ調整に対して、より頑健で予測可能なタイポグラフィを実現できます。

4. line-height はどのように機能するのか？ ラインボックスとリーディング

line-heightプロパティがどのように視覚的な行間を生み出しているのかを理解するためには、「ラインボックス」と「リーディング (Leading)」という概念を知る必要があります。

CSSのレンダリングモデルにおいて、インライン要素（テキストノードを含む）は「ラインボックス」と呼ばれる仮想的な矩形領域内に配置されます。各行は、その行に含まれるすべてのインライン要素を囲む単一のラインボックスを形成します。

line-heightプロパティが指定するのは、このラインボックスの最小の高さです（厳密には、より高いインライン要素があればラインボックスはそれに応じて高くなりますが、line-heightはテキストコンテンツによるラインボックスの高さの基準となります）。

テキストコンテンツ自体の高さは、主にそのfont-sizeによって決まる「コンテンツエリア」によって定義されます。コンテンツエリアの高さは、フォントのメトリクス（上昇部分 ascender と下降部分 descender の合計など）に基づいてブラウザが計算します。

line-heightプロパティが指定する値が、このコンテンツエリアの高さよりも大きい場合、余分な垂直方向のスペースが生まれます。この余分なスペースを「リーディング」と呼びます。line-heightによって生じたリーディングは、テキストのコンテンツエリアの上と下に均等に分配されます。

具体的には、line-heightの値から要素のfont-sizeによって決まるコンテンツエリアの高さを引いた値がリーディングの合計です。この合計リーディングの半分がテキストコンテンツエリアの上に、もう半分が下に加えられ、その行全体のラインボックスの高さが形成されます。

ラインボックスの高さの構成:

ラインボックスの高さ = コンテンツエリアの高さ + リーディング（上半分） + リーディング（下半分）

ここで、

リーディング（合計） = line-heightの値 - コンテンツエリアの高さ
リーディング（上半分） = リーディング（下半分） = リーディング（合計） / 2

例えば、font-size: 16px; の要素に line-height: 24px; を指定した場合を考えます。仮にコンテンツエリアの高さが16pxとすると（実際はフォントによって異なりますが、ここでは簡略化）、

リーディング（合計） = 24px - 16px = 8px
リーディング（上半分） = リーディング（下半分） = 8px / 2 = 4px

となります。つまり、テキストコンテンツの上と下にそれぞれ4pxずつの余白が追加され、合計で24pxのラインボックスが形成されます。次の行のラインボックスも同様に形成され、そのラインボックスの上端が前の行のラインボックスの下端に接するように配置されます。これにより、各行の間に視覚的な空間が生まれます。

![line-heightの構造イメージ図（テキストコンテンツ、リーディング、ラインボックス）の簡単な説明]

(補足): コンテンツエリアの正確な高さは、font-sizeだけで決まるわけではなく、使用するフォントファイルの内部的な情報（フォントメトリクス）に依存します。しかし、概念としてはline-heightからコンテンツエリアの高さを引いたものが余白（リーディング）となり、それが上下に分配されると理解しておけば十分です。ブラウザの開発者ツールなどで要素を選択し、ボックスモデルを確認すると、このラインボックスの計算された高さ（Computed line-height）を見ることができます。

5. 実践的なline-heightの設定方法と例

では、実際にウェブサイトでline-heightをどのように設定すれば良いのでしょうか。一般的なアプローチと、いくつかの具体的な使用例を紹介します。

5.1. 全体的な行間の設定（body要素）

ウェブサイト全体の基本的な行間は、多くの場合body要素に設定します。これにより、特に指定のないほとんどのテキスト要素（<p>, <h1>～<h6>, <li>など）にその行間が継承されます。単位なし数値で指定するのがおすすめです。

“`css
body {
font-family: “Hiragino Sans”, “Meiryo”, sans-serif; / フォント設定 /
font-size: 16px; / ベースとなるフォントサイズ /
line-height: 1.6; / 本文として読みやすいとされる値 /
color: #333; / 文字色 /
}

h1, h2, h3 {
/ 見出しは本文より行間を狭くすることが多い /
line-height: 1.2;
margin-top: 1.5em; / 上の要素との間隔 /
margin-bottom: 0.5em; / 本文との間隔 /
}

p {
/ 段落下のマージンで段落間を開ける /
margin-bottom: 1em;
}
“`

この例では、body要素にline-height: 1.6;を設定しています。これにより、特に指定のない<p>などの要素は、そのfont-size（bodyから継承した16pxなど）に対して1.6倍の行間になります。見出し (h1～h3) は本文よりも大きなfont-sizeを持つため、line-height: 1.2;のように本文より少し狭い倍率を指定することが一般的です。これは、見出しが短いテキストであり、ぎゅっと詰まった方が視覚的なまとまりやインパクトが増す傾向があるためです。

5.2. リスト要素の行間

リスト (<ul>, <ol>, <dl>) の各項目 (<li>, <dt>, <dd>) の行間も、親要素から継承されるか、リスト要素自体に設定されたline-heightが適用されます。リスト項目間の垂直方向の間隔を調整したい場合は、line-heightだけでなく、margin-bottomなどのマージンプロパティも合わせて使うことが多いです。

“`css
ul, ol {
/ リスト全体の行間はbodyから継承 /
line-height: 1.6; / bodyから継承されたline-height /
margin-bottom: 1em; / リスト下の余白 /
}

li {
/ 個別のリスト項目の行間はul/olから継承 /
line-height: inherit; / 明示的に継承 /
/ リスト項目間の間隔はline-heightだけでなくmargin-bottomも使うと良い /
margin-bottom: 0.5em;
}
“`

リスト項目の内容が複数行にわたる場合、line-heightはその行内の垂直間隔を調整します。リスト項目ごとの間隔は、li要素にmargin-bottomを設定することで調整できます。line-heightとmarginを組み合わせることで、リストのレイアウトを細かく制御できます。

5.3. フォーム要素やボタンの行間

フォームの入力フィールド（<input type="text">, <textarea>）やボタン（<button>, <input type="button">など）に含まれるテキストも、line-heightの影響を受けます。特に、単一行の要素である入力フィールドやボタン内でテキストを垂直方向の中央に配置するテクニックとして、line-heightを使うことがよくあります。

“`css
input[type=”text”],
textarea,
button {
padding: 10px; / 内側の余白 /
font-size: 16px; / フォントサイズ /
/ heightと同じ値をline-heightに指定することで、単一行テキストを垂直中央揃え /
height: 40px;
line-height: 40px; / heightと同じ値 /
border: 1px solid #ccc;
vertical-align: middle; / 他のインライン要素との垂直位置調整 /
}

textarea {
/ textareaは複数行なので、line-heightは高さとは別の値を使う /
height: auto; / 高さは自動またはrows属性などで指定 /
line-height: 1.4; / 複数行テキストに適した行間 /
vertical-align: top; / デフォルトの縦位置に戻す /
}
“`

単一行の入力フィールドやボタンの場合、heightプロパティで行の高さを指定し、line-heightプロパティにもそのheightと同じ値を指定することで、含まれるテキストがその要素内で垂直方向の中央に配置されます。これは、line-heightによって作られるラインボックスの上下のリーディングが均等に分配される性質を利用したテクニックです。ただし、これは単一行のテキストにのみ有効です。複数行になりうる<textarea>ではこのテクニックは使えず、適切な行間を指定する必要があります。

5.4. 画像とテキストの垂直位置調整 (vertical-align)

line-heightは、同一ラインボックス内のインライン要素（テキスト、画像、spanなど）の垂直方向の配置にも影響を与えます。特に、画像とテキストを並べた際に、テキストが画像のベースラインに揃ってしまい、見た目が悪くなることがあります。これを調整するには、vertical-alignプロパティを使用します。vertical-alignは、親要素のline-heightによって形成されるラインボックス内で、そのインライン要素をどのように垂直配置するかを指定します。

“`html

アイコン付きのテキストです。画像とテキストの垂直位置を調整します。

“`

“`css
.image-text {
font-size: 16px;
line-height: 1.6; / ラインボックスの高さを決定 /
border: 1px solid #ccc; / デバッグ用 /
}

.icon {
/ line-heightによって作られたラインボックス内で、画像を垂直中央に配置 /
vertical-align: middle;
/ 画像の下に不要な余白が入るのを防ぐ場合はdisplay: blockまたはvertical-align /
display: inline-block; / or inline /
}
“`

line-heightがラインボックスの高さを決定し、vertical-align: middle;はそのラインボックス内で画像が垂直方向の中央に来るように調整します。vertical-alignは親要素のline-heightによって規定されるラインボックスの高さがないと正しく機能しない場合があるため、セットで理解することが重要です。

5.5. CSSフレームワークでのline-height

BootstrapやTailwind CSSのようなCSSフレームワークでは、あらかじめベースとなるline-heightが設定されています。例えば、Bootstrapでは要素のリセットとしてbodyにline-heightが設定されており、Tailwind CSSではleading-{size}というユーティリティクラスでline-heightを調整できます。

CSSフレームワークを使用する場合は、そのフレームワークのデフォルト設定を理解し、必要に応じて上書きまたはカスタマイズすることが一般的です。フレームワークの提供するline-height関連のクラスや変数を利用することで、設計の一貫性を保ちつつ効率的にスタイリングできます。

6. line-heightと他のプロパティとの関係

6.1. line-height と font-size

前述の通り、line-heightの単位なし数値、長さ（em, rem）、パーセント値は、要素自身のfont-sizeに基づいて行の高さが計算されます。font-sizeが変われば、これらのline-heightも自動的にスケールします。

特に単位なし数値を使用する場合、font-sizeとline-heightは密接に関連しています。font-sizeを大きくすれば行の高さも大きくなり、小さくすれば行の高さも小さくなります。この性質が、レスポンシブデザインにおいて非常に有用です。

“`css
/ 例: レスポンシブ対応 /
body {
font-size: 16px;
line-height: 1.6;
}

/ 画面幅が狭い場合はフォントサイズを少し小さく /
@media (max-width: 768px) {
body {
font-size: 15px;
/ line-heightは単位なし数値なので、font-sizeに合わせて自動的に調整される /
}
}
“`

この例では、画面幅が狭くなったときにfont-sizeを16pxから15pxに変更していますが、line-heightは1.6のままです。しかし、単位なし数値である1.6は要素のfont-sizeに対する倍率として解釈されるため、狭い画面幅では行の高さが 15px × 1.6 に自動的に調整され、広い画面幅の 16px × 1.6 よりも小さくなります。これにより、異なるフォントサイズでも適切な比率の行間が保たれます。

6.2. line-height と vertical-align

これは既に少し触れましたが、vertical-alignプロパティはインライン要素（テキスト、画像、<img>, <span>など）が、その要素を含むラインボックスの中でどのように垂直方向に配置されるかを指定します。

line-heightは、そのラインボックス自体の高さを決定します。vertical-alignは、その決定されたラインボックスの高さの中で、要素の基準線（ベースライン、要素の上端/下端など）を、親要素のベースライン、中央、テキストの上端/下端などに揃えるように調整します。

“`html

Normal Text and an Aligned Text span.

Normal Text and an small icon.

“`

“`css
p {
font-size: 16px;
line-height: 32px; / ラインボックスをかなり高く設定 /
border: 1px solid blue;
}

.aligned-text {
font-size: 24px; / 大きなテキスト /
background-color: yellow; / デバッグ用 /
/ デフォルトのvertical-alignはbaselineなので、親のベースラインに揃う /
vertical-align: baseline; / (デフォルト) /
}

.aligned-text.middle {
vertical-align: middle; / ラインボックスの中央にテキストの中央を揃える /
}
“`

line-height: 32px;によって、各行のラインボックスの高さは32pxになります。

• vertical-align: baseline; (デフォルト): <span>要素のベースラインが、親の<p>要素のベースラインに揃えられます。<span>のフォントサイズが大きいため、ラインボックスの下端からはみ出ているように見えるかもしれません（実際にはラインボックスは、その行に含まれる最も背の高いインライン要素に合わせて拡張されますが、line-heightがその最低限の高さを規定します）。
• vertical-align: middle;: <span>要素の中央が、親のラインボックスの中央に揃えられます。画像の場合も同様に、画像の中心がラインボックスの中心に揃えられます。

line-heightが行全体のスペースを規定し、vertical-alignはそのスペース内での個々のインライン要素の位置を調整する、という関係性を理解することが重要です。

6.3. line-height と margin/padding

line-heightはテキスト行自体の高さと、行間に含まれる垂直方向の余白（リーディング）を制御します。これは行内の垂直間隔です。

一方、marginとpaddingは、要素の境界線の外側または内側にできる空間を制御します。これらは通常、要素と要素の間の垂直間隔や、要素の内容と境界線の間の空間を調整するために使用されます。

“`html

これは最初の段落です。

これは次の段落です。

“`

“`css
p {
font-size: 16px;
line-height: 1.6; / 行間の設定 /
/ margin-bottomで段落間の垂直間隔を調整 /
margin-bottom: 1em;
background-color: #eee; / デバッグ用 /
}

.spaced-paragraph {
margin-top: 2em; / 上の段落との間にさらに大きなスペースを追加 /
}
“`

この例では、line-height: 1.6;が各段落内の複数行テキストの行間を調整します。margin-bottom: 1em;は、各段落の下に1em（現在のフォントサイズ、16px）の余白を追加し、前の段落との間に視覚的な区切りを作ります。.spaced-paragraphクラスでは、さらに大きなmargin-topを指定して、上の段落との間隔を広げています。

line-heightは行内の見た目を、marginとpaddingは要素間の配置や要素内部の余白を制御するという違いを明確に理解しておくことが重要です。特に、段落間のスペースを空ける際には、line-heightではなくmargin-bottomを使用するのが一般的です。

7. line-height の調整と可読性・デザイン

適切なline-heightは、ウェブサイトの可読性とデザイン品質に直結します。どのような値を設定すれば良いかは、使用するフォント、フォントサイズ、そして最も重要な要素である1行あたりの文字数（line length）に依存します。

7.1. 可読性のための目安

一般的な本文テキストの場合、line-heightはfont-sizeの1.4倍から1.8倍程度が読みやすいとされています。

• line-height: 1.4; 程度: 少し詰まった印象、密度が高いデザインに適していることがあります。
• line-height: 1.6; 程度: ウェブ上で最も一般的でバランスが良いとされる値です。
• line-height: 1.8; 程度: ゆったりとした印象、広い行間が必要な場合（例: 読みやすさを重視するコンテンツ、高齢者向けサイトなど）に適しています。

ただし、これはあくまで目安です。使用するフォントによって、同じline-heightの値でも見た目の行間は大きく変わります。例えば、xハイト（小文字のxの高さ）が大きいフォントや、アセンダー/ディセンダーが短いフォントは、同じfont-sizeでもコンテンツエリアの高さが相対的に大きく見え、結果として同じline-heightの値でも行間が狭く感じられる傾向があります。常に実際のフォントでテスト表示して調整することが重要です。

7.2. 行長との関係

1行あたりの文字数（行長）が長いテキストブロックでは、行間を広くする方が目が次の行へ移動しやすくなり、可読性が向上します。逆に、行長が短いテキストブロック（例: サイドバーの短いキャプション、注釈）では、行間を狭くしても比較的読みやすく、情報密度を高く保つことができます。

理想的な行長は、欧文で約50-75文字、日本語で約30-45文字と言われています。max-widthプロパティを使用してテキストブロックの最大幅を制限し、行長を適切な範囲に保つとともに、その行長に合わせてline-heightを調整するのが効果的です。

“`css
.article-body {
font-size: 17px;
line-height: 1.7; / 少し広めの行間 /
max-width: 700px; / 行長を制限 /
margin: 0 auto; / 中央寄せ /
}

.caption {
font-size: 14px;
line-height: 1.4; / 狭めの行間 /
max-width: 300px; / 行長が短い /
}
“`

行長と行間は密接に関連しており、タイポグラフィを設計する上で両方を考慮に入れる必要があります。

7.3. 見出しの行間

見出しは本文よりも目立たせる必要があり、一般的にfont-sizeが大きいです。見出しは通常短いテキストなので、本文ほど広い行間は必要ありません。むしろ、少し行間を狭くすることで、単一の要素としてのまとまり感を出し、本文との間に適切な空間を作る役割を果たします。

見出しのline-heightは、そのfont-sizeに対して1.0から1.3程度の単位なし数値を指定することが多いです。ただし、これもフォントやデザインによって調整が必要です。また、見出しと本文の間の垂直間隔は、margin-bottomで調整するのが適切です。見出しの上に適切なmargin-topを設定することで、前のコンテンツとの区切りも明確にします。

“`css
h1 {
font-size: 2.5em; / bodyのfont-sizeに対する相対値 /
line-height: 1.1; / 本文より狭く /
margin-top: 2em;
margin-bottom: 0.8em;
}

h2 {
font-size: 2em;
line-height: 1.2;
margin-top: 1.8em;
margin-bottom: 0.7em;
}

h3 {
font-size: 1.5em;
line-height: 1.3;
margin-top: 1.5em;
margin-bottom: 0.6em;
}
“`

見出しのline-heightは、単に行間だけでなく、見出し自体の高さ（ラインボックスの高さ）を決定し、その上下のマージンと組み合わさって、コンテンツ全体の垂直方向のリズムを形成します。

7.4. デザインツールとの連携

デザインツール（Sketch, Figma, Adobe XDなど）で行間を指定する際も、CSSのline-heightと同じ概念が使われます。デザインツール上で行間を指定する際には、通常px単位で指定するか、フォントサイズに対するパーセントまたは倍率で指定します。

デザインツールで設定した行間をCSSに落とし込む際には、特にパーセントや倍率で指定した場合、CSSでの単位なし数値に変換して指定するのがおすすめです。これにより、デザインの意図をCSSで正確に再現しつつ、レスポンシブな表示にも対応しやすくなります。例えば、デザインツールでフォントサイズ16pxに対して行間24pxと指定されている場合、これは16pxの1.5倍（24/16 = 1.5）なので、CSSではfont-size: 16px; line-height: 1.5;と記述するのが良いでしょう。

8. よくある落とし穴と注意点

line-heightを扱う上で、いくつか注意すべき点や陥りやすい落とし穴があります。

8.1. 固定単位（px）の使用を避ける

本文のような可変的なテキストに対してline-height: 24px;のように固定単位を使用すると、ユーザーがブラウザのフォントサイズ設定を変更した場合や、レスポンシブデザインでfont-sizeが変わった場合に、行間が固定されたままになるため、可読性が損なわれたりレイアウトが崩れたりします。特別な理由がない限り、本文テキストには単位なし数値（例: line-height: 1.6;）を使用しましょう。

8.2. パーセント値と単位なし数値の継承の違い

これは既に詳しく解説しましたが、パーセント値は計算済み値が継承され、単位なし数値は値自体が継承されます。この違いを理解していないと、ネストされた要素で予期しない行間になることがあります。子要素でfont-sizeが変わる可能性がある場合は、親要素でline-heightを単位なし数値で指定するのが安全です。

“`html

“`

上の例では、子要素の行高は24pxになります。下の例では、子要素の行高は30pxになります。同じように見える指定 (150% vs 1.5) でも、結果が大きく異なることがわかります。

8.3. 行間とマージンの混同

行間 (line-height) は行内のテキスト間の垂直スペース、マージン (margin) は要素の外側のスペースです。段落間のスペースを空けたい場合はmargin-bottomなどを使用し、段落内の行間を調整したい場合はline-heightを使用します。

8.4. 単一行要素の垂直中央揃えの限界

line-heightとheightを同じ値にして単一行テキストを垂直中央に揃えるテクニックは便利ですが、これはテキストが絶対に複数行にならない場合にのみ使用できます。例えば、white-space: nowrap;を併用するか、要素の幅が固定されている場合などです。テキストが折り返して複数行になると、このテクニックは破綻します。複数行のテキストや、高さが可変する要素の垂直中央揃えには、FlexboxやGridレイアウトを使用する方がより頑健な方法です。

8.5. フォントによる見た目の違い

同じline-heightの値を指定しても、フォントファミリーによって見た目の行間は異なります。これはフォントのメトリクス（字面の高さ、アセンダー/ディセンダーの長さなど）が異なるためです。必ず使用するフォントで実際に表示を確認し、必要に応じて値を調整してください。

9. まとめとベストプラクティス

HTMLの行間を調整するCSSプロパティline-heightについて詳しく解説しました。このプロパティは、ウェブサイトの可読性、美しさ、そして全体的なユーザー体験に不可欠な要素です。

主要なポイントのまとめ:

• line-heightは、テキスト行が占める垂直方向の領域「ラインボックス」の高さを指定します。
• 指定できる値にはnormal、単位なし数値 (<number>)、長さ (<length>)、パーセント値 (<percentage>) があります。
• 単位なし数値は要素のfont-sizeに対する倍率として解釈され、その倍率自体が子要素に継承されるため、レスポンシブ対応や異なるフォントサイズの子要素に対して最も頑健で推奨される方法です。
• 長さやパーセント値は計算済みの値が子要素に継承されるため、子要素のfont-sizeが変わると予期しない行間になる可能性があります。
• line-heightによって作られた行間の余白は「リーディング」と呼ばれ、テキストコンテンツの上と下に均等に分配されます。
• 適切なline-heightは、フォントサイズ、フォントファミリー、そして1行あたりの文字数（行長）によって異なります。本文には1.4～1.8程度の単位なし数値が一般的ですが、常にテストが必要です。
• line-heightは行内の垂直間隔を、marginやpaddingは要素間のスペースや要素内の余白を制御します。段落間のスペース調整にはmargin-bottomを使うのが一般的です。
• 単一行の要素を垂直中央に揃えるテクニックとしてline-heightをheightと同じ値に指定する方法がありますが、これは単一行に限定されます。
• vertical-alignはline-heightによって作られたラインボックス内でインライン要素の垂直位置を調整します。

推奨されるベストプラクティス:

• 本文などの可変的なテキストには、特別な理由がない限り、line-heightを単位なし数値で指定する。 例: line-height: 1.6;
• body要素にベースとなるfont-sizeとline-heightを設定し、その他の要素はそこからの継承を基本とする。
• 見出しなど、本文とは異なるスタイルが必要な要素には、個別にline-heightを指定する（見出しは本文より狭めが一般的）。
• テキストブロックのmax-widthを適切に設定し、読みやすい行長を保つ。行長が長い場合は行間を広めに、短い場合は狭めに調整する。
• 段落間のスペースはline-heightではなくmargin-bottomで調整する。
• 異なるフォントやデバイスで表示を確認し、視覚的に最もバランスが取れるようにline-heightの値を微調整する。

line-heightは、一見シンプルなプロパティですが、その値の指定方法や継承の特性を深く理解することで、ウェブサイトのタイポグラフィとレイアウトの質を大きく向上させることができます。この記事が、あなたのウェブサイトの行間を最適化するための一助となれば幸いです。

ウェブデザインにおいてタイポグラフィは非常に重要であり、その基本となるのがline-heightです。様々な値を試したり、異なるフォントでの見え方を比較したりしながら、最適な行間を見つけるプロセスを楽しんでください。

---