ホーム>コース別ガイド一覧>行の高さを設定しよう!
行の高さを設定しよう!(line-height プロパティ) |
|
使用プロパティ セレクタ { line-height: 行の高さ; }
CSS一覧プロパティ辞典 … line-height プロパティ
line-height プロパティを使うと文字列の行の高さを指定できます。値には、「1.5」のような数値、「1.5em」のような長さ、「150%」のようなパーセンテージを指定できます。これらの行の高さはすべて1.5倍になります。そして「nomal」を指定した場合は、通常の行の高さになります。
読みやすい行の高さは?!
なぜ行の高さを指定するのか。それはユーザーの目をなるべく疲れさせないようにするためです。パソコンのディスプレイは、雑誌などと違い光を発して色を表現しているので、どうしても目に負担がかかり、ユーザーに目に疲れやストレスすら与えかねません!では次の例を見てみましょう。
なぜ行の高さを指定するのか。それはユーザーの目をなるべく疲れさせないようにするためです。パソコンのディスプレイは、雑誌などと違い光を発して色を表現しているので、どうしても目に負担がかかり、ユーザーに目に疲れやストレスすら与えかねません! |
この例は、行の高さを指定していない場合です。読みづらいですよね?これが長文ともなれば、何回か間違って同じ行を読んでしまいそうです。
ちなみに、このサイトで使われているほとんどは「1.7em」です。これぐらいがちょうどいい行の高さだと思います。そして他の大抵のWebサイトでは、「1.5em」から「2em」までの間で行の高さを指定したいる方がほとんどのようです。
使用例
では、段落である p 要素に line-height プロパティで行の高さを指定しましょう!値は「1.7em」とします。
記述例
<html>
<head> <title>一人暮らしの前向き料理</title> <style type="text/css">
span { font-weight: bold;}
p { line-height: 1.7em; }
p .copy { font-family: "MS P明朝", serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<span>ワンポイント</span>を紹介します!</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html> |
|
使用例の表示
[line-heightプロパティ適応前のブラウザでの表示例]
一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します!
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
|
[line-heightプロパティ適応後のブラウザでの表示例]
一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します!
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
「料理を少しおいしくするためのワンポイントを紹介します!」の行の高さが変わりましたね?これで段落に長文を入力したとしても、Webページを見てくれた人の目が疲れにくくなり、見栄えも良くなります!