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

CSSでテキスト行の高さを設定する方法（line-heightプロパティの使い方）

CSSでは、line-heightプロパティを使用することで、テキスト1行の高さ（行間）を自由に設定できます。行の高さを適切に調整すると、文章が読みやすくなり、ページ全体のデザインの印象も大きく変わります。

line-heightに指定できる値

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

  • 数値（単位なし）：フォントサイズに対する倍率で指定します。例：「line-height: 1.5;」はフォントサイズの1.5倍の行の高さになります。レスポンシブ対応にも有利なため、最も推奨される指定方法です。
  • 長さ（length）：pxやemなどの単位を使って絶対値で指定します。例：「line-height: 30px;」
  • パーセンテージ（%）：フォントサイズに対する割合で指定します。例：「line-height: 150%;」

コード例

次の例では、幅300ピクセル・高さ100ピクセルの段落に対して、行の高さを30ピクセルに設定しています。

<html>
   <head>
   </head>
   <body>
      <p style = "width:300px; height:100px; border:2px solid green; padding:5px; margin:10px; line-height:30px;">
         この段落は幅300ピクセル・高さ100ピクセルで、行の高さは30ピクセルに設定されています。
      </p>
   </body>
</html>

ポイント

行の高さが狭すぎると文字同士が重なって読みにくくなり、広すぎると文章のまとまりが分かりにくくなります。一般的には、1.4〜1.6程度の倍率指定が読みやすいとされています。また、単位なしの数値で指定しておけば、フォントサイズが変わっても自動的に行間が追従するため、メンテナンス性の高いコードになります。

  1. CSSでテキストの最終行を揃える方法｜text-align-lastプロパティの使い方

    CSSのtext-align-lastプロパティを使用すると、ブロック要素内のテキストの最終行の揃え位置を個別に指定できます。段落全体の配置とは別に、最後の行だけ右寄せや中央寄せにしたい場合に便利です。以下のコードでは、div要素にtext-align-last: right;を設定し、テキストの最終行を右寄せに表示しています。 サンプルコード <!DOCTYPE html> <html>    <head>       <style>         &n

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

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