行間の設定
line-heightプロパティは、行の高さを指定します。
単位をつけないで数値だけを指定した場合は、フォントサイズにその値を掛けた高さに設定されます。％による指定も、フォントサイズに対する割合になります。マイナスの値は指定できないことになっていますので、注意してください。サイズ：normal、数値、単位付きの数値、％
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>行間を設定する</title>
<style type="text/css">
<!--
#sample1 { line-height: normal }
#sample2 { line-height: 1.5 }
#sample3 { line-height: 180% }
em {
color: #ff3300;
background-color: #ffffff;
font-style: normal
}
-->
</style>
</head>
<body>
<h1>行間の設定</h1>
<h2>line-height: <em>normal</em></h2>
<p id="sample1">
行の高さは文章の読みやすさに影響します。狭すぎても広すぎても読みにくくなります。行数が少ない場合は行間が少なくても比較的読みやすく、1行の文字数が多い場合は行間が狭いとかなり読みにくくなります。
</p>
<h2>line-height: <em>1.5</em></h2>
<p id="sample2">
行の高さは文章の読みやすさに影響します。狭すぎても広すぎても読みにくくなります。行数が少ない場合は行間が少なくても比較的読みやすく、1行の文字数が多い場合は行間が狭いとかなり読みにくくなります。
</p>
<h2>line-height: <em>180%</em></h2>
<p id="sample3">
行の高さは文章の読みやすさに影響します。狭すぎても広すぎても読みにくくなります。行数が少ない場合は行間が少なくても比較的読みやすく、1行の文字数が多い場合は行間が狭いとかなり読みにくくなります。
</p>
</body>
</html>
