CSSのline-heightプロパティで行の高さを設定する方法
テキストの行の高さは、CSSのline-heightプロパティを使用して定義できます。このプロパティには正の値のみを指定できます。負の値や無効な値を設定した場合は無視されるため、注意が必要です。
構文
CSSのline-heightプロパティの構文は以下のとおりです。
Selector {
line-height: /*値*/
}指定できる値の種類
line-heightプロパティには、以下のような値を指定できます。
- normal：ブラウザのデフォルトの行の高さ（初期値）
- 数値（単位なし）：フォントサイズに対する倍率で指定（例：1.5）
- 長さ（px、emなど）：絶対的な値で指定（例：50px）
- パーセンテージ（%）：フォントサイズに対する割合で指定（例：60%）
サンプルコード1
以下の例は、CSSのline-heightプロパティの基本的な使い方を示したものです。
<!DOCTYPE html>
<html>
<head>
<style>
div * {
margin: 1.5em;
box-shadow: -13px -10px 10px 1px crimson;
}
#demo {
line-height: 60%;
}
p {
box-shadow: 13px -10px 10px 1px grey;
line-height: 50px;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<div>
<p>これはデモテキスト1です。</p>
<div>これはデモテキスト2です。</div>
<div id="demo">これはデモテキスト3です。</div>
</div>
</body>
</html>出力結果
上記のコードを実行すると、次のような出力が得られます。
サンプルコード2
次の例では、数値を指定して行の高さを制御しています。
<!DOCTYPE html>
<html>
<head>
<style>
div * {
margin: auto;
padding: 3em;
}
p {
height: 100px;
width: 100px;
border: thin solid;
border-radius: 50%;
box-shadow: 0 20px 10px 1px grey;
line-height: 0.6;
}
</style>
</head>
<body>
<h2>C#とは？</h2>
<div>
<p>C#は強く型付けされた言語です。すべての変数と定数には型があり、値に評価されるすべての式にも型があります。</p>
</div>
</body>
</html>出力結果
上記のコードを実行すると、次のような出力が得られます。
まとめ
line-heightプロパティを活用することで、テキストの読みやすさを大幅に向上させることができます。特に、単位なしの数値で指定する方法は、フォントサイズが変わっても行間のバランスが保たれるため、レスポンシブデザインにも適しています。文章量の多いWebサイトでは、1.5〜2程度の値を設定すると、読みやすい行間になります。
-
CSSで要素の幅と高さを指定する方法！height・widthプロパティの基本と実例
CSSの height プロパティと width プロパティは、それぞれ要素の高さと幅を指定するために使用されます。また、max-height、max-width、min-height、min-width プロパティを使えば、これらのサイズに上限値や下限値を設定することも可能です。 基本構文 CSSの height および width プロパティの基本的な書き方は以下の通りです。 Selector { height: /*値*/ width: /*値*/ } 要素の実際のサイズの計算方法 要素の実際の表示サイズは、width や height
-
CSSのcolorプロパティで文字色を設定する方法
CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ { color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp