[新着] Webテンプレートを仮オープンしました
line-height は、行の高さを指定するプロパティです。
このスタイルを設定すると、行間を適度に空けることができます。
p {
line-height: 1.5em;
}
| line-height | 行の高さを指定します |
|---|
行の高さは、数値+単位（pt、em、他）、数値（単位なし）、%（割合）などで指定します。
※デフォルトは normal（自動）です。（例：line-height: normal）
【行間】
行の高さから文字サイズを引いた残りが、行間の大きさになります。
■数値+単位で指定
line-height: 1.5em; … 文字サイズ×1.5倍の高さを指定（1em = 文字の高さ）
■数値で指定
line-height: 1.5; … 文字サイズ×1.5倍の高さを指定（1 = 文字の高さ）
■パーセントで指定
line-height: 150%; … 文字サイズ×1.5倍の高さを指定（100% = 文字の高さ）
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example { line-height: 200%; }
-->
</style>
</head>
<body>
<p>
行の高さを指定して、<br>
行間を空けてみます。<br>
上の段落は指定なしで、<br>
下の段落は1文字分の行間を空けています。<br>
</p>
<p id="example">
行の高さを指定して、<br>
行間を空けてみます。<br>
上の段落は指定なしで、<br>
下の段落は1文字分の行間を空けています。<br>
</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
行の高さを指定して、
行間を空けてみます。
上の段落は指定なしで、
下の段落は1文字分の行間を空けています。
行の高さを指定して、
行間を空けてみます。
上の段落は指定なしで、
下の段落は1文字分の行間を空けています。
