読ませるレイアウト

テキスト中心のWebページでは、見出しと本文の差別化が重要なポイントです。デザイン性を重視して、見出しを画像で補うことも多いですが、スタイルを工夫すれば、画像を使わなくても見出しを装飾できます。

見出しを示すh1~6の各要素には、ブラウザの初期値のスタイルが適用されます。これらを上書きすると同時に、新しくborderプロパティやpaddingプ口パティなどを複数組み合わせると、グラフィカルな見出しへと変更できます。
単純に見出しの下に罫線を引くだけならば、 text-decorationプロパティの 「underline」指定ではなく、 border-bottomプロパティとpadding-bottomプ口パティを組み合わせたほうが表現の幅が広がります。この方法なら任意の線種やカラーを割り当てられるだけでなく、文字と罫線との距離など細かい部分で調整することができるためです。

見出し冒頭に「■」をつけるのであれば、本来ならcssの:before疑似要素とcontentプロパティを組み合わせます。しかし、:beforeに未対応のブラウザに対しても同様に見せたいなら、 「border-Ieft:1.2em solid 任意のカラー」を適用してもよいでしょう。完壁な正方形にはなりませんが、 XHTML上のテキストからは「■」はなくなります。いろいろと試して、自分なりのアイデアをストックとしておくと便利です。

本文を読みやすくするには、フォントサイズや行間隔の調整だけでなく、配置した画像にテキストを回り込ませる場合などのテキストと画像の間隔にも気を配ります。直接文字に関する指示ではないが、くっつきすぎても読みにくいし、広すぎては間延びしてしまいます。