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

CSSのline-heightプロパティで行の高さを設定する方法

line-heightプロパティとは

CSSのline-heightプロパティは、テキストの1行分の高さ（行間）を設定するために使用されるプロパティです。行間の値は文章の読みやすさに直結するため、Webページのタイポグラフィにおいて非常に重要な役割を果たします。

line-heightプロパティには、次の3種類の値を指定できます。

  • 数値（単位なし）：フォントサイズに対する倍率で指定します（例：line-height: 1.5;）
  • 長さ：px、em、remなどの単位で指定します（例：line-height: 30px;）
  • パーセンテージ：フォントサイズに対する割合で指定します（例：line-height: 150%;）

特別な理由がない限り、単位なしの数値を使用することが推奨されています。単位なしの値はフォントサイズとの相対的な倍率として解釈され、子要素にも自然に行の高さが継承されるためです。

コード例

<html>
    <head>
    </head>
    <body>
        <p style = "width:300px; height:100px; border:2px solid green; padding:5px; margin:10px; line-height:30px;">
            This paragraph is 300 pixels wide and 100 pixels high and here line height is 50 pixels.
        </p>
    </body>
</html>

実行結果の解説

この例では、幅300px・高さ100pxの段落要素に対して、緑色の2pxの枠線とパディング・マージンを設定し、さらにline-height: 30px;によって行の高さを30pxに指定しています。ブラウザで表示すると、テキストの各行が30pxの間隔で配置され、行間が広く取られた読みやすい文章になります。

このようにline-heightの値を変更しながら表示を確認することで、行間がレイアウトや可読性にどのような影響を与えるかを簡単に把握できます。

  1. CSSでheight（高さ）プロパティをアニメーションさせる方法

    CSSで要素のheight（高さ）プロパティをアニメーションさせたい場合は、@keyframesルールとanimationプロパティを組み合わせて使います。以下のサンプルコードを実行すると、div要素の高さが一定間隔で滑らかに変化するアニメーションを確認できます。 サンプルコード <!DOCTYPE html> <html>   <head>     <style>       div {    &

  2. CSSのline-heightプロパティで行の高さを設定する方法

    テキストの行の高さは、CSSのline-heightプロパティを使用して定義できます。このプロパティには正の値のみを指定できます。負の値や無効な値を設定した場合は無視されるため、注意が必要です。構文CSSのline-heightプロパティの構文は以下のとおりです。Selector { line-height: /*値*/ }指定できる値の種類line-heightプロパティには、以下のような値を指定できます。normal：ブラウザのデフォルトの行の高さ（初期値）数値（単位なし）：フォントサイズに対する倍率で指定（例：1.5）長さ（px、emなど）：絶対的な値で指定（例：50px）パーセ