line-heightを使ったHTMLとCSSの行間指定をわかりやすく解説

文章の行間は、サイトを訪れるユーザーに与える印象に大きく関わります。

適切な行間指定を行うにはいくつかの方法があるので初心者にわかりやすく紹介します。

＼参加者満足度99％！／
無料カウンセリングに申し込む
※最短1分で申し込み可能

行間の変更

行間が狭すぎると窮屈な印象を与え、広すぎると情報量が少ない印象を与えます。
また、どちらもやりすぎると読みづらくなってしまいます。

では、どのように適切な行間へ設定するのでしょうか？

HTMLとCSSが初心者の人でもわかりやすく説明していきます。

line-heightを使う

行の高さを指定することで、行間が決まるline-heightというプロパティを使います。

直接、行間の指定を行うのではなく、文字の上下の高さを指定することによって行間が変更できます。

line-height: 数値；

数値は、大きくなるにつれ行の高さが広がり、数値が下がると狭くなります。

単位について

単位には３種類あります。

しかし、上に挙げた３種類はフォントサイズに応じてline-heightの数値を変更する必要があります。

特に、emと%の指定を親要素に行った場合、子要素にも同じline-heightの値が適応されてしまいます。
これらの単位は、親要素と子要素のフォントサイズが異なる場合に、適切な行の高さではなくなってしまいます。

それを防ぐために、line-heightには単位を付けないことを勧めます。

line-height: 1.5;

HTMLとCSSで変更可能

ここまで説明してきたline-heightはHTMLでもCSS上でも使えます。

HTMLとCSSでの使い方についてそれぞれ説明していきます。

HTMLでline-heightを使った行間指定

まずはHTML上でのline-heightの使い方について解説します。

<div style="line-height: 1.5;>
:
:
</div>

CSSでline-heightを使った行間指定

HTMLよりの一般的にはCSS上でのline-heightを使って行の高さが指定されます。

p {
  line-height: 1.5;
}

上手く反応しない場合

行間の指定を行うためにline-heightを使っていも、それが効かない場合があります。

上記したようにline-heightは行間を指定するものではなく、行の高さを指定するものです。

ここではline-heightが正しく作用しにくいpタグのミスについて解説します。

pタグの行間指定

「line-heightを行ったのにpタグだけに適応がされない。」なんてことはありませんか？

pタグの部分だけ、行間指定されない時には余白の指定をすることで解決できます。

marginについて詳しく知りたい方はこちら。
2019.09.04 CSS【paddingとmarginの使い分け】余白の作り方を徹底解説！

これは、行の高さを指定するline-heightとは違い、行の周りにある余白を調整するイメージです。

サンプルコードです。

p {
  line-height: 1.5;
  margin-top: 5px;
  margin-bottom: 5px;
}

このようにline-heightで行の高さを指定してから、marginで上下の余白の指定をします。

まとめ

line-heightを使った行の間隔の指定方法を説明しました。

行の高さの指定をするのがline-heightという考えを持っていれば、行間を指定する時にイメージしやすいでしょう。

適切な行間の指定をして、読みやすいサイトにしましょう！

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談！

DMM WEBCAMPは転職成功率は98％※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます！

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか？

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう！この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

＼オンラインで実施中／
【無料】キャリア相談の日程を見る

※ 1 2020年４月時点