見出し


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

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

sample_401

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

濃いレビューを書くコツ

sample_402

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

濃いレビューを書くコツ

sample_403

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

濃いレビューを書くコツ

sample_404

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

濃いレビューを書くコツ

解説

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>