HTMLの行間調整に！CSSで詰める方法を徹底解説

By /

HTMLの行間調整に！CSSで詰める方法を徹底解説（約5000語）

Webデザインにおいて、テキストの可読性やデザインの美しさを左右する重要な要素の一つが「行間」です。適切に調整された行間は、コンテンツを読みやすくするだけでなく、Webサイト全体の印象にも大きく影響します。CSSを使えば、HTML要素の行間を自由にコントロールできますが、特にデザインを洗練させたり、情報量を効率的に配置したりする際には、行間を「詰める」というテクニックが有効になります。

この記事では、CSSを使ってHTMLの行間を詰める方法に焦点を当て、その基本から応用、注意点までを徹底的に解説します。約5000語にわたる詳細な説明を通じて、読者の皆様がWebサイトのタイポグラフィを思い通りにデザインできるようになることを目指します。

はじめに：なぜ行間調整が必要なのか？

皆さんはWebサイトを閲覧しているとき、文章が「ぎっしり詰まっている」と感じたり、「スカスカで読みにくい」と感じたりした経験はありませんか？ これらの感覚は、多くの場合、行間が適切に調整されていないことに起因します。

行間（リーディング）とは、テキストの行と行の間の垂直方向の間隔のことです。活版印刷の時代から、タイポグラフィにおいて非常に重要な要素とされており、Webデザインでもその重要性は変わりません。

  • 可読性の向上: 適切な行間は、読者の視線が次の行へスムーズに移動するのを助け、長文でも疲れずに読み進めることを可能にします。行間が狭すぎると、文字が互いに干渉し合い、非常に読みにくくなります。逆に広すぎると、行と行の関連性が薄れ、これもまた読みにくさにつながることがあります。
  • デザインの調整: 行間は、Webサイト全体の視覚的なリズムやバランスを調整する上でも重要な役割を果たします。見出しと本文、リスト、引用など、要素の種類によって適切な行間は異なります。デザインの意図に合わせて行間を調整することで、洗練された印象を与えたり、特定の情報を際立たせたりすることができます。
  • 情報量の調整: 限られたスペースに多くの情報を配置したい場合、行間を詰めることで、視覚的な情報密度を上げることができます。ただし、これは可読性とのトレードオフになることが多いため、慎重な判断が必要です。

このように、行間調整は単なる装飾ではなく、Webサイトのユーザビリティとデザイン品質を決定づける fundamental な要素なのです。

そして、「行間を詰める」という操作は、特に以下のようなケースで検討されることが多いです。

  • 短い見出しやキャッチフレーズなど、視線を素早く誘導したい場合。
  • リストアイテムやナビゲーションリンクなど、コンパクトにまとめたい要素。
  • 特定のデザインテイスト（例：モダン、ミニマル）を実現したい場合。
  • 印刷用のスタイルシートで、紙面の情報密度を上げたい場合（ただし、Web画面と印刷では適切な行間が異なることが多い）。

しかし、闇雲に行間を詰めるのは危険です。詰めすぎると、前述の通り可読性が著しく低下し、ユーザー体験を損なう可能性があります。この記事では、「適切に」行間を詰めるための方法論と注意点を詳しく解説していきます。

CSSで行間を調整するプロパティ：line-height

HTML要素の行間を調整するためにCSSで使用する最も基本的なプロパティは、line-heightです。このプロパティは、要素内のテキストの各行が占める垂直方向の空間、つまり「行ボックス」の高さを指定します。

line-heightプロパティの値を調整することで、行ボックスの高さを広げたり（行間を広げる）、狭めたり（行間を詰める）することができます。

line-heightプロパティの基本構文

css
selector {
line-height: value;
}

selectorはスタイルを適用したいHTML要素（例: p, h1, li, .class-name, #id-nameなど）を指定します。valueには、行の高さを指定するための様々な値を設定できます。

line-heightに指定できる値の種類

line-heightプロパティには、主に以下の4種類の値を指定できます。それぞれの値の指定方法によって、行間の計算方法や継承の挙動が異なります。行間を詰める際には、これらの違いを理解することが非常に重要です。

  1. normal (デフォルト値)

    • これはブラウザのデフォルト設定に依存する値です。
    • 一般的には、要素のfont-sizeの約1.2倍程度の値になることが多いですが、フォントの種類やブラウザによって異なります。
    • 特定の行間を指定しない場合、この値が適用されます。行間を「詰める」目的で使用することはほとんどありません。

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

    • これは、要素のfont-sizeに対する倍率を指定する値です。
    • 例: line-height: 1.5; は、font-sizeの1.5倍を行の高さとします。
    • この単位なしの数値による指定が、line-heightを設定する上で最も推奨される方法です。 その理由は後述の「継承の挙動」のセクションで詳しく解説しますが、要素のフォントサイズに対して相対的に行間が決定されるため、レスポンシブデザインなどフォントサイズが可変する場合でも適切なバランスを保ちやすいためです。
    • 行間を詰めるには、この値を1.0やそれ以下の、1未満の数値に設定します。 例: line-height: 1.2;, line-height: 1;, line-height: 0.8;

  3. <length> (長さの単位)

    • px, em, rem, pt, cmなどの絶対的または相対的な長さの単位で、行の高さ自体を直接指定します。
    • 例: line-height: 20px;, line-height: 1.2em;, line-height: 1.5rem;
    • pxのような絶対単位は、フォントサイズに関わらず常に一定の行高さを保ちたい場合に便利ですが、フォントサイズを変更した際にバランスが崩れやすいという欠点があります。例えば、font-size: 16px;でline-height: 20px;とした場合、フォントサイズを20pxに上げたときにline-heightの方が小さくなってしまい、行間が非常に詰まってしまいます。
    • emやremのような相対単位は、指定した要素のフォントサイズ（emの場合）またはルート要素のフォントサイズ（remの場合）に対する相対的な値となります。1emや1remは、それぞれその要素またはルート要素のフォントサイズと同じ高さになります。
    • 行間を詰めるには、この値を要素のfont-sizeよりも小さい値に設定します。 例: font-size: 16px; の要素に対し、line-height: 14px; や line-height: 0.9em; など。

  4. <percentage> (パーセンテージ)

    • 要素のfont-sizeに対するパーセンテージで、行の高さを指定します。
    • 例: line-height: 150%; は、font-sizeの150%を行の高さとします。これは、単位なし数値の1.5と同じ意味になります。
    • 行間を詰めるには、この値を100%やそれ以下の、100%未満のパーセンテージに設定します。 例: line-height: 120%;, line-height: 100%;, line-height: 80%;
    • <number>と同様にフォントサイズに相対的な値ですが、後述の「継承の挙動」が<number>とは異なります。

行間を「詰める」とは具体的にどういうことか？

line-heightの値は、行の「ベースライン」から次の行の「ベースライン」までの垂直距離を決定します。テキストのフォント自体には、文字が描かれる領域である「仮想ボディ」があり、通常はベースラインを中心に上下に広がっています。

line-heightの値がフォントの仮想ボディの高さよりも大きい場合、余白が生まれて行間が広がります。逆に、line-heightの値が仮想ボディの高さと同じかそれよりも小さい場合、行と行の間隔が狭まり、文字の上の部分（アセンダー）と下の部分（ディセンダー）が互いの行に近づいたり、重なったりします。これが「行間を詰める」という状態です。

特に、単位なしの数値やパーセンテージで1 (100%) を下回る値を指定したり、長さの単位でフォントサイズよりも小さい値を指定したりすると、積極的に行間が詰まります。

line-heightプロパティの継承の挙動について

CSSでは、プロパティの中には親要素から子要素に値が「継承」されるものがあります。line-heightも継承されるプロパティの一つです。しかし、値の種類（<number> vs <length>/<percentage>) によって、継承の挙動に重要な違いがあります。この違いを理解しないと、意図しない行間になってしまうことがあります。

<number> (単位なし数値) の継承

親要素に単位なし数値でline-heightを指定した場合、子要素はその「親の倍率」を継承し、自身のfont-sizeに対してその倍率を適用します。

例:

“`html

親要素のテキスト（フォントサイズ16px, 行高 16px * 1.5 = 24px）

子要素のテキスト（フォントサイズ20px）。この行の高さは？

“`

この場合、子要素の<p>は親要素のline-height: 1.5;という「倍率」を継承します。そして、自身のfont-size: 20px;に対してこの倍率を適用するため、子要素の行の高さは 20px * 1.5 = 30px となります。

フォントサイズが大きくなっても、それに応じた行高になるため、全体のバランスが保たれやすいです。これが、単位なし数値が最も推奨される理由です。

<length> (長さの単位) および <percentage> (パーセンテージ) の継承

親要素に長さの単位またはパーセンテージでline-heightを指定した場合、子要素は「親要素で計算された最終的な行の高さ」を継承します。

例:

“`html

/* または line-height: 150%; */
親要素のテキスト（フォントサイズ16px, 行高 24px）

子要素のテキスト（フォントサイズ20px）。この行の高さは？

“`

この場合、親要素の行の高さは24pxと確定しています。子要素の<p>はこの24pxという「具体的な値」を継承します。そのため、子要素のフォントサイズが20pxであっても、行の高さは親と同じ24pxになります。

もし子要素のフォントサイズが親よりずっと大きかった場合、継承した行の高さが子要素のフォントサイズに対して小さくなりすぎてしまい、行間が極端に詰まってしまう可能性があります。

例:

“`html

/* 親の行高は 16px * 1.5 = 24px */

子要素のテキスト（フォントサイズ30px）。継承する行高は？

“`

親要素のline-height: 1.5em;は、親要素のfont-size: 16px;に対して16px * 1.5 = 24pxという高さを計算します。子要素の<p>はこの24pxという値を継承します。子要素のフォントサイズは30pxなので、行の高さ24pxはフォントサイズ30pxよりも小さく、行は非常に詰まって表示されます。

このように、長さの単位やパーセンテージでの指定は、特にネストされた要素やフォントサイズが異なる要素が含まれる場合に、予期しない行間を生じさせることがあります。

まとめ:

  • <number> (単位なし数値): 倍率を継承 → 子要素のフォントサイズに合わせて行高が計算される。推奨。
  • <length>, <percentage>: 計算された行高を継承 → 子要素のフォントサイズに関わらず行高が固定される可能性がある。特定の意図がない限り避けるのが無難。

行間を「詰める」場合でも、将来的にフォントサイズが変更される可能性や、様々なフォントサイズの子要素が含まれる可能性を考慮すると、単位なしの数値で詰める倍率を指定するのが最も柔軟で管理しやすい方法と言えます。

具体的な「詰める」方法とコード例

それでは、実際にCSSを使って行間を詰める具体的な方法を見ていきましょう。主に、line-heightプロパティに1.0以下の単位なし数値を指定することで行間を詰めます。

1. 特定の要素の行間を詰める

最も基本的な方法は、特定のHTML要素（タグ）に対してline-heightを設定することです。

例1：段落（p要素）の行間を詰める

css
p {
font-size: 16px; /* 例としてフォントサイズを指定 */
line-height: 1.3; /* デフォルト（normal: 約1.2）より少し広めだが、
標準的な1.5〜1.8よりは詰まっている例 */
/* もっと詰めるなら 1.2 や 1.1 など */
}

このCSSは、HTML内のすべての<p>要素に適用されます。フォントサイズが16pxの場合、行の高さは 16px * 1.3 = 20.8px となります。一般的な本文の行間としては、1.5〜1.8程度が推奨されることが多いですが、デザインによっては1.3〜1.4程度も使われます。これをさらに詰めるには、値を小さくします。

css
p {
font-size: 16px;
line-height: 1.1; /* 積極的に詰める */
}

この場合、行の高さは 16px * 1.1 = 17.6px となり、フォントサイズ16pxにかなり近い値になるため、行間はかなり詰まります。フォントの仮想ボディが16pxより少し大きい場合、アセンダーとディセンダーが近づいたり重なったりする可能性が出てきます。

例2：見出し（h1-h6要素）の行間を詰める

見出しは本文に比べてフォントサイズが大きいことが多く、デフォルトのline-height: normalでも比較的行間が広く感じられることがあります。見出しと次の要素（本文など）との関連性を視覚的に強めるため、見出しの行間を本文より詰めるデザインは一般的です。

“`css
h2 {
font-size: 24px; / 例 /
line-height: 1.1; / 見出しは本文より詰めることが多い /
margin-bottom: 0.8em; / 見出しの下のマージンで次の要素との間隔を調整 /
}

h3 {
font-size: 20px; / 例 /
line-height: 1.2;
margin-bottom: 0.6em;
}
“`

ここでは、見出しのline-heightを本文（例1のp要素）よりも小さい値に設定しています。これにより、見出し内の複数行テキストが行間を詰めて表示されます。ただし、見出しと次の要素との間の垂直方向の間隔は、line-heightではなくmargin-bottomなどのプロパティで調整するのが一般的です。

例3：リストアイテム（li要素）の行間を詰める

リスト（ul, ol）内のアイテム（li）も、情報をコンパクトに表示するために行間を詰めることがよくあります。

“`css
ul li {
line-height: 1.3; / リストアイテムを行間を詰めて表示 /
}

ol li {
line-height: 1.3;
}
“`

これで、リストの各アイテム内のテキストが複数行になった場合、行間が詰まって表示されます。

2. クラスやIDを使って特定の箇所の行間を詰める

ウェブサイトの一部分だけ、あるいは特定のデザインを持つ要素だけ行間を調整したい場合は、クラスやIDを使用します。

例4：特定の段落だけ行間をさらに詰める

HTML:

“`html

これは標準的な行間の段落です。

この段落は、特別なクラスを使って行間を詰めています。

これも標準的な行間の段落です。

“`

CSS:

“`css
p {
line-height: 1.6; / 全体の段落の標準的な行間 /
}

.compact-text {
line-height: 1.2; / このクラスを持つ要素の行間を詰める /
}
“`

このCSSでは、.compact-textクラスが指定された<p>要素だけ、line-heightが1.2に上書きされ、他の段落よりも行間が詰まって表示されます。

例5：特定のセクション内の要素の行間を調整する

ウェブサイトの特定のセクション（例えば、サイドバーやフッターなど）では、本文とは異なるタイポグラフィを採用することがあります。このような場合、セクションを囲む要素にIDやクラスを指定し、子孫セレクタを使ってその中の要素の行間を調整できます。

HTML:

“`html



“`

CSS:

“`css
/ 本文エリアの標準的な設定（例）/
main p {
line-height: 1.6;
}

/ サイドバー内の設定 /
.sidebar {
/ サイドバー全体のフォントサイズなどを指定することも多い /
font-size: 0.9em; / 例：本文より少し小さく /
}

.sidebar h2 {
line-height: 1.1; / サイドバーの見出しを詰める /
}

.sidebar ul li {
line-height: 1.4; / サイドバーのリストアイテムを詰める /
}

.sidebar p {
line-height: 1.4; / サイドバーの段落を詰める /
}
“`

この例では、.sidebarクラスを持つ要素内のh2, li, p要素に対して、本文エリアとは異なる行間設定を適用しています。これにより、セクションごとに異なるデザイン（この場合はサイドバー内のコンテンツをよりコンパクトに）を実現できます。

3. 単位による違いと「詰める」際の考慮事項

前述のように、単位なし数値、長さ、パーセンテージでは継承の挙動が異なります。行間を「詰める」場合、特に注意が必要です。

  • 単位なし数値 (line-height: 1.2;): 最も推奨。子要素のフォントサイズが変わっても、常にそのフォントサイズの1.2倍の行高になるため、バランスが崩れにくい。積極的に詰めるなら1.0, 0.9なども指定可能だが、可読性に注意。
  • 長さ (line-height: 18px;): 行の高さが絶対値で固定される。親要素や兄弟要素、あるいは将来的なフォントサイズ変更の影響を受けず、指定した値で厳密に行高が決まる。しかし、フォントサイズと行高のバランスを手動で管理する必要があり、フォントサイズが大きくなったときに詰まりすぎるリスクが高い。「このサイズのこのフォントでは、このピクセル値が最適」という確信がある場合に限定的に使う。
  • パーセンテージ (line-height: 120%;): 親要素で計算された具体的な行高が継承されるため、子要素のフォントサイズによっては詰まりすぎるリスクがある。単位なし数値と同じ見た目を実現できるが、継承の挙動から単位なし数値の方が柔軟性が高い。特に理由がなければ単位なし数値を選ぶのが良い。

結論として、行間を詰める場合も、特別な理由がない限り、単位なしの数値を推奨します。 例えば、「フォントサイズの1.2倍の高さに行間を詰めたい」という場合は、line-height: 1.2;と指定します。

行間を詰めすぎることによる弊害と適切なバランス

行間を詰めることでデザインを引き締めたり、情報密度を上げたりできますが、詰めすぎは可読性の低下を招き、ユーザー体験を損ないます。

詰めすぎのサイン

  • 文字の重なり: 特に「p」「g」「y」「j」などのディセンダー（下に突き出る部分）を持つ文字と、「h」「l」「t」「b」などのアセンダー（上に突き出る部分）を持つ文字が、上の行と下の行で視覚的に重なって見える、あるいは非常に接近している場合。
  • 視線の迷い: 読者の視線がスムーズに次の行へ移動できず、同じ行を繰り返し読んでしまったり、読み飛ばしてしまったりする場合。
  • 窮屈な印象: テキスト全体が息苦しく、読む前から「難しそう」「疲れる」といった印象を与えてしまう場合。

適切な行間の目安

適切な行間は、使用するフォントの種類、フォントサイズ、行の長さ（一行あたりの文字数）、そして対象となる読者によって異なります。一般的な目安としては、本文の場合、font-sizeの1.4倍から1.8倍程度が推奨されることが多いです。

  • line-height: 1.4; 〜 line-height: 1.8;

これはあくまで一般的な目安であり、「詰める」という目的においては、これより小さい値を検討することになります。

  • 見出し: 本文よりフォントサイズが大きいことが多いため、本文と同じ倍率でも視覚的な行間は広くなります。そのため、1.0〜1.3程度のより小さい倍率が使われることが多いです。
  • 短いテキスト（キャプション、リストアイテムなど）: 読む量が少ないため、本文より積極的に詰めて1.2〜1.4程度とすることがあります。
  • 長いテキスト（記事本文など）: 可読性が最優先されるため、詰めすぎは禁物です。少なくとも1.4以上、場合によっては1.6〜1.8程度が必要になります。

行の長さも考慮が必要です。一行あたりの文字数が多い（画面幅が広い）場合、読者の視線が次の行の開始位置を見失わないように、少し広めの行間が必要になる傾向があります。逆に、一行あたりの文字数が少ない（画面幅が狭い、スマホなど）場合は、比較的狭い行間でも読みやすさを保ちやすいことがあります。レスポンシブデザインでメディアクエリを使って画面幅に応じて行間を調整するのは、このためです。

詰めすぎを避けるためのテスト

行間を詰めた設定が適切かどうか判断するには、実際に様々なデバイスや画面サイズで表示を確認し、テスト用の長文を読んでみることが最も重要です。

  • 異なるフォントサイズで確認: line-heightを単位なし数値で指定している場合でも、フォントサイズが極端に大きい場合や小さい場合でバランスが崩れないか確認します。
  • 異なるブラウザで確認: ブラウザによるレンダリングの違いによって、微妙に行間の表示が変わることがあります。主要なブラウザで確認します。
  • 実際に声に出して読んでみる: 声に出してスムーズに読めるかどうかは、可読性の一つの指標になります。
  • 第三者にレビューを依頼する: デザイナーや編集者、あるいは一般のユーザーに読んでもらい、感想を聞くのも良い方法です。

行間以外の垂直方向の間隔に影響するCSSプロパティ

line-heightは行の高さ（行ボックス）を調整しますが、要素と要素の間の垂直方向の間隔は、marginやpaddingといったプロパティにも影響されます。行間を詰めた際に、これらのプロパティとのバランスをどう取るかも重要です。

  • margin (外側の余白): 要素の外側に設定する余白です。margin-topやmargin-bottomは、要素とその前後にある要素との間にスペースを作ります。行間を詰めても要素同士がくっつきすぎる場合は、margin-bottomなどを適切に設定することで、段落間の区切りなどを明確にできます。
  • padding (内側の余白): 要素の内側、コンテンツと境界線の間に設定する余白です。テキストを含む要素の場合、padding-topやpadding-bottomが行ボックスの上端・下端から要素の境界線までの距離に影響し、要素の全体的な高さに加算されます。

例：行間を詰めた段落と、段落間のマージン

HTML:

“`html

記事の最初の段落です。

記事の二番目の段落です。

“`

CSS:

css
.article-paragraph {
line-height: 1.3; /* 行間を詰める */
margin-bottom: 1em; /* 段落の下にマージンを追加して区切りを明確にする */
}

この例では、line-height: 1.3;で行間自体は詰まっていますが、margin-bottom: 1em;があるため、段落と次の段落の間には適切な間隔が生まれます。もしmargin-bottomがないと、行間が詰まっている上に段落間の区切りも不明瞭になり、非常に読みにくくなる可能性があります。

行間（line-height）は行内の垂直方向の間隔、マージン（margin-top/margin-bottom）は要素間の垂直方向の間隔を調整するもの、と役割を分けて考えることが重要です。行間を詰める際は、それに伴って要素間のマージンを調整する必要がないか検討しましょう。

実践的な使用例と高度な調整

これまで解説した基本を踏まえ、より実践的な状況における行間調整、特に「詰める」テクニックの使い方を見ていきます。

使用例1：ブログ記事の本文と引用ブロック

ブログ記事では、本文の行間は読みやすさを重視して広めに設定しつつ、引用ブロックやコードブロックなどの装飾的な要素は、視覚的な差別化や情報密度の調整のために行間を詰めることがあります。

HTML:

“`html

ブログ記事のタイトル

これは記事の本文です。一般的な行間を設定します。複数行にわたる場合も多いでしょう。

本文の続きです。

これは引用ブロックです。本文とは異なる行間を設定して、見た目を区別することがよくあります。

複数行にわたる引用の場合、行間調整は特に重要です。

本文の最後の段落です。

“`

CSS:

“`css
article p {
line-height: 1.6; / 本文の行間は広めに（読みやすさ重視） /
margin-bottom: 1em; / 段落間のマージン /
}

article blockquote {
border-left: 4px solid #ccc; / 例：引用ブロックの装飾 /
padding: 1em;
margin: 1.5em 0;
font-style: italic;
color: #555;
/ 引用ブロック内の段落やテキストの行間を調整 /
}

article blockquote p {
line-height: 1.4; / 引用ブロック内の行間は本文より詰める /
margin-bottom: 0.8em; / 引用内の段落間マージンは本文より小さく /
/ 引用内の最後の段落の下マージンは0にすることも /
}

article blockquote p:last-child {
margin-bottom: 0;
}
“`

この例では、記事本文の<p>要素にはline-height: 1.6;を設定して読みやすさを確保しつつ、引用ブロック内の<p>要素にはline-height: 1.4;を設定して本文より行間を詰めています。これにより、引用部分が視覚的に本文と区別され、引用内のテキストも適度にまとまって表示されます。

使用例2：ナビゲーションリスト

ウェブサイトのナビゲーションは、限られたスペースに多くの情報を収める必要があるため、リストアイテム（li）の行間を詰めることが有効な場合があります。ただし、クリックやタップのしやすさ（特にモバイルデバイス）も考慮する必要があります。line-heightで視覚的な行間を詰めても、paddingでクリック可能な領域を広げるといった工夫が求められます。

HTML:

“`html

“`

CSS:

“`css
nav ul {
list-style: none; / リストのマーカーを消す /
padding: 0;
margin: 0;
}

nav li {
/ 行間を詰める /
/ line-height: 1.0; とすると li 要素自体の高さは小さくなる /
/ line-height を使わず、a 要素に padding を指定する方が一般的で柔軟 /
}

nav a {
display: block; / リンクをブロック要素にして padding が効くように /
/ line-height は normal または 1.2 程度でも良い /
line-height: 1.2; / リンクテキスト自体の行間は少し詰める /
padding: 0.5em 1em; / クリック可能な領域を padding で確保 /
text-decoration: none;
color: #333;
}
“`

この例では、li要素自体にline-heightを設定するのではなく、中の<a>要素にline-heightとpaddingを組み合わせています。line-height: 1.2;でリンクテキストが複数行になった場合の行間を詰めつつ、padding: 0.5em 1em;で各リンクのクリック/タップ可能な領域を上下左右に広げています。これにより、見た目の行間は詰まって見えますが、操作性は損なわれません。ナビゲーションでは、このようにline-height単体ではなく、paddingと組み合わせて垂直方向の間隔を調整することが多いです。

使用例3：レスポンシブデザインにおける行間調整

画面サイズが変化すると、一行あたりの文字数が変わったり、全体的なレイアウトが変化したりします。これに合わせて行間も調整することで、どのデバイスでも最高の読みやすさを提供できます。一般的に、画面幅が狭い（スマホなど）場合は、行間を少し広めにする方が読みやすい傾向があります。

“`css
/ デフォルトの行間設定（PCなど広い画面を想定）/
body {
font-family: “Noto Sans JP”, sans-serif;
line-height: 1.6; / 標準的な行間 /
font-size: 16px;
}

h2 {
line-height: 1.2; / 見出しは詰める /
font-size: 28px;
}

/ スマートフォンなど、画面幅が狭い場合の調整 /
@media (max-width: 768px) {
body {
line-height: 1.7; / 行間を少し広げて、短い行での視線の移動を助ける /
font-size: 15px; / フォントサイズも少し小さく /
}

h2 {
line-height: 1.3; / 見出しも少しだけ緩める /
font-size: 24px;
}

/ 特定の要素の行間をさらに調整する例 /
.article-content blockquote p {
line-height: 1.5; / スマホでは引用も少し広げる /
}
}

/ タブレットなど、中間の画面幅の場合の調整 /
@media (min-width: 769px) and (max-width: 1199px) {
body {
line-height: 1.65; / PCより少し広め /
}

h2 {
line-height: 1.25;
}
}
“`

メディアクエリを使用することで、ブレークポイントごとにline-heightの値を変更し、各デバイスに最適な行間を設定できます。この例では、広い画面では1.6、狭い画面では1.7と、狭い画面の方が少し行間を広げています。見出しも同様に、狭い画面では少し緩めています。これにより、「詰める」度合いを画面幅に応じて調整し、可読性を維持・向上させることができます。

行間と文字間隔・単語間隔の組み合わせ

より洗練されたタイポグラフィを目指すなら、行間（line-height）だけでなく、文字間隔（letter-spacing）や単語間隔（word-spacing）も合わせて調整することを検討しましょう。

例えば、行間をかなり詰めた場合、文字同士や単語同士も詰まって見えてしまうことがあります。このような場合、letter-spacingやword-spacingをわずかに広げることで、視覚的な息苦しさを軽減し、可読性を改善できることがあります。

css
.compact-and-spaced {
line-height: 1.1; /* 行間を詰める */
letter-spacing: 0.02em; /* 文字間隔をわずかに広げる */
word-spacing: 0.1em; /* 単語間隔をわずかに広げる */
}

ただし、これらのプロパティも調整しすぎると逆効果になるため、控えめに使うのがコツです。特にletter-spacingを広げすぎると、日本語のような表意文字が中心の言語では不自然に見えることがあります。

行間調整のベストプラクティスとアクセシビリティ

最後に、行間調整を行う上でのベストプラクティスと、特に重要なアクセシビリティへの配慮について解説します。

ベストプラクティス

  1. 基準となる行間を設定する: まず、body要素や主要なコンテンツコンテナに対して、サイト全体のベースとなる行間（例: line-height: 1.6;）を設定します。これにより、デフォルトで読みやすい行間を確保できます。
  2. 必要に応じて調整する: ベースの行間から外れて調整が必要な要素（見出し、リスト、引用など）に対して、個別にline-heightを上書きします。この際、単位なしの数値で倍率を指定することを強く推奨します。
  3. フォントサイズとのバランスを考慮する: 行間はフォントサイズとのバランスが重要です。フォントサイズが大きい要素は行間も広くなりがちなので詰める方向、小さい要素は詰まりがちなので緩める方向で調整することが多いです。
  4. コンテンツの種類に応じた調整: 長文を読むセクションでは可読性最優先で広めの行間、短いリストや見出しではデザインや情報密度に合わせて詰める、などコンテンツの性質に合わせて調整します。
  5. レスポンシブ対応を忘れずに: メディアクエリを使って、画面サイズに応じて行間を調整します。狭い画面では少し広めにするのが一般的です。
  6. テストを徹底する: 異なるデバイス、ブラウザ、フォントサイズでの表示を必ず確認し、実際にテキストを読んでみて読みやすさを評価します。
  7. デザインシステムの一部として考える: 行間設定をサイトのタイポグラフィシステムの一部として定義し、一貫性を持って適用することで、サイト全体のデザイン品質が向上します。

アクセシビリティへの配慮

行間調整において、アクセシビリティは非常に重要な考慮事項です。特に視覚障碍のある方や読字障害のある方にとって、適切な行間はコンテンツへのアクセス性を大きく左右します。

ウェブアクセシビリティの国際的なガイドラインであるWCAG (Web Content Accessibility Guidelines) 2.1では、テキストコンテンツの行間に関する達成基準が設けられています（達成基準 1.4.12: テキストの間隔）。この基準を満たすためには、ユーザーがカスタムスタイルシート（ブラウザの機能や拡張機能など）を使用して、テキストの間隔を調整できるようにすることが求められます。

具体的には、カスタムスタイルシートが適用された際に、以下の条件が満たされても、コンテンツや機能が損なわれたり、二次元スクロールが発生したりしないようにする必要があります。

  • 行間 (line height): 少なくとも font-size の 1.5倍
  • 段落間の間隔 (spacing following paragraphs): 少なくとも行間の 1.5倍
  • 文字間隔 (letter spacing): 少なくとも font-size の 0.12倍
  • 単語間隔 (word spacing): 少なくとも font-size の 0.16倍

この基準は、ユーザーが必要に応じて行間を広げられるように設計されていることを保証するためのものです。

私たちがCSSでline-heightを詰める設定をする場合、例えばline-height: 1.2;のように1.5倍を下回る値を設定することは、WCAGの「デフォルトで1.5倍以上に設定しなければならない」という要件とは直接関係しません。WCAGの要件は、ユーザーが自分でスタイルを変更した場合に、それを受け入れられるデザインになっているか、という点にあります。

しかし、デフォルトの行間を極端に詰めることは、多くのユーザーにとって読みにくさにつながり、アクセシビリティを損なう可能性が高いです。 WCAGの推奨値を考慮すると、特に本文のような長文セクションでは、デフォルトのline-heightは少なくとも1.5倍、可能であれば1.6倍〜1.8倍程度から始めるのが、多くのユーザーにとって読みやすく、アクセシビリティの観点からも安全な選択と言えます。

「詰める」というテクニックは、見出しや短いリスト、特定のデザイン要素など、読みやすさの要求度が本文ほど高くない箇所や、デザイン上の明確な意図がある場合に限定して慎重に適用することが望ましいです。本文の行間を1.5倍未満に詰めることは、アクセシビリティの観点からは避けるべきです。

常にユーザーの読みやすさを最優先し、アクセシビリティガイドラインを参考にしながら、適切な行間設定を行いましょう。

よくある質問 (FAQ)

Q1: line-height: 1;とline-height: normal;は何が違うのですか？

A1: line-height: normal;はブラウザのデフォルト値で、通常はフォントサイズの約1.2倍程度になりますが、具体的な値はブラウザやフォントによって異なります。
一方、line-height: 1;はフォントサイズのちょうど1倍（100%）を行の高さとして明示的に指定しています。これはfont-sizeと同じ高さの行ボックスを作るという意味です。フォントの種類によっては、文字のアセンダーとディセンダーがこの1倍の行ボックスからはみ出し、上下の行の文字と重なって表示される可能性が高いです。
つまり、normalはブラウザ任せの可変的なデフォルト値、1はフォントサイズに対する厳密な1倍という固定値であり、通常1の方がnormalより行間が詰まります。

Q2: なぜline-heightには単位なしの数値（例: 1.5）が推奨されるのですか？

A2: 最も大きな理由は、継承の挙動が優れているからです。単位なし数値で指定した場合、親要素はその「倍率」を子要素に継承します。子要素はその倍率と自身のフォントサイズを使って行の高さを計算するため、子要素のフォントサイズが親と異なっていても、フォントサイズに比例した適切な行間が保たれやすくなります。
これに対し、長さの単位やパーセンテージで指定した場合、親要素で計算された具体的な行の高さが子要素に継承されてしまうため、子要素のフォントサイズによっては行間が詰まりすぎたり、広がりすぎたりする可能性があります。特にレスポンシブデザインでフォントサイズが可変する場面では、単位なし数値の方が管理しやすいです。

Q3: line-heightを詰めたら、文字が上の行や下の行と重なってしまいました。どうすれば良いですか？

A3: 文字が重なるのは、line-heightの値が小さすぎて、フォントの仮想ボディが収まりきらないためです。これは行間を詰めすぎている兆候です。
解決策としては、line-heightの値を少し大きくして、文字が重ならないように調整します。一般的には、フォントサイズに対して少なくとも1.0倍以上のline-heightを確保しないと重なりやすくなります（フォントによります）。
もしデザイン上どうしても行間を詰める必要があるなら、その要素の上下にmargin-topやmargin-bottomを設定して、要素と要素の間の空間を確保することで、視覚的な窮屈さを軽減できる場合があります。ただし、根本的な行間の詰まりすぎは可読性を損なうため、line-height自体の見直しを優先すべきです。

Q4: 特定の段落の行間だけを全体と変えたいのですが、どうすればいいですか？

A4: その段落に特定のクラス名を付け、そのクラスに対してline-heightプロパティを設定します。
例：
“`html

標準の段落

行間を変えたい段落

css
p {
line-height: 1.6; / 全体の段落 /
}

.special-paragraph {
line-height: 1.2; / このクラスを持つ段落 /
}
“`
クラス名を使い分けることで、要素ごとに柔軟なスタイル設定が可能です。

Q5: 行間調整はSEOに影響しますか？

A5: 直接的には影響しません。SEOは主にコンテンツの内容、構造、外部リンク、技術的な側面（表示速度、モバイルフレンドリーなど）に焦点を当てています。
しかし、間接的には影響する可能性があります。適切な行間設定は、読者のサイト滞在時間や回遊率に影響する可読性とユーザー体験を向上させます。ユーザーがサイトを快適に利用できれば、離脱率が低下し、エンゲージメントが高まります。これらのユーザー行動に関する指標は、検索エンジンのランキング要因の一部として考慮される可能性があると言われています。
したがって、読みやすい行間（詰める場合も可読性を損なわない範囲で）は、結果的にSEOにも良い影響を与える可能性があります。

まとめ

HTMLの行間調整は、CSSのline-heightプロパティを使って行います。特に「詰める」という操作は、デザインを引き締めたり、情報密度を調整したりする際に有効なテクニックです。

  • line-heightプロパティは、要素の行ボックスの高さを指定します。
  • 値を小さくする（単位なし数値なら1.0以下、長さならフォントサイズ未満、パーセンテージなら100%未満）ことで行間が詰まります。
  • line-heightの値は、単位なしの数値（倍率）で指定するのが、継承の挙動から最も推奨されます。
  • 特定の要素、クラス、ID、あるいはメディアクエリと組み合わせて、柔軟に行間を調整できます。
  • 行間を詰めすぎると、可読性が著しく低下し、ユーザー体験やアクセシビリティを損なう危険があります。 特に長文では注意が必要です。
  • 適切な行間は、フォント、フォントサイズ、行の長さ、コンテンツの種類、ターゲットユーザーによって異なります。一般的には本文でフォントサイズの1.4〜1.8倍程度が目安とされますが、「詰める」場合はこれより小さい値を検討します。
  • 行間（line-height）だけでなく、要素間のマージン（margin-bottomなど）も垂直方向の間隔に影響するため、合わせて調整が必要です。
  • レスポンシブデザインでは、画面サイズに応じて行間を調整することで、各デバイスでの読みやすさを最適化できます。
  • アクセシビリティの観点から、本文の行間は少なくともフォントサイズの1.5倍以上を確保することが推奨されます。積極的に詰めるのは、見出しや短いテキストに留めるなど、慎重な判断が求められます。

行間調整は、Webサイトの見た目と使いやすさの両方に深く関わる重要なスキルです。この記事で解説したline-heightプロパティの詳細、値の種類による違い、継承の挙動、そして「詰める」際の注意点や具体的な使用例を参考に、皆さんのWebサイトで心地よいタイポグラフィを実現してください。常に「読みやすさ」を念頭に置き、様々な環境でのテストを忘れずに行うことが成功への鍵となります。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール