自分でするSEO対策・検索エンジン最適化対策！

スタイルシートの匠技

文章の行間を好みに合わせて調整する

ふと、段落の行間を広げたり縮めたいと思ったりした事はないでしょうか。 これはHTMLの属性や要素などでは指定する事はできませんので、スタイルシートに頼る事になります。 文書の行間を制御するには「line-height」を使います。 「height」は「ヘイト」ではなく「ハイト」です。 それでは、あまり堅苦しい文章だと見ているだけで疲れるので、例文を少し変えてみましょう。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title>Fiber Optics</title>
   <style type="text/css">
      *.ls_normal { line-height: 150%; }
      *.ls_double { line-height: 200%; }
   </style>
</head>
<body>
   <h1>名言集</h1>
   <p class="ls_normal">■この道をゆけば どうなるものか 危ぶむなかれ 危ぶめば道はなし
   踏み出せばその一足が道となり その一足が道となる 迷わず行けよ 行けばわかるさ</p>
   <p class="ls_double">■馬鹿になれ とことん馬鹿になれ 恥をかけ とことん恥をかけ
   かいてかいて恥かいて 裸になったら見えてくる 本当の自分が見えてくる
   本当の自分も笑ってた それくらい 馬鹿になれ</p>
</body>
</html>
名言集
■この道をゆけば どうなるものか 危ぶむなかれ 危ぶめば道はなし 踏み出せばその一足が道となり その一足が道となる 迷わず行けよ 行けばわかるさ
■馬鹿になれ とことん馬鹿になれ 恥をかけ とことん恥をかけ かいてかいて恥かいて 裸になったら見えてくる 本当の自分が見えてくる 本当の自分も笑ってた それくらい 馬鹿になれ

違いが分かりましたか？通常は「line-height」の属性値を150%程度にしておくと見やすいでしょう。 「詩」などをメインに扱っているサイト様の場合はこの値を大きく指定したりすると良いかと思います。 また「1.5em」でも同様の意味になります。 「line-height」はスタイルシートとしては比較的良く使う分類に入りますが、 ブラウザによっては定義が異なるため、各種要素ごとにチェックが必要です。 主にpやdiv要素内で使う事が多いので慣れれば非常に便利な属性です。

通常、スタイルシートで単位を省略すると、ピクセルになりますが、 この「line-height」の場合には「em」が省略されている事になるので注意して下さい。