Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>行の高さを設定しよう!

行の高さを設定しよう!(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ページを見てくれた人の目が疲れにくくなり、見栄えも良くなります!

関連情報ページ

CSS一覧プロパティ辞典

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system