line-height は、行の高さを指定するプロパティです。
textarea要素にこのスタイルを設定すると、テキストエリア内の行間を適度に空けることができます。
textarea {
width: 300px;
height: 7em;
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">
<!--
textarea {
width: 300px;
height: 7em;
line-height: 150%;
}
-->
</style>
</head>
<body>
<form method="POST" action="example.cgi">
<p><textarea name="demo" cols="50" rows="7">
行間の指定
行間の指定
行間の指定
</textarea></p>
</form>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません
