資料をダウンロード
無料カウンセリング
無料カウンセリング

WithCodeMedia-1-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
previous arrowprevious arrow
next arrownext arrow

CSSで行間・字間を調整する方法｜line-heightとletter-spacingコピペ早見表付き

CSS
CSSで行間・字間を調整する方法のアイキャッチ

「なんとなく読みにくい」「テキストが詰まって見える」「逆にスカスカに感じる」――そんな悩みの大半は、line-height（行間）とletter-spacing（字間）の設定で解決できます。CSSでテキストまわりを整えるこの2つのプロパティは、Webデザインの読みやすさを左右する最重要パラメーターです。

ところが「なんとなくline-height: 1.6を書いている」「letter-spacingは触ったことがない」という方も多いのではないでしょうか。単位の種類だけでも数値・px・%・emと複数あり、どれを使えばいいのか迷いやすい部分です。継承の挙動や、日本語と英語での使い分けを理解していないと、意図しない見た目になることもあります。

この記事では、CSS初心者から中級者を対象に、line-heightとletter-spacingの基礎から実践的な使い方まで体系的に解説します。単位ごとの違いや推奨値の早見表、コピペで使える実装例、そしてよくあるハマりポイントと対処法も網羅しています。

まず最初に、この記事で学べる内容を整理します。

  • line-heightの仕組みと単位ごとの違い、なぜ数値指定が推奨されるのかを理解できる
  • letter-spacingで字間を調整する方法と、和文・欧文での使い分けを習得できる
  • 読みやすいテキストを設計するための行間・字間の原則と考え方を身につけられる
  • コピペで使える実例コードとよくある失敗の対処法を手に入れられる
目次

line-heightとは？行間を決めるプロパティ

line-heightは、テキストの行と行の間隔（行間）を指定するCSSプロパティです。ただし正確には「行間」ではなく「行ボックスの高さ」を指定します。この違いを理解しておくと、挙動を正確に予測できるようになります。

CSSにおける行ボックスとは、1行のテキストが収まる仮想的な矩形領域のことです。フォントサイズが16pxのとき、line-height: 1.6を指定すると行ボックスの高さは16px × 1.6 = 25.6pxになります。このとき実際の文字（グリフ）は行ボックスの中央に配置され、上下に均等な余白（ハーフ・レディング）が生まれます。つまり行間として目に見える余白は(25.6 - 16) ÷ 2 = 4.8pxずつ上下に付く計算です。

line-heightはすべての要素に適用できますが、インライン要素とブロック要素で動作に若干の違いがあります。ブロック要素に指定した場合は内包するすべての行ボックスに影響します。インライン要素に直接指定した場合は、そのインライン要素の行ボックスの高さに影響しますが、周辺のレイアウトとの相互作用に注意が必要です。

line-heightの初期値はnormalです。normalの実際の計算値はブラウザやフォントによって異なりますが、一般的にフォントサイズの1.2倍前後になることが多いです。日本語の文章を扱う場合、normalのままでは行間が詰まりすぎて読みにくくなるケースがほとんどです。

またline-heightは継承プロパティです。親要素に設定すると子要素にも引き継がれます。この継承の挙動が、単位の選択と深く関わってきます。詳細は次のセクションで解説します。

/* line-heightの基本構文 */
selector {
  line-height: 値;
}

/* 具体例 */
p {
  font-size: 16px;
  line-height: 1.6; /* 行ボックスの高さ = 16px × 1.6 = 25.6px */
}

上のコードのように、line-heightはセレクターに対してシンプルに1行で指定できます。値の種類によって挙動が変わるため、次のセクションでそれぞれを詳しく見ていきましょう。

line-heightの書き方｜単位ごとの違い（数値・px・%・em）

line-heightに指定できる値は大きく4種類あります。それぞれ計算の仕組みと継承の挙動が異なるため、使い分けを正しく理解することが重要です。結論から言うと、単位なしの数値指定が最も推奨されます。その理由を含めて、順に解説します。

1. 数値指定（単位なし）— 最推奨

単位を付けずに数値だけを書く指定方法です。この値はフォントサイズに対する倍率として機能します。line-height: 1.6と書けば、どんなフォントサイズの要素でも「フォントサイズの1.6倍」の行ボックス高さになります。

この指定方法が推奨される最大の理由は、継承時の挙動が直感的だからです。数値指定では、継承先の要素がその数値（倍率）を受け取り、自身のフォントサイズに掛けて計算します。つまり、子要素のフォントサイズが変わっても、行間の比率は常に一定に保たれます。

/* 数値指定（推奨） */
body {
  font-size: 16px;
  line-height: 1.6; /* 倍率として継承される */
}

h1 {
  font-size: 32px;
  /* line-heightを指定しなくても、継承した1.6が使われる */
  /* 32px × 1.6 = 51.2px の行ボックス高さ → 適切 */
}

small {
  font-size: 12px;
  /* 12px × 1.6 = 19.2px の行ボックス高さ → 適切 */
}

2. px指定 — 避けるべき場合が多い

ピクセル値で行ボックスの高さを固定する指定方法です。line-height: 24pxと書けば、フォントサイズにかかわらず行ボックスは常に24pxになります。

px指定は一見わかりやすいですが、継承時に大きな問題が起きます。px値はそのまま（計算済みの値として）継承されます。つまり親要素でline-height: 24pxを指定すると、子要素のフォントサイズが何pxであってもline-height: 24pxが適用されます。フォントサイズが32pxの見出しに24pxの行ボックスが適用されると、テキストが行ボックスからはみ出して重なって表示されます。

/* px指定の問題点 */
body {
  font-size: 16px;
  line-height: 24px; /* 計算済み値として継承される */
}

h1 {
  font-size: 32px;
  /* line-height: 24px が継承される → 行ボックスがフォントより小さい！ */
  /* テキストが重なって表示される危険がある */
}

3. %指定 — em指定と同様の問題あり

line-height: 160%のように書くと、その要素のフォントサイズに対する割合で行ボックスの高さが計算されます。160%は数値の1.6と同じ計算結果になります。しかし継承の挙動がpx指定と同じく「計算済みの値」を渡してしまうため、推奨されません。

たとえば親要素のフォントサイズが16pxでline-height: 160%を指定した場合、計算結果は16px × 160% = 25.6pxです。この25.6pxという計算済みの値が子要素に継承されるため、子要素のフォントサイズが変わっても行ボックスは25.6pxのままになります。

4. em指定 — %指定と同じ問題あり

line-height: 1.6emは%指定と同様に計算済みの値が継承されます。そのため、単位なし数値指定と同じように見えますが、継承の挙動が異なります。結果として、子要素のフォントサイズが変化したときに意図しない行間になる可能性があります。

まとめると、%とemは「その要素でのみ正しく計算されるが、計算済み値が子に渡る」という挙動をします。対して単位なし数値は「倍率として子に渡るため、子が自身のフォントサイズで再計算できる」という挙動をします。この差が、数値指定が推奨される核心的な理由です。

用途別・推奨line-height早見表

用途 推奨値 理由・備考
本文（日本語）1.7〜1.9日本語は文字が密なため広めが読みやすい
本文（英語）1.5〜1.7英字は比較的スリムなため日本語より狭くてよい
見出し（h2〜h3）1.3〜1.5大きな文字は行間が広すぎると間延びして見える
大見出し・キャッチコピー（h1）1.1〜1.3インパクト重視。行間を詰めることが多い
ボタンラベル・単一行テキスト1縦位置調整はpaddingで行うためline-heightは1に固定
コードブロック1.5〜1.6コードは読み飛ばしやすいため、やや広めが適切
キャプション・注釈1.6〜1.8小さい文字ほど行間を広く取る
 
/* 用途別のline-height設定例 */

/* ベース設定（本文） */
body {
  font-size: 16px;
  line-height: 1.8; /* 日本語本文は1.7〜1.9が読みやすい */
}

/* 見出し：大きい文字は行間を詰める */
h1 {
  font-size: 40px;
  line-height: 1.2;
}

h2 {
  font-size: 28px;
  line-height: 1.4;
}

h3 {
  font-size: 20px;
  line-height: 1.5;
}

/* ボタン：行間は1にしてpaddingで高さを調整 */
.btn {
  font-size: 16px;
  line-height: 1;
  padding: 14px 32px;
}

/* コードブロック */
pre, code {
  font-size: 14px;
  line-height: 1.6;
}

上記のようにbodyにline-height: 1.8を設定しておき、見出しやボタンなど行間を変えたい要素に個別に上書きするのが、シンプルで管理しやすい設計パターンです。

letter-spacingとは？字間を調整するプロパティ

letter-spacingは文字と文字の間（字間）に追加するスペースを指定するCSSプロパティです。line-heightが「行の高さ方向」に作用するのに対し、letter-spacingは「文字の横方向」に作用します。

初期値はnormal（0と等価）です。正の値を指定すると字間が広がり、負の値を指定すると字間が詰まります。プロパティ名の通り「文字間のスペース」を追加・削除するイメージです。

em指定が推奨される理由

letter-spacingの値にはpxとemが使えますが、em指定が推奨されます。理由はletter-spacingの値がフォントサイズに応じてスケールしないためです。px指定では文字が大きくなっても字間の絶対量が変わらないため、小さなフォントサイズでは相対的に字間が広く、大きなフォントサイズでは相対的に字間が狭く感じられます。

em指定なら文字サイズが変わっても字間の相対的な比率が保たれます。たとえばfont-size: 16pxにletter-spacing: 0.05emを指定すると0.8pxの字間追加になり、font-size: 32pxでは1.6pxの字間追加になります。フォントサイズに応じた適切なスペースが自動的に計算されます。

負の値で字間を詰める

字間を詰めたいときは負の値を指定します。見出しや大きなキャッチコピーに字間を少し詰めると、文字の密度が増してグラフィカルな印象になります。ただし詰めすぎると文字が重なったり読みにくくなるため、-0.05em程度から試してみることを推奨します。

/* letter-spacingの基本構文 */
selector {
  letter-spacing: 値; /* 0 / 0.05em / -0.03em など */
}

和文と欧文での使い分け

日本語（和文）と英語（欧文）では、letter-spacingの推奨値が異なります。和文フォントは、もともと全角文字間に若干のスペースが含まれているフォントもありますが、ブラウザのレンダリングによっては文字同士が密着して見えるため、本文に0.02em〜0.05emの字間を追加すると読みやすくなる場合があります。

一方、英語（欧文）のプロポーショナルフォントは文字ごとに幅が異なり、カーニングによって字間が自動調整されています。欧文フォントにletter-spacingを追加しすぎると、カーニングとの相互作用でバランスが崩れることがあります。欧文本文は基本的に0（normalのまま）か、せいぜい0.01em程度に抑えましょう。

ロゴやキャッチコピーなどのデザイン要素では、欧文でも大きな字間（0.1em〜0.3em）を意図的に使うことがあります。ただしこれはデザイン的な演出であり、読みやすさよりも視覚的インパクトを優先した使い方です。

用途別・推奨letter-spacing早見表

用途 推奨値 理由・備考
和文本文0 〜 0.02em読みやすさ重視。詰め気味でも許容範囲
和文見出し（h2〜h3）0.02em 〜 0.05em少し広げると品が出て読み取りやすくなる
和文大見出し・キャッチコピー0.05em 〜 0.1emインパクトと読みやすさのバランスを取る
欧文本文0（normal）〜 0.01emカーニングを活かすため基本的に触らない
欧文見出し0 〜 0.03em必要な場合のみ微調整
欧文ロゴ・ブランド名（大文字）0.1em 〜 0.3emCAPS LOCKと組み合わせて高級感を演出
字間を詰めたい見出し-0.02em 〜 -0.05em詰めすぎると重なるので慎重に
 
/* letter-spacingの用途別設定例 */

/* 和文本文：ほぼ触らないか微量を追加 */
body {
  letter-spacing: 0.01em;
}

/* 和文見出し：少し広げると品が出る */
h2 {
  letter-spacing: 0.04em;
}

/* 大きなキャッチコピー */
.catchcopy {
  letter-spacing: 0.08em;
}

/* 欧文ロゴ（大文字）：字間を広げてスタイリッシュに */
.logo {
  font-family: 'Helvetica Neue', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* 字間を詰めて存在感を出す見出し */
.tight-heading {
  font-size: 48px;
  letter-spacing: -0.03em;
}

letter-spacingも継承プロパティです。bodyに設定した値はすべての子要素に引き継がれます。見出しや特定の要素で異なる字間を使いたい場合は、その要素に個別に上書き指定しましょう。

読みやすい行間・字間の原則

数値の推奨値を知っただけでは、最適なテキスト設計はできません。行間と字間は、1行の文字数・フォントサイズ・ジャンプ率・余白設計と相互に影響し合っています。この関係性を理解することで、「なんとなく設定する」段階から「根拠を持って設計する」段階に進めます。

1行の文字数と行間の関係

Webの本文テキストで読みやすいとされる1行の文字数は、日本語で30〜40文字、英語で50〜75文字が目安です。1行の文字数が多くなるほど、次の行の先頭を見つけにくくなるため、行間を広くする必要があります。逆に1行の文字数が少ない場合（スマートフォン向けの狭いカラムなど）は、行間をやや狭くしてもスキャンしやすいです。

PCではコンテンツ幅をmax-width: 720px程度に抑え、フォントサイズを16〜18pxにすることで、自然と適切な1行文字数に収まります。この状態でline-height: 1.8前後を設定すると、多くのユーザーにとって読みやすいテキストになります。

ジャンプ率との関係

ジャンプ率とは、本文と見出しのフォントサイズの比率のことです。ジャンプ率が高い（本文と見出しの差が大きい）デザインは、メリハリが出て情報の優先度が伝わりやすくなります。ただしジャンプ率が高い場合、見出しのline-heightを本文よりも小さく設定する必要が増します。

たとえば本文が16px / line-height: 1.8で、見出しが32px / line-height: 1.8のままだと、見出しの行間が過剰に広くなり、コンテンツブロックとの間に不必要な空白が生まれます。フォントサイズが大きくなるに従ってline-heightを小さくするのが基本的な原則です。

余白設計との関係

line-heightが増やす余白（ハーフ・レディング）は、marginやpaddingとは異なる性質を持ちます。line-heightによる余白はテキストブロックの内部に作られ、marginはテキストブロックの外側に作られます。この2つを意図せず重複させると、余白が過剰になることがあります。

たとえばp要素のデフォルトのmargin-bottomは多くのブラウザで1em（16px相当）です。line-height: 1.8による上下のハーフ・レディング（各6.4px）と合わせると、段落間の見た目の余白はさらに広くなります。意図的にコントロールしたい場合は、marginとline-heightの両方を明示的に指定するとよいです。

/* 余白をコントロールする例 */
p {
  font-size: 16px;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 1.5em; /* 約24px。行間と合わせて読みやすいリズムを作る */
}

h2 {
  font-size: 28px;
  line-height: 1.4;
  margin-top: 2.5em; /* 前の段落との距離を確保 */
  margin-bottom: 0.8em;
}

字間と可読性

字間（letter-spacing）は行間ほど可読性への影響が大きくないケースもありますが、特に小さいフォントサイズや装飾的なフォントでは字間が読みやすさに影響します。文字サイズが小さいほど字間を少し広げると認識しやすくなります。逆に大きいフォントサイズや太いウェイトのフォントでは、字間をやや詰めるとスッキリ見えることがあります。

また、すべて大文字（text-transform: uppercase）のテキストには、必ずletter-spacingを追加することをおすすめします。大文字のみのテキストはデフォルトの字間だと密度が高くなりすぎて読みにくいため、0.08em〜0.15em程度の字間を追加することで視認性が向上します。

コピペで使える実例集（本文・見出し・日本語長文・英字ロゴの4パターン）

ここでは実際のWebサイトで使いやすい、line-heightとletter-spacingを組み合わせた4つのパターンをコードで紹介します。それぞれのコードは単体でも機能しますが、組み合わせて使うことでより効果的なテキスト設計になります。

パターン1：日本語本文テキスト用

ブログ記事・解説ページ・サービス説明など、長文を読ませるコンテンツに最適な設定です。フォントサイズ16〜18px、行間1.8〜2.0、字間は微量の追加というのが基本の組み合わせです。

/* パターン1：日本語本文テキスト */
.article-body {
  font-size: 16px;
  line-height: 1.9;       /* 日本語長文は広めが◎ */
  letter-spacing: 0.01em; /* ごくわずかに字間を開ける */
  color: #333;
  max-width: 720px;       /* 1行の文字数を適切に制限 */
}

.article-body p {
  margin-top: 0;
  margin-bottom: 1.75em;  /* 段落間にリズムを作る */
}

パターン2：見出し（h2・h3）用

見出しは本文より大きいフォントサイズになるため、line-heightを本文より小さくします。また日本語見出しには少し広めのletter-spacingを設定すると、品格のある印象になります。

/* パターン2：見出し用 */
h2.section-heading {
  font-size: 26px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  color: #1a1a1a;
}

h3.sub-heading {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.6em;
  color: #1a1a1a;
}

パターン3：日本語長文（スマートフォン向け最適化）

スマートフォンでは画面幅が狭く1行の文字数が少なくなります。その分行間はやや狭くしてもスキャンしやすいですが、フォントサイズを少し大きくして視認性を確保することが重要です。

/* パターン3：スマートフォン向け最適化 */

/* デスクトップ基本設定 */
.content {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.01em;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* スマートフォン（640px以下）向け調整 */
@media (max-width: 640px) {
  .content {
    font-size: 15px;    /* 少し大きめにして読みやすく */
    line-height: 1.8;   /* 1行が短いのでやや詰めてよい */
    letter-spacing: 0.01em;
    padding: 0 16px;
  }
}

パターン4：英字ロゴ・ブランド名

欧文の大文字ロゴや英字のキャッチコピーには、大きなletter-spacingを設定することで高級感やスタイリッシュな印象を作れます。このパターンは読みやすさより視覚的インパクトを重視した演出用の設定です。

/* パターン4：英字ロゴ・ブランド名 */
.brand-logo {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;         /* 単一行なのでline-heightは1 */
  letter-spacing: 0.25em; /* 大きな字間でスタイリッシュに */
  text-transform: uppercase;
  color: #1a1a1a;
}

/* 大きなキャッチコピー（欧文） */
.hero-catchcopy {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: -0.02em; /* 大きい文字は少し詰めるとスッキリ */
  font-weight: 900;
}

/* HTML使用例 */
<h1 class="hero-catchcopy">Design with Purpose</h1>
<p class="brand-logo">WithCode Media</p>

よくある失敗と対処

line-heightとletter-spacingを使う上で、よく見られるハマりポイントを3つ取り上げます。それぞれ原因と対処法をセットで解説します。

失敗1：行間が詰まりすぎる（モバイルで特に発生しやすい）

「PCでは適切な行間なのに、スマートフォンで見ると行間が詰まって読みにくい」というケースです。これはフォントサイズにpx指定のline-heightを設定していることが原因である場合が多いです。

たとえばPCではfont-size: 16px; line-height: 26pxと指定し、スマートフォン向けにfont-size: 14pxを指定したとします。この場合line-height: 26pxは変わらないため比率としては26 ÷ 14 ≒ 1.86になります。これは偶然読めますが、font-sizeをさらに変更したときに計算が狂います。

/* 失敗例 */
p {
  font-size: 16px;
  line-height: 26px; /* px指定は継承で問題が起きやすい */
}

/* 修正後 */
p {
  font-size: 16px;
  line-height: 1.7; /* 単位なし数値で倍率を指定 */
}

@media (max-width: 640px) {
  p {
    font-size: 15px;
    /* line-heightは1.7がそのまま引き継がれ、正しく計算される */
  }
}

失敗2：ボタン内のテキストが縦方向にズレる

ボタンのラベルテキストが上下に偏って見えるというのは非常によくある悩みです。原因のほとんどはline-heightです。

ボタンにheightを指定して縦の高さを固定しようとすると、line-heightが継承されたままになり、テキストが中央に収まらないことがあります。ボタンの縦位置調整はheightではなくpaddingで行い、line-heightは1に設定するのが最もシンプルで確実です。

/* 失敗例：heightで高さを固定しようとしている */
.btn-bad {
  height: 48px;
  /* line-heightが継承されてテキストがズレやすい */
}

/* 修正後：paddingで高さを作り、line-heightを1に固定 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  line-height: 1;    /* ボタンはline-heightを1に */
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  background-color: #d16176;
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

display: inline-flexとalign-items: centerを組み合わせることで、フレックスボックスによる縦方向の中央揃えも実現できます。これが現在最も確実なボタンの縦位置調整方法です。

失敗3：line-heightの予期しない継承

親要素にline-heightを設定したところ、子要素の予期しない場所に影響が出るケースです。特に問題になりやすいのが、%やpxでline-heightを設定している場合です。

また、font-size: 0を使ってインライン要素の隙間を消すテクニックを親要素に適用した場合、子要素のline-heightがem指定だと0に計算されてしまうという問題もあります（emはその要素のフォントサイズを基準にするため）。これはline-heightを単位なし数値で指定することで回避できます。

/* 問題のある例：emで指定すると font-size: 0 の影響を受ける */
.parent {
  font-size: 0; /* インライン要素の隙間対策 */
}
.child {
  font-size: 16px;
  line-height: 1.5em; /* 親のfont-size(0) × 1.5 = 0 になってしまう！ */
}

/* 修正後：単位なし数値なら自身のfont-sizeで計算される */
.child {
  font-size: 16px;
  line-height: 1.5; /* 16px × 1.5 = 24px → 正しく計算される */
}

line-height・letter-spacingが効かないときのチェックリスト

設定したはずなのにline-heightやletter-spacingが反映されていないように見えるとき、以下の項目を順にチェックしてみてください。多くの場合、これらのどれかが原因です。

チェック1：セレクターの詳細度（Specificity）が負けていないか

CSSはより詳細度が高いセレクターのスタイルが優先されます。pタグに指定したスタイルよりも、.container pや#main pで指定したスタイルが優先されます。ブラウザの開発者ツール（DevTools）で該当要素を選択し、Computedタブでline-heightの計算値と適用されているセレクターを確認しましょう。

/* 詳細度の低いセレクターは上書きされる */
p {
  line-height: 1.8; /* これが */
}

.content p {
  line-height: 1.4; /* こちらに上書きされる（詳細度が高い） */
}

/* 確認方法：DevToolsのElementsパネルで要素を選択 →
   右側のStylesペインで打ち消し線が入ったプロパティを探す */

チェック2：!importantで強制上書きされていないか

WordPressのテーマやCSSフレームワークでは、!importantを使ったスタイルが定義されていることがあります。DevToolsのComputedタブで設定値を確認し、期待値と異なる場合はStylesタブで!importantの有無をチェックしてください。

チェック3：対象の要素が正しいか（親ではなく子に当たっているか）

「line-heightを設定したのに変わらない」という場合、セレクターが意図した要素ではなく別の要素にマッチしている可能性があります。DevToolsでHTMLの構造を確認し、スタイルを当てたい要素のクラス名や階層が正しいか確認しましょう。

チェック4：CSSのキャッシュが残っていないか

WordPressサイトやキャッシュプラグインを使っている場合、古いCSSがキャッシュされて新しいスタイルが反映されないことがあります。ブラウザのキャッシュをクリア（Ctrl+Shift+R / Cmd+Shift+R）するか、WordPressのキャッシュプラグインのキャッシュを削除してから再確認しましょう。

チェック5：値の単位が正しいか

letter-spacing: 4（単位なし）はCSSでは無効な値です。letter-spacingには必ず単位（emまたはpx）を付ける必要があります。一方、line-height: 1.6（単位なし）は有効な指定です。両者で「単位なし数値の扱い」が異なるため、混同しないよう注意しましょう。

/* letter-spacingは単位なし数値は無効 */
p {
  letter-spacing: 4;    /* × 無効（ブラウザが無視する） */
  letter-spacing: 4px;  /* ○ 有効 */
  letter-spacing: 0.05em; /* ○ 有効（推奨） */
}

/* line-heightは単位なし数値が有効かつ推奨 */
p {
  line-height: 1.6;   /* ○ 有効・推奨（倍率として機能） */
  line-height: 1.6em; /* △ 有効だが継承時に注意 */
  line-height: 26px;  /* △ 有効だが継承時に問題が起きやすい */
}

チェックリストまとめ

  • DevToolsのComputedタブで実際に適用されている計算値を確認した
  • 詳細度の高い他のセレクターに上書きされていないか確認した
  • !importantで強制されたスタイルがないか確認した
  • セレクターが意図した要素に正しくマッチしているか確認した
  • ブラウザおよびWordPressのキャッシュをクリアした
  • letter-spacingには単位（emまたはpx）を付けているか確認した
  • line-heightはpxや%ではなく単位なし数値で指定しているか確認した

これらをひとつずつ確認することで、ほとんどの「効かない」問題は解決できます。それでも解決しない場合はDevToolsの「Override」機能でその場だけ値を変えて動作確認するか、CSSのコメントアウトで影響箇所を絞り込んでいくとよいでしょう。

よくある質問（FAQ）

css line-heightの値はどの単位を使えばいいですか？

単位なしの数値（例：1.6や1.8）を使うのが最もおすすめです。数値指定をすると継承時に「倍率」として子要素に渡されるため、子要素のフォントサイズが変わっても常に適切な行間の比率が保たれます。pxや%、emで指定すると計算済みの値が継承されてしまい、フォントサイズが異なる見出しや小文字要素で行間がおかしくなることがあります。

css 行間を詰めるにはどう指定しますか？

line-heightの値を小さくすることで行間を詰めることができます。たとえばデフォルトのnormal（約1.2倍）より小さい値は指定できませんが、本文の1.8から1.3〜1.4に下げることで行間が詰まった印象になります。見出しや大きなキャッチコピーでは1.1〜1.3程度まで詰めることもあります。ただし詰めすぎると読みにくくなるため、最低でも1.2以上を目安にしてください。

letter-spacingの使い方がわかりません。どう設定すればいいですか？

letter-spacingはem単位で指定するのがおすすめです。日本語の本文なら0〜0.02em程度、見出しなら0.03〜0.05em程度が読みやすいとされています。英字のロゴや大文字テキストには0.1〜0.3emの大きめな値を設定すると高級感やスタイリッシュな印象を演出できます。字間を詰めたい場合は-0.02em〜-0.05em程度のマイナス値を使います。なお単位なしの数値（例：letter-spacing: 4）はCSSでは無効な値なので必ず単位を付けてください。

css 字間（letter-spacing）が効かない・反映されないのですがなぜですか？

いくつかの原因が考えられます。まず「letter-spacing: 4」のように単位なし数値を指定している場合はCSSとして無効な値のためブラウザに無視されます。必ずpxまたはemの単位を付けてください。次に詳細度の高い別のセレクターやWordPressテーマのスタイルに上書きされている可能性があります。ブラウザのDevToolsでComputedタブを確認し、実際に適用されている値を見てください。またキャッシュプラグインが古いCSSを保持している場合もあるので、キャッシュのクリアも試してみてください。

line-heightとletter-spacingの違いは何ですか？

line-heightは行と行の間隔（縦方向の余白）を指定するプロパティで、行ボックスの高さを決めます。一方letter-spacingは文字と文字の間隔（横方向の余白）を指定するプロパティです。読みやすい文章を作るためにはこの2つを組み合わせて設定することが重要で、日本語本文ならline-heightは1.7〜1.9、letter-spacingは0〜0.02em程度が目安です。見出しはline-heightを1.3〜1.5に小さくし、letter-spacingは0.03〜0.05em程度に設定するとバランスよく仕上がります。

関連記事

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

WithCodeを体験できる初級コース公開中！

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

  • 期間：1週間
  • 学習内容：
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →
CSS

この記事を書いた人

田中誠のアバター 田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。

関連記事

  1. ホーム
  2. プログラミング
  3. CSS
  4. CSSで行間・字間を調整する方法｜line-heightとletter-spacingコピペ早見表付き

– service –WithGroupの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう！

    詳細はこちら

  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう！

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
を予約！

無料カウンセリングを予約する
目次