【HTML初心者向け】 line-height:を使って行間を指定する方法



【HTML初心者向け】 line-height:を使って行間を指定する方法

頑張って文章を書いたのに、文字が詰まっているせいでなんだか見にくい。かっこいいフォントを使ったのに、行間が狭くてきまらない。そんな悩みを解決してくれるのが、line-heightプロパティです。このプロパティを使い行間を指定することで、文章をより読みやすく魅力的なものにすることができます。そこで、今回は、line-heightの使い方を4つの例とともにわかりやすく解説していきます。

目次
  1. 行間を指定するメリット
  2. 使用するプロパティ
  3. 実際に行間を指定する方法
  4. 1. 値と単位を組み合わせて指定する方法</h4>
  5. 2. 値のみで指定する方法
  6. 3. %を使用する方法
  7. 4. normalを指定する方法
  8. 部分的に行間を変える方法
  9. まとめ

行間を指定するメリット

行間を指定する最大のメリットは、文章を読みやすくするところにあります。長くてぎっちりと詰まった文章は読みにくく、せっかく頑張って書いても読者に読んでもらえない原因に。誰が見ても見やすく、読みたくなるような文章を書くには、行間を調節することが重要なポイントとなります。

使用するプロパティ

行の高さは、スタイルシートにline-heightプロパティを書き込むことで調節することができます。そして、記述方法には、値と単位を組み合わせて指定する方法、値のみで指定する方法、%を使用する方法、normalを指定する方法の4つがあります。また、負の数を指定することはできません。

Mid_IV_Miyoshi

実際に行間を指定する方法

では、早速、行間を調整する4つの方法を
  1. 値と単位を組み合わせて指定する方法
  2. 値のみで指定する方法、
  3. %を使用する方法
  4. normalを指定する方法
の順番に見てみましょう。

1. 値と単位を組み合わせて指定する方法

まずは、値と単位を組み合わせて指定する方法を紹介します。数値にpxやemといった単位をつけることにより行間を調節します。下記の例のようにフォントサイズ16pxに対し30pxの行間を指定した場合、14px(上下に7pxずつ)の余白が作られます。また、pxの他にも、emやxといった単位を指定することもできます。

■html1
<p class=”ex1”>
フォントを16px<br>
行間を30pxに<br>
指定しています。
</p>
■css1
.ex1{
font-size:16px;
line-height:30px;
}

フォントを16px
行間を30pxに
指定しています。

2. 値のみで指定する方法

次は、値のみで指定する方法です。フォントサイズに指定された値をかけた分だけ行間が作られます。下記の場合、フォントサイズ16pxに行間2をかけた32pxが行の高さとなります。

■html2
<p class=”ex2”>
フォントを16px<br>
行間を2に<br>
指定しています。
</p>
■css2
.ex2{
font-size:16px;
line-height:2;
}

フォントを16px
行間を2に
指定しています。

3. %を使用する方法

そして、%を使用する方法の紹介です。フォントサイズに指定されたパーセントをかけた分、行間が作られます。下記の例では、フォントサイズ16pxに行間250%がかけられているため、50pxが行の高さとなります。

■html3
<p class=”ex3”>
フォントを16px<br>
行間を250%に<br>
指定しています。
</p>
■css3
.ex3{
font-size:16px;
line-height:250%;&
}

フォントを16px
行間を250%に
指定しています。

4. normalを指定する方法

あわせて、normalを指定する方法を紹介します。Normalでは、初期値を設定することができ、ブラウザの判断により行間が決定されます。

■html4
<p class=”ex4”>
フォントを16px<br>
行間をnormalに<br>
指定しています。
</p>
■css4
.ex4{
font-size:16px;
line-height:normal;
}

フォントを16px
行間をnormalに
指定しています。

部分的に行間を変える方法

画面のレイアウト上、部分的に行間を変更したい時があると思います。そんな時は、タグとクラスをうまく使い、css適用部分を上手に抜き出すことで対応しましょう。

下記の例では、divタグにデフォルト値であるnormalを設定しています。そして、一つ目の文に狭い行間を適用するために、pタグで切り分けをしてsmallクラスを付与しています。同様に、3つ目の文に広めの行間を適用するために、pタグで切り分けをしてbigクラスを付与しています。

■html
<div class="normal">
<p class="small">
小さめに行間を取ると
<br>
読みにくくなります。
</p><br>
普通の行間を取ると
<br>
読みづらく感じる
<br>
場合があります。
<p class="big">
大きめに行間を取ると
<br>
読みやすくなります。
</p>
</div>
■css
.normal{
font-size:16px;
line-height:normal;
}
p.small{
line-height:90%;
}
p.big{
line-height:200%;
}

小さな行間を設定すると
読みにくくなります。


普通の行間を取ると
読みづらく感じる
場合があります。

大きめに行間を取ると
読みやすくなります。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

ここまで、line-heightプロパティを用いた行間の設定方法について見てきました。4つある行間指定方法を上手に使いこなして、より読みやすいデザインのwebページを目指してみてください!

関連記事

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