行間を調整する

CSS - line-height

行間を調整する line-height

CSSプロパティ｢line-height｣は、行の高さを指定する際に使用します。

<p class="line-height">おはようございます。今日は天気がいいですね。</p>
<style>
.line-height {
  border: 1px solid;
  width: 150px;
  font-size: 14px;
  line-height: 20px;
  }
</style>

上記の例でいうと、font-size 14pxを指定して｢line-height｣に20pxを指定しているとすると、行間の高さ20pxに対して、14pxの文字サイズを指定しているので、上下の余白にそれぞれ３pxずつの余白が取られる計算になります。

また、imgやinputなどの置換インライン要素とよばれる要素には効果がありませんので、注意してください。

取りうる値

数値またはキーワードで指定します。またマイナス値は指定することができません。

値	説明
normal	初期値です。閲覧しているブラウザに依存します
数値 + 単位	px, em, %などで指定
数値のみ	指定された要素のフォントサイズに掛け合わせる数値です

値の単位の詳細は以下の通りです。

単位	説明
px	pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。
em	親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。
%	親要素の幅を基準に割合を％値で指定した単位です。

単位の指定について

このプロパティですが、おすすめは単位を指定しない方法です。この理由として、まず一つがpxなどの絶対値を指定すると、拡大縮小をした際に行間が固定されてしまい、意図する表示にならない恐れがあります。そしてもう二つ目に、このプロパティで指定された値は子要素にも引き継がれる特徴があるので、親要素、子要素、孫要素で font-size が指定されていた場合にこちらも意図しない表示になることがあります。以下例を確認してみましょう。

子要素以下に値が引き継がれる例

親要素、子要素、孫要素にそれぞれ文字サイズを指定してます。そして、親要素で｢line-height｣を指定している構造です。それらをまとめた表と表示例を確認してみてください。

要素	文字サイズ	line-height(1.5)	line-height(1.5em)
親要素	16px	1.5	24px	24px
子要素	14px	1.5	21px	24px
孫要素	12px	1.5	18px	24px

line-height: 1.5; を指定した場合

それぞれの要素で指定した文字サイズに掛け合わされた値が、行間の高さとして効いていることが確認できます。

<div class="parent-box line-height">
  <strong>親要素</strong>です。この要素にline-heightを指定しています。
  このなかに内包されている要素にどんな影響があるでしょうか。
  <div class="child-box">
    <strong>子要素</strong>です。line-heightの指定はありません。この要素にはどんな影響があるでしょうか。
    <div class="grand-child-box">
      <strong>孫要素</strong>です。line-heightの指定はありません。この要素にはどんな影響があるでしょうか。
    </div>
  </div>
</div>
<style>
div {
  border: 1px solid;
  padding: 5px;
}
.parent-box {
  width: 200px;
  border-color: green;
  line-height: 1.5;
  font-size: 16px;
}
.child-box {
  border-color: blue;
  font-size: 14px;
}
.grand-child-box {
  border-color: aqua;
  font-size: 12px;
}
</style>

line-height: 1.5em; を指定した場合

親要素で計算された値（16px * 1.5 = 24px ）がそのまま、子要素、孫要素に継承されてしまいました。

<div class="parent-box line-height">
  <strong>親要素</strong>です。この要素にline-heightを指定しています。
  このなかに内包されている要素にどんな影響があるでしょうか。
  <div class="child-box">
    <strong>子要素</strong>です。line-heightの指定はありません。この要素にはどんな影響があるでしょうか。
    <div class="grand-child-box">
      <strong>孫要素</strong>です。line-heightの指定はありません。この要素にはどんな影響があるでしょうか。
    </div>
  </div>
</div>
<style>
  div {
    border: 1px solid;
    padding: 5px;
  }
  .parent-box {
    width: 200px;
    border-color: green;
    line-height: 1.5em;
    font-size: 16px;
  }
  .child-box {
    border-color: blue;
    font-size: 14px;
  }
  .grand-child-box {
    border-color: aqua;
    font-size: 12px;
  }
</style>

こういったケースになりうることがあるので、指定する際には、単位は指定しない方がよいといえるでしょう。

使用例

行間や文字間を調整するCSSプロパティ letter-spacing などを組み合わせることによって、文章の雰囲気や印象を変えることができます。

<div>
Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
</div>
<div class="line-height">
Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
</div>
<style>
div {
  border: 1px solid;
  padding: 5px;
  margin-bottom: 5px;
  width: 200px;
  font-size: 14px;
}
.line-height {
  letter-spacing: 0.2em;
  line-height: 1.4;
}
</style>