|
 行間をコントロールする
日本語フォントを使ったページはどうしても行間が詰まった感じがして、非常に読みにくい文章になってしまいます。そこで、スタイルシートを使って、行間をコントロールしましょう（IE3以上、NC4以上）。
<style type="text/css">
<!--
body { line-height: 120%; }
//-->
</style>
このタグをヘッドタグの中（<head>から</head>の中のどこか）に入れておけば、そのページの全ての文字に対し、通常より20%増しの行間を入れることが出来ます。但し、これだと、ネスケで見た場合、テーブル内の文に対してはなぜか適用されないことがあります。
そこで、テーブル内の文字にも反映させるために、<p>タグが付いている文字全てに反映させる方法があります。
<style type="text/css">
<!--
p { line-height: 120%; }
//-->
</style>
ただし、これだと、<p>タグのみに適用されることになるので、文字全てをPタグで囲っておく必要があます。ホームページエディタを使っていれば、大抵<p>タグが自動的につくのですが、タグを書いてホームページを作っている人は、<p>タグを省く場合も多く、ちょっと不便です。そこで、<p>タグが付いている文、及び、<p>タグがついていない文に反映させるために、上記二つのCSSをまとめて表記してしまいましょう。
<style type="text/css">
<!--
body { line-height: 120%; }
p { line-height: 120%; }
//-->
</style>
こんな感じになります。
しかし、油断してはいけません。ホームページエディタによっては、テーブル内の文字に<p>タグをつけないものが多く存在し、以上の記述でも、相変わらずテーブル内の文字にはスタイルシートが反映されない場合があります。そこで、そういう場合は、テーブルの<td>タグに注目して、
<style type="text/css">
<!--
body { line-height: 120%; }
p { line-height: 120%; }
td { line-height: 120%; }
//-->
</style>
こんな風にしてみると良いでしょう。
これで良いのですが、場合によっては特定のブラウザで見た場合に若干やっかいな問題が生じます。画像と文字を<BR>タグで改行した際に、文字と画像が重なったり、行間指定が反映されない場合があるのです。原因は分かりませんし、まだ私もいろいろ試している段階なので、他にどんなことが生じるのか分からない点も多いのですが、そのトラブルを避けたい場合は、<p>タグ内に画像と文字を一緒にいれないように気をつけてください。
リンクの下線を消す
文章を読みにくくする要因の一つに、リンクのアンダーラインと、そのカラーがあげられます。確かに、リンクは分かりやすくしておく必要があるのですが、それが仇となる場合もあるわけです。そこで、リンクのアンダーラインをコントロールしてみましょう（IE4、NC4以上）。
<style type="text/css">
<!--
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { color:red; text-decoration: underline; }
//-->
</style>
a:link と a:visited の2行で、「訪れたことのある・ない」リンクのアンダーラインを消すことが出来ます。 a:hover の行は、リンク部分にマウスが乗った場合にその文字の色を赤くして、アンダーラインをつけるように命令しています（ただし、一部のブラウザではこのa:hover 指定は無視されます）。色の指定は「red」部分を好きな色に変えて下さい。#FF0000のような16進法の既述でも大丈夫です。
部分的にリンクの色を変える
ホームページを作っていて、たまに「この部分だけ、リンク色を変えたい」ということがあると思います。そういうときは、外側にリンクタグをつけてから、中側にフォントタグで色を付けて下さい。この順番を間違えると、色が付きません。うまくいかない場合はソースを見て、<a>タグが、<font>タグよりも外側にあるか確認して下さい。
失敗例： <font color="white"><a href="***.htm">リンク</a></font>
成功例： <a href="***.htm"><font color="white">リンク</font></a>
[ 戻る ]
|
