トップぺーじ    目 次    前のページ    次のページ


スタイルシートを体験しよう

行間隔の設定


 私が、スタイルシートでHPを作ろうと思ったのも、この「行間隔の設定」がスタイルシートでできることを知ったからです。パソコンに無料でくっついてきたHTMLエディタで作ろうとしたら、「あれ?行間隔の設定はどうやってするの?」、「えーい、さっぱりわからん」と思ってるときにふと跳びこんできた雑誌の文字。「スタイルシートで行間隔や文字間隔の設定ができる」「これだー!」と思い、さっそく本屋へ行き、スタイルシートの参考書を買いました。(でもあまりなくて、あちこちの本屋を探して回り、見つけるのに1ケ月ぐらいかかった。)

 よく、文章が主体の日記のページなんかで、行間隔がなく、画面一面に文字がびっしり埋まってて読むのに苦労した、なんて経験を一度はしたことがあると思います。スタイルシートの手始めとして、行間隔の設定方法から説明します。

line-height
書式 line-height : 値
<length> , <number> , <%>
対象タグ すべてのタグ
継承 継承する

 いきなり、表が出てきたので少し面食らったかも知れません。最初はこの表はあまり気にしないで下さい。最初は下に示す例を参考にしたほうがいいと思います。やがて慣れきて、自分でスタイルシートを書くようになったときにこの表が役立つと思います。とはいうものの簡単に説明します。

 この説明を読んで、「ややこし〜〜」と思うかも知れません。とにかく実際にスタイルシートを体験しましょう。何度も言うようですが「習うより慣れろ」です。

<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" Content="text/html;charset=Shift_JIS">

<STYLE Type="text/css">
 P { font-size : 12pt }
 P.gyo1 { line-height : 15Pt }
 P.gyo2 { line-height : 200% }
 P.gyo3 { line-height : 4cm }
</STYLE>

</HEAD>

<BODY>
 <P Class="gyo1">
 黄葉のシーズンですね。紅葉狩りに行こう!赤、黄、青、緑。一年のうちで、色が一番あふれる季節です。自然の色ってきれいだなぁ。この季節、少し寂しくなった気分を、最後の力を振り絞って勇気付けてくれてるような気がします。<BR>
<BR><BR>
 <P Class="gyo2">
 これから、雪が降って真っ白の景色もいいなぁ。汚れたものをすべてきれいなもので覆い隠してくれる。それになぜか静かだし。「し〜〜ん」という表現がぴったり。もし、雪が赤い色をしていたら・・・。こわい。<BR>
<BR><BR>
 <P Class="gyo3">
 今、住んでる所は、黄葉もなければ雪も降らない。これってもしかしてすごく寂しいことかも。季節の移り変わりに応じて景色が変わる、そういう所に住みたいなぁ。自然の景色って、心の豊かさにはなくてはならないことかも。
</BODY>
</HTML>

 下のように表示されます。

 黄葉のシーズンですね。紅葉狩りに行こう!赤、黄、青、緑。一年のうちで、色が一番あふれる季節です。自然の色ってきれいだなぁ。この季節、少し寂しくなった気分を、最後の力を振り絞って勇気付けてくれてるような気がします。


 これから、雪が降って真っ白の景色もいいなぁ。汚れたものをすべてきれいなもので覆い隠してくれる。それになぜか静かだし。「し〜〜ん」という表現がぴったり。もし、雪が赤い色をしていたら・・・。こわい。


 今、住んでる所は、黄葉もなければ雪も降らない。これってもしかしてすごく寂しいことかも。季節の移り変わりに応じて景色が変わる、そういう所に住みたいなぁ。自然の景色って、心の豊かさにはなくてはならないことかも。

 スタイルシートの値を色々変えて遊んでみてください。
 どうですか?ここでいう行間隔の設定というのは、行と行の隙間の大きさを指定しているのではなく、行の始まりから次の行の始まりまでの行ピッチを指定していることに気付いたでしょうか?P.gyo1 { line-height : 15Pt }P.gyo1 { line-height : 0Pt }に値を変えてみてください。文字が重なって表示されるはずです。

IE4の設定

 HPを尋ね歩いてると、文章がメインのページなんかで、画面がびっしり文字だらけ。読むのに苦労した。コピペで"Word"なんかに貼りつけて読んだ、という経験をしたことがあると思います。そんな時に便利なのが、スタイルシートを活用したIE4の設定です。
 次のルールが1行だけのスタイルファイルを作ってください。(ファイルの拡張子を".css"にするのを忘れずに。)

BODY ,TD { line-height : 150% }


 次に、IE4を起動して、「ツールメニュー」から、
「表示」→「インターネットオプション」をクリック。
「全般」タブを選択して「ユーザ補助」をクリック。
「自分のスタイルシートでドキュメントの書式を設定する」のチェックボックスをオンにする。
さっき作ったスタイルシートを「参照」する。

 これで、今まで行間隔がびっしり詰まったHPも適度な行間隔で表示され、らくらく読めるようになるはずです♪


 これで、この節の説明は終わりです。この節で言いたかったことは、

1.行間隔の設定には、line-heightを使おう!

 面白くなってきたかな?




トップぺーじ    目 次    前のページ    次のページ