見出し

見出しは小さな章のタイトルとも言えます。Webサイトはどうしても縦長になってしまうので、文章の途中-もちろん意味のあるところ-で適時見出しを入れておくと格段と読みやすくなります。

見出しには「Hn」タグを使うのが基本です。ただ標準のままでは文字が大きく、太字になるだけなので、見出しとしてわかりやすくするため背景に色をつける、文字の色を変える、罫線を引くなどデザイン的な工夫が必要になります。

見出しの文字に色をつける

見出しの背景に色をつける

見出しの左端に罫線を入れる

見出しの横にアイコンをつける

見出しのデザインは多様な方法があるので、これが正解と言い切れないところが多くありますが、「見出しである」ということはしっかりとアピールする必要はあります。

なお、見出しとそれに続く文章との「余白」も非常に大切な要素になっていますから、デザインするときには「余白」も忘れずに設定します。

CSSでの設定方法
右サイドのソースを見てもらうのが一番です。色々と試してみてください。

著者は画像をよく使うのですが、その場合「background-position」や「line-height」プロパティを使って画像の位置合わせを行います。

＜裏技？＞
テキストの高さ（line-height）が決まっている場合は余白も含めて画像をその高さでつくると位置合わせが簡単になります。ただし背景色がついてしまうため、決まった背景色でしか使えませんが…