解説:

• pセレクタで行全体の段落にline-height: 1.3;を適用しています。これは多くのブラウザのデフォルト（約1.2）よりわずかに広いか同程度ですが、標準的な本文行間とされる1.5よりは詰まっています。実際にどれくらい詰めるかはデザインによりますが、可読性の観点から本文のline-heightは1.4〜1.8程度が推奨されることが多いです。
• .tight-lineクラスを持つ段落にはline-height: 1.1;を適用し、さらに行間を詰めています。このようなクラスを用意しておくと、特定の箇所だけ行間を調整したい場合に便利です。
• 見出し（h1, h2など）はfont-sizeが大きいため、本文と同じline-heightの数値（例: 1.5）を指定すると、見た目の行間は本文よりも広くなります。見出しは短い傾向にあるため、本文よりもline-heightを小さく（数値指定で1.0〜1.3程度に）設定することで、文字の塊としてのまとまりを強く見せたり、後の要素との間隔を調整したりすることが多いです。ここではh1に1.1、h2に1.2を指定しています。
• リストアイテム（li）も、必要に応じてline-heightを調整できます。リストは項目が縦に並ぶため、適度な行間があった方が各項目が区別しやすくなります。詰めすぎると、箇条書きの利点が損なわれる可能性もあります。

ページ全体のデフォルト行間を設定する（body要素への適用）

ウェブページ全体の基本的な行間を設定するには、body要素にline-heightを適用するのが最も一般的です。body要素に指定されたline-heightは、特別な指定がない限り、その子孫要素すべてに継承されます。

“`css
/ style.css /

body {
/ ページ全体のデフォルトフォントサイズ /
font-size: 16px;
/ ページ全体のデフォルト行間 /
/ 可読性を考慮し、本文行間として推奨される1.4〜1.8程度の値を指定することが多い /
line-height: 1.6;
font-family: ‘Arial’, sans-serif; / フォントも一緒に指定することが一般的 /
color: #333; / 文字色 /
}

/ 例: bodyで設定したline-heightを継承させたくない要素に個別に設定 /
h1 {
font-size: 32px;
line-height: 1.1; / h1には個別の行間を設定 /
}

p {
/ p要素には特にline-heightを指定しない場合、bodyのline-height: 1.6 が継承される /
}
“`

解説:

• body要素にline-height: 1.6;を指定することで、ページ内のほとんどのテキスト要素（段落、リスト、テーブルなど）は、この1.6という数値を継承します。
• 例えば、p要素には個別のline-height指定がない場合、bodyから継承した1.6を数値として使用します。したがって、p要素の実際の行の高さは、p要素自身のfont-sizeに1.6を掛け合わせた値になります。
• h1のように個別にline-heightを指定した要素は、bodyからの継承よりも自身の指定が優先されます。これにより、本文とは異なる行間を設定できます。

body要素に行間を設定する際は、単位なしの数値で指定することが強く推奨されます。これは、子孫要素が自身のfont-sizeに応じて相対的な行間を保つことができるため、異なるfont-sizeの要素が混在する場合や、レスポンシブデザインでfont-sizeを変更する場合に、全体として調和の取れた行間を維持しやすいためです。

複数の要素にまとめて適用する（クラスやIDの活用）

特定のスタイルを複数の要素に適用したい場合は、CSSのクラスやIDを活用します。行間を詰める際にも同様のテクニックが使えます。

“`html

この段落は行間が詰まっています。

この見出しも行間が詰まっています。

“`

“`css
/ style.css /

/ tight-line クラスを持つすべての要素に行間を詰める /
.tight-line {
line-height: 1.2;
/ 必要に応じて、他のスタイルも一緒に指定 /
/ font-family: ‘serif’; /
/ color: #555; /
}
“`

このようにクラスを使用すると、HTML側で.tight-lineクラスを指定するだけで、簡単に行間を詰めるスタイルを適用できます。特に、様々な場所で繰り返し使いたいスタイルの定義に便利です。

特定のユニークな要素に行間を適用したい場合は、IDセレクタを使用します。

“`html

これはページの導入部分のテキストです。
少しデザイン的に特別な行間を設定したい場合があります。

“`

“`css
/ style.css /

/ intro-text というIDを持つ要素に行間を詰める /

intro-text {

line-height: 1.1;
font-size: 18px;
font-weight: bold;

}
“`

IDセレクタは特定の単一要素にスタイルを適用するのに使われます。

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

line-heightは単独で機能するのではなく、他のCSSプロパティと相互に影響し合います。特に行間を詰める際には、以下のプロパティとの関係を理解しておくことが重要です。

font-sizeとの深い関連

これは既に述べた通り、line-heightは通常、その要素のfont-sizeを基準に計算されます。font-sizeが大きくなれば、同じline-heightの数値指定でも見た目の行間は広がります。行間を詰める際には、font-sizeとline-heightのバランスを考慮する必要があります。例えば、font-sizeを小さくして、さらにline-heightも小さくすると、非常に読みにくくなる可能性があります。

marginやpaddingとの違い

line-heightは行の内側の垂直方向のスペース（行ボックスの高さ）を調整するものです。一方、marginやpaddingは要素の外側または内側のスペースを調整するものです。

• margin: 要素の境界線の外側のスペース（要素間のスペース）を調整します。
• padding: 要素の境界線の内側、コンテンツとの間のスペースを調整します。

（注：この図はテキスト表現のため、実際の図解とは異なります。概念として捉えてください。）

+---------------------------------+ ← margin (外側の余白)
| +---------------------------+ | ← border (境界線)
| | +-----------------------+ | ← padding (内側の余白)
| | | +-------------------+ | | ← content (テキストや画像など)
| | | | AAAAAAAAAAA | | |
| | | | BBBBBBBBBBB | | | ← content内のテキスト行
| | | +-------------------+ | |
| | +-----------------------+ |
| +---------------------------+ |
+---------------------------------+

line-heightを詰めても、その要素のmargin-top, margin-bottom, padding-top, padding-bottomに影響はありません。行間を詰めたことで、要素の上下のコンテンツが近づきすぎたと感じる場合は、marginやpaddingを調整して、要素間の適切な距離を確保する必要があります。

例えば、段落の下の余白をなくす場合は、p { margin-bottom: 0; }のように指定します。行間を詰めることと、要素間のスペースを調整することは、目的と使用するCSSプロパティが異なることを理解しておきましょう。

vertical-alignとの相互作用

vertical-alignプロパティは、インラインレベル要素やテーブルセルのボックス内で、要素の垂直方向の配置を調整します。line-heightはインラインレベル要素を含む行ボックスの高さを決定するため、vertical-alignと密接に関連します。

特に、テキストと画像（インライン要素）が混在する行では、line-heightとvertical-alignの相互作用が重要になります。画像がテキストより大きい場合、line-heightが行ボックスの高さを決定しますが、画像がその行ボックスにどのように配置されるかはvertical-align（デフォルトはbaseline）によって決まります。

例:

“`html

テキストと画像が混在する行。

“`

“`css
p {
line-height: 1.5; / 行ボックスの高さを決める /
font-size: 16px;
}

img {
/ 画像の垂直方向の配置を調整 /
vertical-align: middle; / テキストの真ん中に画像を揃える /
/ vertical-align: top; / / 行ボックスの上端に揃える /
/ vertical-align: bottom; / / 行ボックスの下端に揃える（baselineがデフォルトに近い） /
}
“`

line-heightを極端に詰めた場合、行ボックスの高さが画像や大きな文字の高さを下回ることがあります。この場合、line-heightは指定された値になりますが、行ボックスがテキストコンテンツを収めきれず、テキストが隣接する行と視覚的に重なる可能性があります。特に画像など、可変しない高さを持つ要素が含まれる行では、line-heightを画像高さ以下にすると意図しない表示になることがあります。

displayプロパティとの関連（特にinline-block）

line-heightプロパティは、基本的にインラインレベル要素やインラインブロック要素を含む行に影響を与えます。ブロックレベル要素（p, div, h1など）自身に行間を設定するのではなく、その要素内に含まれるテキスト行に影響を与えます。

display: inline-block;を指定された要素は、インライン要素のようにテキストの流れの中に配置されますが、ブロック要素のように幅や高さを持ちます。このような要素を含む行も、line-heightの影響を受けます。

例:

“`html

テキストの前にブロックのような要素を配置。

“`

この例では、span要素はinline-blockとして扱われ、テキストと同じ行に配置されます。この行の高さは、テキストのline-heightと、inline-block要素の高さ（50px）の両方を考慮して決定されます。line-heightが行ボックスの最小の高さを決定し、inline-block要素はその行ボックス内に配置されます。vertical-alignがその配置方法を制御します。

line-heightを詰める際に、inline-block要素が絡む場合は、line-heightの値だけでなく、inline-block要素自身の高さやvertical-alignの設定も考慮して、意図したレイアウトになるか確認する必要があります。

7. デザインと可読性への影響：適切な行間を見つける

行間を詰めるテクニックはウェブデザインの表現力を高めますが、最も重要なのは「可読性」です。行間が適切でないと、どんなに美しいフォントやレイアウトでも、ユーザーは読むのをやめてしまうかもしれません。

行間が狭すぎる場合のデメリット

• 読みにくさ: 行間の狭いテキストは、文字同士が密集して見え、視覚的に圧迫感を与えます。行から行への視線移動がスムーズに行えず、読み間違えたり、どこまで読んだか分からなくなったり（「目が滑る」状態）しやすくなります。
• 視覚的なストレス: テキストが詰まっていると、画面全体がごちゃごちゃして見え、ユーザーは無意識のうちにストレスを感じます。
• デザインの貧弱さ: 本文など、広い範囲のテキストの行間が詰まりすぎていると、安っぽい、あるいは素人っぽい印象を与えてしまうことがあります。

行間が広すぎる場合のデメリット

• 文章のまとまりの喪失: 行間が広すぎると、テキストがバラバラに見え、一つの文章や段落としてのまとまりが感じられにくくなります。
• 間延びした印象: ページの縦方向のスペースを無駄に消費し、間延びした、あるいは情報の密度が低い印象を与えます。
• 視線移動の非効率化: 次の行を探すのに時間がかかり、読むリズムが崩れることがあります。

可読性を高めるための適切な行間

「適切な行間」は一概には決められず、多くの要因によって変化します。しかし、一般的な目安は存在します。

• 一般的な目安: 本文の場合、font-sizeの1.4倍から1.8倍程度のline-heightが、多くの欧文・和文フォントで読みやすいとされています。これはあくまで目安であり、使用するフォントやデザインによって最適な値は異なります。
• フォントの種類による違い: セリフ体や明朝体などの装飾的なフォントや、文字の重心が低いフォントなどは、サンセリフ体やゴシック体よりも広めの行間が必要になる場合があります。逆に、字面が大きいフォントや、文字の内部に白いスペースが多いフォントは、比較的狭い行間でも読みやすいことがあります。
• 行の長さ（文字数）による違い: 一行が長いテキストブロック（例：PC画面での広いカラムの文章）は、読者の視線が次の行の先頭に戻る際に迷いやすいため、比較的広めの行間が必要です。一行が短いテキストブロック（例：スマホ画面や、PC画面での狭いカラムの文章）は、狭めの行間でも比較的読みやすいです。
• ターゲットユーザーによる違い: 高齢者向けや、弱視者向けのウェブサイトなど、アクセシビリティが特に重要な場合は、標準よりも広めの行間を設定することが推奨されます。WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）では、テキストブロックの行間について、少なくとも文字サイズの1.5倍を推奨しています。
• 文章の種類: 見出し、本文、キャプション、リスト、引用など、文章の種類によって適切な行間は異なります。
  • 見出し: 短く、視覚的なインパクトが求められるため、本文よりもline-heightを詰めることが多いです（例: 1.0〜1.3）。
  • 本文: 可読性が最重要なので、比較的ゆとりを持った行間（例: 1.4〜1.8）を設定します。
  • リスト: 各項目が明確に区別されるよう、適度な行間（例: 1.3〜1.5）が必要です。
  • キャプションや引用: 本文とは異なる行間を設定することで、本文と区別し、それぞれの情報のまとまりを分かりやすくすることができます。

デザインにおける行間の役割

行間は単に可読性のためだけでなく、デザインの一部としても機能します。

• 視覚的な階層: 見出しの行間を詰めて本文の行間を広げることで、見出しと本文が明確に区別され、情報の階層が分かりやすくなります。
• トーン＆マナー: 行間が狭いとモダン、ミニマル、あるいは少し緊張感のある印象に、行間が広いとクラシック、ゆったりとした、あるいは洗練された印象を与えることがあります。デザイン全体のトーンに合わせて行間を調整することが重要です。
• ホワイトスペースの活用: 適切な行間は、テキストブロック内の「白いスペース」（ホワイトスペース）を生み出し、ページ全体に余白とリズムをもたらします。このホワイトスペースは、コンテンツを際立たせ、視覚的なノイズを減らす効果があります。

結論として、行間を詰める際は、見た目の印象だけでなく、それが可読性にどのような影響を与えるかを常に考慮する必要があります。特に本文に関しては、詰めすぎは禁物です。様々なデバイスやフォントで表示を確認し、試行錯誤しながら最適な値を見つけることが重要です。

8. レスポンシブデザインにおける行間調整

現代のウェブサイトは、PC、タブレット、スマートフォンなど、様々な画面サイズで表示される必要があります。これをレスポンシブデザインと呼びますが、レスポンシブデザインにおいて、行間の調整はさらに重要になります。

画面サイズに応じた行間の必要性

同じテキストでも、画面サイズが小さくなると、一行あたりの文字数が減り、代わりに総行数が増えます。スマホのように一行が短い画面では、行間をPCと同じように広くすると、文章が縦に間延びしてスクロール量が増え、読みにくく感じることがあります。逆に、PCのように一行が長い画面では、行間を詰めすぎると視線の移動が難しくなり、読みにくくなります。

このように、画面サイズによって適切な行間は変化します。

メディアクエリ（@media）を使った行間の変更

CSSのメディアクエリ（@mediaルール）を使用すると、画面サイズなどの条件に応じて異なるCSSスタイルを適用できます。これを利用して、ブレークポイント（スタイルを切り替える画面幅の基準点）ごとにline-heightの値を変更できます。

例: PCではゆったり、スマホではやや詰めた行間を設定する

“`css
/ PC向けのデフォルトスタイル /
body {
font-size: 16px;
line-height: 1.6; / PCでは広めの行間 /
}

h1 {
font-size: 32px;
line-height: 1.2; / PCでの見出し行間 /
}

/ スマートフォン向けのスタイル /
/ 画面幅が768px以下の場合に適用 /
@media (max-width: 768px) {
body {
font-size: 15px; / スマホではフォントサイズを少し小さく /
line-height: 1.5; / スマホでは行間を少し詰める /
}

h1 {
    font-size: 24px; /* スマホでの見出しサイズ */
    line-height: 1.1; /* スマホでの見出し行間をさらに詰める */
}

}
“`

解説:

• デフォルトでは、bodyのline-heightは1.6です。これはPCなどの広い画面で適用されます。
• @media (max-width: 768px)ブロックの中のスタイルは、画面幅が768px以下の場合に適用されます。ここでは、bodyのline-heightを1.5に変更しています。これにより、スマホなどの狭い画面では行間が少し詰まります。
• 見出しh1も同様に、PCとスマホで異なるline-heightを設定しています。

このようにメディアクエリを使うことで、デバイスの種類や画面サイズに応じて、最適な行間を設定し、どの環境でも可読性を維持することができます。

相対的な値（数値、em, rem, %）がレスポンシブに適している理由

レスポンシブデザインにおいてline-heightを指定する際は、単位なしの数値が最も推奨されます。次にemや%、そしてremも候補に入ります（それぞれの単位の継承時の挙動の違いは理解しておく必要があります）。絶対的な単位であるpxでの指定は、特定のfont-sizeでしか適切な行間にならないため、レスポンシブデザインにはあまり向きません。

• 数値指定 (line-height: 1.5;): bodyや各要素に数値で指定しておくと、メディアクエリでfont-sizeを変更した場合でも、行間は常にその要素の新しいfont-sizeに対する相対的な倍率として計算されます。これにより、font-sizeが変わっても行間とのバランスが崩れにくく、全体のレイアウト調整が容易になります。これが最もレスポンシブに適している理由です。
• em, % (line-height: 1.5em; or 150%;): これらの単位もfont-sizeに対する相対値ですが、前述の通り継承時の挙動が数値指定と異なります。親要素から継承されるのは計算後のpx値になるため、子要素のfont-sizeが親要素と異なる場合に不自然になることがあります。しかし、特定の要素（例：p要素など）に対してのみemや%で指定し、子要素を持たない、あるいは子要素で個別にline-heightを指定する、といった使い方であれば問題ありません。
• rem (line-height: 1.5rem;): ルート要素のfont-sizeに対する相対値です。ルート要素のfont-sizeをメディアクエリで変更するような全体スケールのレスポンシブデザイン手法と組み合わせる場合には有効です。しかし、個々の要素のline-heightを自身のfont-sizeに比例させたい場合には不向きです。

レスポンシブデザインで特別な理由がない限りは、bodyや主要なテキスト要素には単位なしの数値でline-heightを指定し、必要に応じてメディアクエリでその数値を調整するのが最も一般的で管理しやすい方法です。

9. よくある質問（FAQ）とトラブルシューティング

CSSで行間を調整している際によく遭遇する問題とその解決策をまとめます。

Q: 行間を詰めたはずなのに見た目が変わらないのはなぜ？

A: いくつかの原因が考えられます。

• セレクタの優先順位: 同じ要素に対して複数のCSSルールが適用されている場合、セレクタの優先順位が高い方のルールが優先されます。より具体的なセレクタ（例：クラスやIDセレクタ）や、後から記述されたルールが優先されることがあります。ブラウザの開発者ツールを使って、要素に実際に適用されているスタイルを確認してみましょう。
• プロパティ名のtypo: line-heightを間違って入力している可能性があります（例: lineheight, line-hightなど）。綴りを確認してください。
• 単位の誤解: line-height: 1.2px;のように、非常に小さなpx値を指定している場合、見た目がほとんど変わらないことがあります。数値（1.2）や適切な長さ単位（1.2em, 120%）を指定しているか確認してください。
• 他のCSSプロパティとの混同: line-heightは行間のスペースですが、要素間のスペースを調整するにはmarginを使います。行間を詰めても要素間の余白（margin）は変わらないため、見た目があまり変わらないと感じるかもしれません。要素間のスペースを調整したい場合は、margin-topやmargin-bottomも確認・調整してください。
• インライン要素への適用: line-heightをインライン要素（<span>, <a>など）に適用しても、その要素自身が含まれる行の高さは親要素や周囲のインライン要素の最も高いline-heightに影響されることが多いです。インライン要素内の改行や、インライン要素が複数行にまたがる場合に効果が見られます。

Q: 行間が詰まりすぎて文字が重なってしまう場合は？

A: line-heightに指定した値が小さすぎる可能性があります。

• 数値指定の場合: line-height: 1.0;やそれ以下の値を指定すると、文字の実際の高さによっては下の行の文字と重なります。特に和文フォントは漢字などが複雑で字面が大きいため、欧文フォントよりも余裕が必要です。可読性を考慮すると、最低でも1.0より大きい値（例: 1.1や1.2）を試してください。本文の場合は1.4以上が推奨されます。
• 長さ指定の場合: line-height: 16px;のように指定した値が、その要素のfont-sizeや含まれる画像などの高さよりも小さい場合に文字が重なります。
• font-sizeが極端に小さい: font-size自体が非常に小さい場合、line-heightを1.0以上にしても、絶対的な行間が狭すぎて読みにくくなることがあります。font-sizeも合わせて調整を検討してください。

Q: 要素によって行間がバラバラになるのは？

A: line-heightの値がどのように決定されるか（継承、個別の指定、デフォルト値）を理解すると原因が分かります。

• デフォルトスタイルシート: ブラウザはデフォルトで特定の要素（例: h1, p, liなど）にデフォルトのスタイルを適用しています。これにはデフォルトのmarginや、暗黙的なline-height（通常はnormalとして扱われる）が含まれます。これらのデフォルトスタイルが原因で、何も指定しない要素間で行間が異なって見えることがあります。
• 継承と個別の指定: body要素にline-heightを設定しても、特定の子要素に別途line-heightが指定されている場合は、その子要素の指定が優先されます。また、数値指定と単位付き指定では継承の挙動が異なります（数値指定は数値そのものを継承、単位付き指定は計算後のpx値を継承）。これが原因で、子要素内で行間が不自然になることがあります。
• リセットCSS: CSSリセットやNormalize.cssを使用している場合、デフォルトの行間がリセットされている可能性があります。その場合は、明示的にline-heightを指定する必要があります。

開発者ツールを使って、特定の要素にどのline-heightが適用されているのか（どこから継承または指定されているのか）を確認するのが原因特定に有効です。

Q: 画像とテキストが混ざったときの配置がおかしい。

A: これはline-heightとvertical-alignの相互作用が原因である可能性が高いです。

• line-heightが行ボックスの高さを決定し、vertical-alignがその行ボックス内でのインライン要素（テキスト、画像、inline-block要素など）の垂直方向の配置を決めます。
• デフォルトのvertical-alignはbaselineです。画像の下端がテキストのベースラインに揃えられるため、画像が大きい場合、テキストの上下に大きな余白ができたり、下の行のテキストと重なったりすることがあります。
• 画像をテキストの垂直方向の中央に揃えたい場合は、画像に対してvertical-align: middle;を指定するのが一般的です。
• 行間を詰めたことで画像やテキストが重なってしまう場合は、line-heightの値を大きくするか、画像やinline-block要素の高さを見直す必要があります。

10. まとめ：line-heightを使いこなしてより良いデザインを

この記事では、HTMLで行間を詰めるために使用するCSSのline-heightプロパティについて、その基本的な使い方から、値の種類、継承の挙動、他のプロパティとの関係、可読性やレスポンシブデザインへの影響まで、詳細に解説しました。

line-heightは、単に行と行の間隔を調整するだけでなく、テキストの可読性を左右し、デザイン全体の印象や構造を表現するための強力なツールです。特にウェブ上での読書体験において、適切な行間はユーザーの快適さに直結します。

この記事の要点:

• 行間はCSSのline-heightプロパティで調整します。
• 行間を「詰める」とは、line-heightの値を小さくすることです。
• line-heightの指定値には、数値（単位なし）、長さ（px, em, %など）、キーワードがあります。
• 最も推奨される指定方法は、単位なしの数値です。これは要素自身のfont-sizeに対する倍率となり、特に継承時の挙動が自然で、レスポンシブデザインと相性が良いです。
• 行間を詰める際は、font-sizeとの関係性を理解し、marginやpaddingとの違いを明確に区別することが重要です。
• テキスト、画像、inline-blockなどが混在する行では、line-heightだけでなくvertical-alignプロパティも考慮する必要があります。
• 行間を詰めることはデザイン性を高めますが、可読性を損なわない範囲で行うことが最も重要です。本文の場合は、一般的にfont-sizeの1.4〜1.8倍程度が読みやすいとされます。
• レスポンシブデザインでは、メディアクエリを使って画面サイズごとに適切なline-heightを調整し、異なるデバイスでの読みやすさを確保する必要があります。ここでも単位なしの数値指定が有効です。
• 問題が発生した際は、セレクタの優先順位、単位の指定、他のプロパティとの相互作用、そしてブラウザのデフォルトスタイルなどを確認し、開発者ツールを活用してデバッグを行いましょう。

適切な行間は、テキストコンテンツの品質を向上させ、ユーザーに快適な読書体験を提供するための基本的な要素です。この記事で解説したline-heightの使い方や注意点を参考に、ぜひあなたのウェブサイトで最適な行間を見つけ、より魅力的で使いやすいデザインを実現してください。試行錯誤を重ねることで、タイポグラフィにおける行間の奥深さをさらに理解できるはずです。