CSSで行間を調整しよう｜line-heightの使い方

（最終更新日：2023年11月）

✔以下の疑問を持つ方に向けた記事です

「cssで行間の調整をしたいが、どのようにすればいいのだろう？」
「行間のcss記述方法について学びたい」
「cssで行間を調整する具体的な例を知りたい」

✔当記事を通して伝えたいこと

• cssにおける行間調整の基本知識
• 行間調整のcss記述方法とその応用
• 調整行間の実例について

当記事では、cssでの行間調整の基本から応用まで、具体的な実例を交えて詳細に解説しています。

ぜひ、最後までご覧ください。

行間を操作するCSSプロパティ

こちらでは、「行間を操作するCSSプロパティ」についてお伝えしていきます。

• line-heightを使った基本的な調整方法
• さまざまな単位での指定

line-heightを使った基本的な調整方法

line-heightは、CSSで行間を調整するためのプロパティです。

このプロパティを使用すると、テキストの行間（つまり、行と行の間のスペース）を指定できます。

例えば、全ての段落に対して行間を1.5に設定するには、以下のように記述します。

p {
  line-height: 1.5;
}

さまざまな単位での指定

line-heightプロパティでは、さまざまな単位を使って指定することが可能です。

最も一般的な単位は以下のとおり。

• ピクセル(px)
• em
• %

単位を指定しない場合、line-heightは数値で解釈され、その数値は元のフォントサイズに対する相対的な値となります。

この方法は、テキストの行間を一貫して保つのに有用です。

line-heightで行間を調整する方法

こちらでは、「line-heightで行間を調整する方法」についてお伝えしていきます。

• line-heightの詳細な使い方
• 取ることのできる値の例
• 単位なし指定のメリット
• px指定と相対指定の違い

line-heightの詳細な使い方

line-heightプロパティは、特定のセレクタに対して行間を設定するために使用します。

例えば、すべての段落（pセレクタ）の行間を2に設定したい場合、以下のようなCSSを記述しましょう。

p {
  line-height: 2;
}

この設定では、フォントサイズの2倍の行間が適用されます。

取ることのできる値の例

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

• 単位なしの数値（例：line-height: 1.5;）
• パーセント（例：line-height: 150%;）
• 長さ（例：line-height: 24px;）

単位なし指定のメリット

単位なしの数値を使用すると、行間がフォントサイズに対して相対的な値となります。

つまり、フォントサイズが変わると、行間もそれに合わせて調整されるのです。

レスポンシブデザインにおいて、異なるデバイスや画面サイズでの表示を一貫させるのに有用です。

px指定と相対指定の違い

ピクセルで指定した場合、行間は固定のピクセル数となります。

フォントサイズが変わった場合でも、相対的な行間が維持され、テキストの視認性を一定に保つことが可能。

これは、特に異なるデバイスや画面サイズに対応したレスポンシブデザインにおいて重要な点です。

行間が生まれる仕組み

こちらでは、「行間が生まれる仕組み」についてお伝えしていきます。

「行間が生まれる仕組み」について知っておきましょう。

• 文字ベースの行間マージン
• 行間の見直し方法

文字ベースの行間マージン

line-heightプロパティは、要素の”行ボックス”の高さを指定します。

行ボックスは、行に含まれる各インラインボックス（文字など）を囲む最小の矩形領域のこと。

この行ボックスの高さがline-heightによって制御されるのです。

そのため、line-heightを操作することで、テキスト行の間のマージンを調整できます。

行間の見直し方法

テキストの行間を見直す際には、まずテキストがどのように表示され、読者にどのように受け取られるかを評価することが重要です。

読みやすさを確保しながらもデザイン上の調和を保つことが求められます。

テキストの量、フォントサイズ、ブロック要素の幅などを考慮に入れ、それぞれの要素が適切にバランスを取れるように調整することが必要です。

おすすめの line-height の値

こちらでは、おすすめの line-height の値をご覧いただきます。

• line-height: 1.5 の効果・利用例
• line-height: 1.7 の効果・利用例
• line-height: 2.0 の効果・利用例

line-height: 1.5 の効果・利用例

line-height: 1.5は、一般的なテキストの行間としてよく用いられます。

この値は、フォントサイズの1.5倍の行間を設定。

これは、一般的な文章や段落においては十分な読みやすさと視覚的な快適さを提供するでしょう。

特に、大量のテキストを含むウェブページやブログ記事でよく見られます。

p {
  line-height: 1.5;
}

line-height: 1.7 の効果・利用例

line-height: 1.7は、少し広めの行間を求める場合に適しています。

この行間の設定は、文章をより読みやすく、視覚的に落ち着かせたいときに効果的です。

特に、長いブログ記事や報告書、電子書籍などでよく使われます。

p {
  line-height: 1.7;
}

line-height: 2.0 の効果・利用例

line-height: 2.0は、通常よりも大きな行間が必要な場合や、特定のデザイン効果を目指している場合に適しています。

例えば、ポエムや引用文などの特別なテキストブロックで使用すると、そのテキスト部分がより目立ち、読者の注意を引きやすくなります。

blockquote {
  line-height: 2.0;
}

最適な line-height の値を見つける

こちらでは、最適な line-height の値を見つける方法についてお伝えしていきます。

• 見やすさとデザインの調和を考慮
• フォントサイズとの相性チェック

見やすさとデザインの調和を考慮

最適な行間の値を見つけるためには、見やすさとデザインの調和を考慮する必要があります。

• 見やすさ：行間が広すぎず狭すぎない・テキストが一貫して読みやすい
• デザインの調和」行間が全体のレイアウトとマッチし、視覚的に美しく見える

これら二つの観点から試行錯誤を重ね、適切な行間を見つけ出すことが重要です。

フォントサイズとの相性チェック

行間の適切な値は、使用しているフォントサイズにも影響を受けます。

大きなフォントサイズでは、相対的な行間（line-height）も大きくなるため、それが適切なのかの検討も必要です。

小さなフォントサイズでは行間が狭くなりすぎて読みにくくなる可能性があるため、注意が必要でしょう。

line-heightを設定する際は、それが実際のフォントサイズとどのように相互作用するかを確認することが重要です。

行間調整の実践 – pタグへの設定

こちらでは、行間調整の実践方法についてお伝えしていきます。

• pタグのカスタマイズ方法
• サンプルコードと解説

pタグのカスタマイズ方法

Pタグへのline-heightの設定は、ウェブサイト全体のテキストの行間を制御する最も一般的な方法です。

なぜならPタグは、HTMLで最も一般的に使用される段落要素だから。

CSS内でpタグを指定し、line-heightプロパティを適用することで、サイト全体の段落の行間を簡単に調整できるのです。

サンプルコードと解説

以下は、line-heightを用いたpタグのカスタマイズの例です。

p {
  line-height: 1.6;
}

このCSSコードは、すべてのpタグ（段落）にline-heightプロパティを適用し、その値を1.6に設定。

段落の行間がフォントサイズの1.6倍になり、テキストは読みやすく、視覚的に快適になります。

まとめ

当記事でお伝えしたことは以下のとおり。

• 行間調整方法の確認
• 適切な行間の見つけ方
• おすすめの行間とは

line-heightを使うと簡単に行間が調整できます。

いろいろと試しながら、自身のサイトにあうline-heightを見つけましょう。