5.5.コンテンツ部分を読みやすく

そのままだといまいち読みにくいコンテンツの部分をCSSで読みやすくしましょう。まずはウィンドウいっぱいに文章が広がっているのをどうにかします。ID contentsにwidthプロパティを指定して幅を制限してしまいます。

#contents{
width:500px;
}

右端が500pxの幅で自動的に折り返される
図5.22. コンテンツ全体の幅を500pxに指定

次に見出しを装飾します。font-sizeを110%に指定。border-bottomプロパティで下線を引きます。さらにpadding-leftで文字を左側の余白を調節。最後にmargin-borromで見出しと本文の間を少し空けて見出しは完成。

#contents{
width:500px;
}
#contents h2{
font-size:110%;
border-bottom:solid 2px #6699FF;
padding-left:5px;
margin-bottom:5px;
}

見出しの文字が若干小さくなり下線が引かれる
図5.23. 見出し部分(日付)を装飾

最後にp要素(本文)を読みやすくします。まずは行間の調節。line-heightプロパティで指定します。実数や%などが値として指定できます。ただし負の値は使えません。ここでは1.6としました。文章の行間は狭すぎても広すぎても読みにくくなるので注意しましょう。続いてtext-indentプロパティで段落の始めを字下げします。これによりp要素の中身(文章)を書くとき、全角スペースを入れなくても自動的に一字開けて文章が始まります。さらにtext-alignプロパティにjustifyの値を指定して、文章が両端揃えになるようにします。ただ、この値は日本語の文章ではきちんと動作しないブラウザが多いです。

#contents{
width:500px;
}
#contents h2{
font-size:110%;
border-bottom:solid 2px #6699FF;
padding-left:5px;
margin-bottom:5px;
}
#contents p{
line-height:1.6;
text-indent:1em;
text-align:justify;
}

CSSで文章の表示を制御
図5.24. p要素をCSSで読みやすく

これでコンテンツ部分は完成です。Webページのコンテンツ部分は見た目よりも読みやすさを重視してデザインするよう心がけましょう。

サンプル5.5：sample5_5.zip