行間を設定したいときに使う line-heightプロパティ

2015年6月16日

行間を設定して文字を読みやすくする。

行数の多いリストや文字数が多い段落は文字が詰まっていて
読みにくいです。ブラウザにより隙間がなく文字が詰まっている
ことがあります。

その詰まった文字を見やすくするためにCSSで
「line-height」プロパティを使い値を設定すると、
行間を設定ができ文字がみやすくなります。

line-heightプロパティには、文字サイズの指定と
同様に色々な単位で行間を指定できます。%やemと
いった相対的な値を設定をしますが、他の単位も
つかうことができます。

サンプルコードではline-heightプロパティに
150%という値を設定しています。

    #container{
        background-color: greenyellow;
    }

    p{
        font-size:16px;
        line-height:150%;
    }

#container{

background-color: greenyellow;

}

font-size:16px;

line-height:150%;

}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div id="container">

<p>line-heightプロパティに値を設定すると<br>
    行間を設定することができます。たくさん<br>
    文字が書かれたブログのようなウェブサイトも<br>
    綺麗に、読みやすくなり、訪問者にとっても<br>
    良いサイトになります。 (line-height:150%)</p> 
    
</div>
    
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

<p>line-heightプロパティに値を設定すると<br>

行間を設定することができます。たくさん<br>

文字が書かれたブログのようなウェブサイトも<br>

綺麗に、読みやすくなり、訪問者にとっても<br>

良いサイトになります。 (line-height:150%)</p>

</div>

</body>

</html>

line-heightで指定した値を割り振る

サンプルコードではline-height:150%と指定しています。
文字の高さの上から下までが、line-height:100%です。

line-height:150%と指定した場合は
残りの50%は文字の高さの50%分の空きが文字の上下に
均等に割り当てられます。

行間のデフォルト値は？

行間のデフォルト値はブラウザによって違います。
フォントや文字サイズを指定してもブラウザごとに
行間が違います。

1行の見出しにもデフォルトの行間が適用されてしまい
ブラウザによってはすっきりしない隙間が出てきます。
これを防ぐには、CSSに「line-height:100%」を指定すると
防げます。