HTML/CSS

【CSS】行間を広く・狭くする方法(line-height)

本記事では、HTMLで表示したテキストの行間をCSSで調整する方法について解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

行間を広く・狭くする

行間を広く・狭く調整するには、line-heightプロパティを使用します。

.sample {
  line-height: 値;
}

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

line-heightの値
  1. 数値で指定(1.5、3など)
  2. px、emなどの数値で指定(20px、2emなど)
  3. %で指定(50%、200%など)

実際の開発現場で使用される指定方法は、①の数値で指定になります。その理由としてデザイナーから共有されるPSDデータなどでは、フォントサイズと行送りの数値が設定されているのでその数値を元にline-heightに設定する値を求めることが簡単に出来ます。

line-heightの計算式

行送り(30px) / フォントサイズ(20px) = line-height(1.5)

実際にline-heightを設定して、文章の行間がどのくらいに調整されるのかサンプルコードと実行結果を確認してみましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <p class="lh-s">
        私の好きな食べ物は<br />ラーメン・ステーキ・お寿司です。<br />特に好きなのはラーメンです。
      </p>
    </div>
    <div>
      <p class="lh-m">
        私の趣味は<br />映画鑑賞・読書・食べ歩きです。<br />特に好きなのは食べ歩きです。
      </p>
    </div>
    <div>
      <p class="lh-l">
        最近ハマっていることは<br />アニメ鑑賞です。<br />スパイファミリーが面白いです。
      </p>
    </div>
  </body>
</html>
div {
  border: 1px solid #000;
}

div + div {
    margin-top:10px;
}

.lh-s {
  line-height: 0.9;
}

.lh-m {
  line-height: 1.5;
}

.lh-l {
  line-height: 2.5;
}

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村