【HTML】行間設定・調整の基本について解説

「HTMLで行間を調整する方法と効果」に関して、以下2つを簡単に解説していきます。

1. CSSのline-heightプロパティを使用した行間調整
2. 行間調整がもたらす可読性向上の効果

HTMLにて文字の行間をCSSで調整する方法を、よく使用されるケースを含めて共有します。
ブログ記事や、LPを紹介するコンテンツなど、文字を表現する機会はWebページでは多いですが、スマートフォンやPCといったデバイスに応じて、文字の行間を調整をする必要性が多く出てきます。

可読性という点においてはUIUXに限らず、マーケティングの視点でも重要です。
以下のcodepenの内容では簡易なそれぞれの用途にあわせたサンプルコードを記述しているので確認してみましょう。

CSSのline-heightプロパティを使用した行間調整

HTMLで行間を調整するには、CSSのline-heightプロパティを使用します。このプロパティは、テキストの行の高さを指定し、上下の余白を制御できます。line-heightの値は、単位付きの数値、単位なしの数値、またはパーセンテージで指定できます。

p {
  font-size: 16px;
  line-height: 1.5;
}

上記のコードでは、段落のフォントサイズを16ピクセルに設定し、行の高さをフォントサイズの1.5倍に指定しています。これにより、テキストの上下に適切な余白が生まれ、読みやすさが向上します。line-heightの値を調整することで、テキストの密度を変更できます。

line-heightプロパティは継承されるため、親要素に設定すると子要素にも適用されます。ただし、特定の要素だけ行間を変更したい場合は、個別に指定することも可能です。英語では「line spacing」や「leading」とも呼ばれるこの設定は、ウェブデザインにおいて重要な役割を果たします。

行間調整がもたらす可読性向上の効果

適切な行間調整は、テキストの可読性を大幅に向上させる効果があります。狭すぎる行間は文字が詰まって見え、読者の目が疲れやすくなります。一方、広すぎる行間は文章のつながりが失われ、読みづらくなる傾向があります。

.readable-text {
  line-height: 1.6;
  max-width: 65ch;
}

上記の例では、行間を1.6に設定し、テキストの最大幅を65文字分に制限しています。これにより、長文でも読みやすい最適な行間と行の長さを実現できます。適切な行間は、テキストのリズムを生み出し、読者の目の動きをスムーズにします。

行間調整は、ウェブサイトの全体的な印象にも影響を与えます。広めの行間は、スタイリッシュで現代的な印象を与え、狭めの行間は、コンパクトで情報密度の高い印象を与えることができます。デバイスやスクリーンサイズに応じて行間を調整することも、レスポンシブデザインの重要な要素です。

「HTMLとCSSを使った効果的な行間設定テクニック」に関して、以下2つを簡単に解説していきます。

1. 相対単位を使用した柔軟な行間設定
2. メディアクエリを活用した行間の最適化

相対単位を使用した柔軟な行間設定

行間を設定する際、絶対単位（px）よりも相対単位（em, rem）を使用すると、よりフレキシブルなレイアウトを実現できます。emはその要素のフォントサイズを基準とし、remはルート要素のフォントサイズを基準とします。これにより、ユーザーのフォントサイズ設定に応じて行間も適切に調整されます。

body {
  font-size: 16px;
}
p {
  line-height: 1.5em;
}

上記の例では、段落の行間をフォントサイズの1.5倍に設定しています。ユーザーがブラウザの設定でフォントサイズを変更しても、行間は常にフォントサイズに対して適切な比率を維持します。これにより、様々な環境やデバイスで一貫した読みやすさを確保できます。

また、vhやvwなどのビューポート相対単位を使用することで、画面サイズに応じて動的に行間を調整することも可能です。これは特に、大画面デバイスと小画面デバイスの両方に対応する必要がある場合に有効なテクニックです。

メディアクエリを活用した行間の最適化

メディアクエリを使用することで、デバイスの画面サイズやピクセル密度に応じて行間を最適化できます。小さな画面では行間を狭めてコンパクトに表示し、大きな画面では行間を広げて読みやすくするなど、柔軟な対応が可能になります。

p {
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  p {
    line-height: 1.6;
  }
}

このコードでは、デフォルトの行間を1.4に設定し、画面幅が768ピクセル以上の場合に行間を1.6に増やしています。これにより、モバイルデバイスではコンパクトに、デスクトップではより読みやすく表示されます。メディアクエリを活用することで、デバイスごとに最適な行間を提供できます。

さらに、プリント用のスタイルシートでは、印刷時の可読性を考慮して行間を調整することも重要です。@media print {}を使用して、印刷時専用の行間設定を行うことで、スクリーン表示と印刷物の両方で最適な読みやすさを実現できます。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム

• 
  HTMLコメント機能でメモ活用による効率的な開発を実現する方法
• 
  【Bootstrap】サンプルを活用したサイトのカスタマイズ方法
• 
  【CSS】角を丸くする方法(border-radiusの使い方)を解説
• 
  HTMLタブの作り方！基本構造からレスポンシブ対応のタブ切り替え
• 
  HTML・CSSで斜め文字を実装するコーディングテクニック

ITやプログラミングに関するニュース

• 
  Visual Studio Code 2024年8月アップデート公開、プロファイル管理とvscode.devのIntelliSense強化で開発効率が向上
• 
  Microsoftが「フォト」アプリの2024年9月アップデートを発表、iCloud写真対応とパフォーマンス向上を実現
• 
  GoogleがGeminiレポートを強化、ユーザーレベル使用状況の詳細な把握が可能に
• 
  Google、画像生成モデル「Imagen 3」を発表。ImageFXにて無料で利用可能
• 
  AI推論プラットフォーム「Cerebras Inference」登場。AI業界に革命をもたらす超高速推論ソリューション