CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで行間（line-height）を設定する方法

CSSで行間を設定するには

テキストの行間（行の高さ）を設定するには、CSSの line-height プロパティを使用します。適切な行間を指定することで、文章の可読性を大きく向上させることができます。

line-height プロパティに指定できる値は以下のとおりです。

line-height: normal|number|length|initial|inherit;
  • normal：ブラウザのデフォルトの行間が適用されます
  • number：フォントサイズに対する倍率で指定します（例：1.9）
  • length：px や em などの単位で指定します
  • initial：初期値に設定します
  • inherit：親要素の値を継承します

例1：数値で行間を指定する

まずは、数値で行間を指定する例を見てみましょう。ここでは「1.9」を指定しているため、フォントサイズの1.9倍の行間が適用されます。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   line-height: 1.9;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>

出力結果

CSSで行間（line-height）を設定する方法

例2：パーセンテージで行間を指定する

次に、パーセンテージで指定する例です。「200%」を指定すると、フォントサイズの2倍の行間になります。パーセンテージ指定は、レスポンシブデザインでも扱いやすいのが特徴です。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   line-height: 200%;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>

出力結果

CSSで行間（line-height）を設定する方法

まとめ

行間の調整には line-height プロパティを使用します。数値やパーセンテージで指定することで、フォントサイズに応じた柔軟な行間設定が可能です。文章量の多いページでは、1.5〜2程度の値を指定すると読みやすいレイアウトになりやすいので、ぜひ試してみてください。

  1. CSSのcolorプロパティで文字色を設定する方法

    CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ {     color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp

  2. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用