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

行間を指定するメリット

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

使用するプロパティ

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

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

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

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

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

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

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

3. ％を使用する方法

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

4. normalを指定する方法

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

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

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

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

まとめ

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