文章を読みやすくするデザイン
文字の背景に色をつけたり行間隔を指定することで、読み手が読みやすいサイトにすることができます。
文字に背景色をつける
文字の背景色も、文字色の指定とおなじくHTMLでの指定ではなくCSSで指定するようにしたいですね。
コツとしては、サイト内で使うと思われる主な色を最初にCSSで指定するようにするとよいでしょう。
税収<span class="yellow">年間約２兆円</span>といわれていたたばこ税は今どうなっているでしょうか。
span.yellow {
background-color: #ffff00;
}
税収年間約２兆円といわれていたたばこ税は今どうなっているでしょうか。
行間隔を広くする
読みやすい文章にするために効果的なのが、行間隔の調整です。改行タグを毎回入力するのはちょっと汚くなってしまうので、CSSで指定してあげましょう。
<p class="lh-200">文章～</p>
p.lh-200 {
line-height: 200%;
}
こんな風に%の数値を大きくするほど行間が広くなります。このサイトの行間隔は200%にしてあります。この文章だけ300%にしてみました。
また値はpx（ピクセル）て指定することもできます。
※注意点として、文章の前後に予想外の空白行ができることがありますが、これにはわけがあります。またそれについては後述します。
文字に読み仮名をふる
これは正確にはXHTML1.1での機能になりますが、一応ご紹介だけしておきます。
読みにくい文字にふりがなをふるタグです。
庭に
<ruby>
<rb>薔薇</rb>
<rt>ばら</rt>
</ruby>
の花が咲いた。
庭に
ブラウザの環境によっては、薔薇（ばら）のようになっているかもしれません。
comment closed