行間と左右余白を指定するだけで…


 行間と余白と<H1>設定だけで、だいぶ読みやすそうになったのでは? 以下、雰囲気を見るための文例、読まなくても可。


 HTMLを提供するサイトさんはたくさんあるのですが、「シャレて見える」という理由で、字を極端に小さくしてあるところがけっこう多いです。私も、このサイトを最初に作ったときはかなり小さくしてました。
 現在は、本文にあたる<p>のfont-sizeは、このページは100%、雛形ページのサンプルは96%。かなり大きめかと思います。理由は、あまり字が小さいと、やっぱり目が疲れるというのが一つ。「誰でもアクセスする、誰がアクセスするかわからない」インターネットの本質、とくに弱視の方等への対応等を考えると、読みやすさよりデザイン性を優先するというのは、邪道じゃないかな、という、想いもちょっとはあったりします。(このサイトはあくまで「自分の文章を他人に読んでもらうために」サイトを作っている方を対象にしてますので…)
 ただし、<H1>(大見出し)は、元設定よりだいぶ小さく設定してあります。元設定というのが、IEで「文字のサイズ=中」の場合、H1は32px・Bold相当ですので……、ちとデカすぎ。
 そのほかは、Hover指定。Hoverって耳慣れない言葉ですが、リンクにカーソルが触れたとき、色や下線が変わるという指定です。

[2007.09ファイルをコンパクトにするため、head領域内の注釈をはずしました。]
body{line-height: 1.7;}
(line-height=行間。文字の何倍)
div.mainarea{margin-left: 16%;
margin-right: 16%;}

(div.main=<div class="main">〜</div>の設定
 margin-left=余白左
 margin-right=余白右)
h1{font-size:125%;}
(h1=大見出しの設定)
a:hover{COLOR: #FF0000;}
(a:hover=カーソルが触れた時の設定
COLOR=文字色)
<q>はあまり使わないタグと思われるので、写さなくてもかまいません。