- 更新日: 2020年10月08日
- 公開日: 2019年07月19日
【HTML初心者向け】行間を指定するline-height:の使い方
頑張って文章を書いたのに、文字が詰まっているせいでなんだか見にくい。かっこいいフォントを使ったのに、行間が狭くてきまらない。
そんな悩みを解決してくれるのが、line-heightプロパティです。このプロパティを使い行間を指定することで、文章をより読みやすく魅力的なものにすることができます。そこで、今回は、line-heightの使い方を4つの例とともにわかりやすく解説していきます。
行間を指定するメリット
行間を指定する最大のメリットは、文章を読みやすくするところにあります。長くてぎっちりと詰まった文章は読みにくく、せっかく頑張って書いても読者に読んでもらえない原因に。誰が見ても見やすく、読みたくなるような文章を書くには、行間を調節することが重要なポイントとなります。
使用するプロパティ
行の高さは、スタイルシートにline-heightプロパティを書き込むことで調節することができます。そして、記述方法には、値と単位を組み合わせて指定する方法、値のみで指定する方法、%を使用する方法、normalを指定する方法の4つがあります。また、負の数を指定することはできません。
実際に行間を指定する方法
では、早速、行間を調整する4つの方法を
1. 値と単位を組み合わせて指定する方法
2. 値のみで指定する方法、
3. %を使用する方法
4. normalを指定する方法
の順番に見てみましょう。
1. 値と単位を組み合わせて指定する方法
まずは、値と単位を組み合わせて指定する方法を紹介します。数値にpxやemといった単位をつけることにより行間を調節します。下記の例のようにフォントサイズ16pxに対し30pxの行間を指定した場合、14px(上下に7pxずつ)の余白が作られます。また、pxの他にも、emやxといった単位を指定することもできます。
<p class=”ex1”>
行間を30pxに<br>
指定しています。
.ex1{
line-height:30px;
フォントを16px
行間を30pxに
指定しています。
2. 値のみで指定する方法
次は、値のみで指定する方法です。フォントサイズに指定された値をかけた分だけ行間が作られます。下記の場合、フォントサイズ16pxに行間2をかけた32pxが行の高さとなります。
<p class=”ex2”>
行間を2に<br>
指定しています。
.ex2{
line-height:2;
フォントを16px
行間を2に
指定しています。
3. %を使用する方法
そして、%を使用する方法の紹介です。フォントサイズに指定されたパーセントをかけた分、行間が作られます。下記の例では、フォントサイズ16pxに行間250%がかけられているため、50pxが行の高さとなります。
<p class=”ex3”>
行間を250%に<br>
指定しています。
.ex3{
line-height:250%;&
フォントを16px
行間を250%に
指定しています。
4. normalを指定する方法
あわせて、normalを指定する方法を紹介します。Normalでは、初期値を設定することができ、ブラウザの判断により行間が決定されます。
<p class=”ex4”>
行間をnormalに<br>
指定しています。
.ex4{
line-height:normal;
フォントを16px
行間をnormalに
指定しています。
部分的に行間を変える方法
画面のレイアウト上、部分的に行間を変更したい時があると思います。そんな時は、タグとクラスをうまく使い、css適用部分を上手に抜き出すことで対応しましょう。
下記の例では、divタグにデフォルト値であるnormalを設定しています。そして、一つ目の文に狭い行間を適用するために、pタグで切り分けをしてsmallクラスを付与しています。同様に、3つ目の文に広めの行間を適用するために、pタグで切り分けをしてbigクラスを付与しています。
<div class="normal">
<br>
読みにくくなります。
<br>
読みづらく感じる
<br>
場合があります。
<br>
読みやすくなります。
.normal{
line-height:normal;
p.small{
p.big{
小さな行間を設定すると
読みにくくなります。
普通の行間を取ると
読みづらく感じる
場合があります。
大きめに行間を取ると
読みやすくなります。
\一流デザイナーのスキルが身に付く/
まとめ
ここまで、line-heightプロパティを用いた行間の設定方法について見てきました。4つある行間指定方法を上手に使いこなして、より読みやすいデザインのwebページを目指してみてください!
- この記事を書いた人
- 稲垣 遥