CSS初心者が【line-height】で簡単に行間を調整する方法



CSS初心者が【line-height】で簡単に行間を調整する方法

Webサイトの文章の読みやすさだけでなく、サイト全体の印象も左右することのある「行間」を調整してみましょう。CSSで行間を調整する際には、line-height というプロパティが便利です。今回は、スタイルシートの学習をはじめたばかりの入門者むけに、わかりやすく line-height の書き方を説明します。

CSS基礎プロパティの1つになりますので、是非覚えてくださいね。

image

目次
  1. CSSの行間を指定できるline-heightとは?
  2. 構文
  3. 指定可能な値
  4. line-heightを使った行間調整の書き方
  5. 例1 数値のみで指定
  6. 例2 単位で指定
  7. 例3 パーセントで指定
  8. Tips (ステップアップの小ワザ)
  9. まとめ

CSSの行間を指定できるline-heightとは?

CSSのline-heightとは、行の高さを指定するプロパティです。行の高さは、フォントの高さを含めた高さとなり、あまりが余白として上下に配分されます。以下の図のように、指定した行の高さ-フォントの高さ=上下の余白となります。 image

構文

line-height { 数値 ; }

指定可能な値

  1. 数値のみ
    数値のみを指定した場合、フォントサイズ×数値が列の高さに指定されます。
  2. 単位あり
    em(フォントサイズの何倍か)や、px、ptなどの単位を用いて指定できます。
  3. パーセント
    フォントサイズの何%かを指定できます。

1,2,3いずれにも、マイナス値を指定することはできません。  

line-heightを使った行間調整の書き方

line-heightを、いろいろな書き方で表現してみましょう。

例1 数値のみで指定

サンプルコード

/* CSSファイルに記述します */
.sample_1a {
     line-height: 1.1;    /* 行間調整 高さを1.1倍にする */
}
.sample_1b{
     line-height: 2.0;    /* 行間調整 高さを2.0倍にする */
}
.boxtest {
     font-size: 12pt;
     border:1px solid;
     width:20em;
     padding:6pt;
     display: inline-block;
     vertical-align: top;
}
<!-- HTMLファイルに記述します -->
<div class="boxtest sample_1a">
line-height のテスト1.1です</br>
line-height のテスト1.1です</br>
line-height のテスト1.1です
</div>

<div class="boxtest sample_1b">
line-height のテスト2.0です</br>
line-height のテスト2.0です</br>
line-height のテスト2.0です
</div>

結果

line-height のテスト 1.1です
line-height のテスト 1.1です
line-height のテスト 1.1です
line-height のテスト 2.0です
line-height のテスト 2.0です
line-height のテスト 2.0です

例2 単位で指定

サンプルコード

/* CSSファイルに記述します */
.sample_2a {
     line-height: 1.2em;    /* 行間調整 高さを1.2倍にする */
}
.sample_2b {
     line-height: 2.0em;    /* 行間調整 高さを2.0倍にする */
}
.boxtest {
     font-size: 12pt;
     border:1px solid;
     width:20em;
     padding:6pt;
     display: inline-block;
     vertical-align: top;
}
<!-- HTMLファイルに記述します -->
<div class="boxtest sample_2a">
line-height のテスト1.2emです</br>
line-height のテスト1.2emです</br>
line-height のテスト1.2emです
</div>

<div class="boxtest sample_2b">
line-height のテスト2.0emです</br>
line-height のテスト2.0emです</br>
line-height のテスト2.0emです
</div>

結果

line-height のテスト1.2emです
line-height のテスト1.2emです
line-height のテスト1.2emです
line-height のテスト2.0emです
line-height のテスト2.0emです
line-height のテスト2.0emです

例3 パーセントで指定

サンプルコード

/* CSSファイルに記述します */
.sample_3a {
     line-height: 90%;    /* 行間調整 高さを90%にする */
}
.sample_3b {
     line-height: 200%;    /* 行間調整 高さを200%にする */
}
.boxtest {
     font-size: 12pt;
     border:1px solid;
     width:20em;
     padding:6pt;
     display: inline-block;
     vertical-align: top;
}
<!-- HTMLファイルに記述します -->
<div class="boxtest sample_3a">
line-height のテスト90%です</br>
line-height のテスト90%です</br>
line-height のテスト90%です
</div>

<div class="boxtest sample_3b">
line-height のテスト200%です</br>
line-height のテスト200%です</br>
line-height のテスト200%です
</div>

結果

line-height のテスト90%です
line-height のテスト90%です
line-height のテスト90%です
line-height のテスト200%です
line-height のテスト200%です
line-height のテスト200%です

 

Tips (ステップアップの小ワザ)

  • line-height: normal;という指定もできます。normalを指定すると、何も指定しないのと同じ結果になります。(ブラウザにもよりますが、1.2と同様になるものが多いようです)
  • line-heightの指定は 例1の数値指定が望ましいとされています。その理由は、単位指定で行うと、以下のように優先的に採用されるフォントサイズが異なってしまい、意図しない表示となることがあるためです。

意図しない表示 サンプルコード

/* CSSファイルに記述します */
.box {
    width: 12em;
    display: inline-block;
    vertical-align: top;
    font-size: 15px;    /* box内のフォントは15pxにする */
}
h1 {
  font-size: 30px;    /* h1で囲まれた文字は30pxにする */
}
.green {
  line-height: 1.1;    /* 行間調整 高さを1.1倍にする */
  border: solid limegreen;
}
.red {
  line-height: 1.1em;    /* 行間調整 高さを1.1倍にする */
  border: solid red;
}
.orange {
  line-height: 110%;    /* 行間調整 高さを110%にする */
  border: solid orange;
}
<!-- HTMLファイルに記述します -->
<div class = "box green">
<h1>単位のあるline-heightを使うと意図しない結果になることがありますので注意</h1>
数値のみ指定
</div>
<div class = "box red">
<h1>単位のあるline-heightを使うと意図しない結果になることがありますので注意</h1>
単位あり指定(em)
</div>
<div class = "box orange">
<h1>単位のあるline-heightを使うと意図しない結果になることがありますので注意</h1>
単位あり指定(%)
</div>

このようになってしまいます。

単位のあるline-heightを使うと意図しない結果になることがありますので注意

数値のみ指定(1.1)

単位のあるline-heightを使うと意図しない結果になることがありますので注意

単位あり指定(1.1em)

単位のあるline-heightを使うと意図しない結果になることがありますので注意

単位あり指定(110%)

 

まとめ

line-heightは、3つの指定方法がありますが、単位なし指定が推奨されていることを覚えておきましょう。テキストが読みやすくなり、Webサイト全体の印象もアップできるline-heightをぜひ使いこなしてください。

参考:Mozilla Foundation

image

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp