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

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

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

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

行間の変更

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””] 行間が狭すぎる
[/su_column] [su_column size=”1/2″ center=”no” class=””] 行間が広すぎる
[/su_column] [/su_row]

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

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

line-heightを使う

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””] line-heightを使う

[/su_column] [su_column size=”1/2″ center=”no” class=””] 直接、行間の指定を行うのではなく、文字の上下の高さを指定することによって行間が変更できます。
[/su_column] [/su_row]
line-height: 数値;

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

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

単位について

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

px 直接高さの指定
em 親要素のフォントサイズに応じて指定。
%  親要素のフォントサイズに応じて指定。


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

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

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””]
line-height: 1.5;
[/su_column] [su_column size=”1/2″ center=”no” class=””]

line-heightに単位を付けないことで、子要素であれ、そのフォントサイズにあった行の高さが適応されます。 

[/su_column] [/su_row]

HTMLとCSSで変更可能

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

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


初心者でも実践的なスキルが身につく DMM WEBCAMP

「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】

✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム

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

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””]
HTML
<div style="line-height: 1.5;>
:
:
</div>
[/su_column] [su_column size=”1/2″ center=”no” class=””]

HTML上で行間の指定を行う場合には、style= を使ってline-heightのプロパティを指定します。

[/su_column] [/su_row]

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

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””]
CSS
p {
  line-height: 1.5;
}
[/su_column] [su_column size=”1/2″ center=”no” class=””]

CSS上でのline-heightはこのようになります。

単位を付けないことにより、どのフォントサイズにも適切な行の高さが適応されます。

[/su_column] [/su_row]


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】

✔受講生の97%が未経験
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能
通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

上手く反応しない場合

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

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

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

pタグの行間指定

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

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””]

marginを使って余白の指定をする

[/su_column] [su_column size=”1/2″ center=”no” class=””]

line-heightは行の高さの指定です。

なので、pタグの要素はmarginを使って余白の指定をします。

[/su_column] [/su_row]

marginについて詳しく知りたい方はこちら。
paddingとmarginを徹底解説CSS初心者必見!paddingとmarginを徹底解説

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

サンプルコードです。

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

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

まとめ

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

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

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

【DMM WEBCAMP卒業生インタビュー】
【家具販売員からエンジニアに転職成功】不安をすべて取り除いてくれたんです

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5