HTML の見出しデザイン

CSSを使用して見出しを装飾するときに何かと悩みますが簡単なデザインでも装飾があるほうが見栄えが格段によくなります。
シンプルな装飾をいくつか考えたのでメモしておく。

文字色を付ける

h2 {
  color: brown;
}

文字色を付けました。サイトの背景カラーと逆の明度にすると目立ちます。

背景色を付ける

h2 {
  color: brown;
  background-color: wheat;
}

見出しの背景に色を付けました。サイトの背景カラーと近い色にすることで見出しであることをわかりやすくします。

ボーダーを付ける

h2 {
  color: brown;
  background-color: wheat;
  border-bottom: 4px solid brown;
  border-left: 4px solid brown;
}

囲むのではなく部分的にボーダーを付けるとおしゃれな感じになります。

影を付ける

h2 {
  color: brown;
  background-color: wheat;
  border-bottom: 4px solid brown;
  border-left: 4px solid brown;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

濃くしすぎると浮きあがっているように見えなくなるので注意です。

あまりごてごて装飾しすぎてもサイトのデザインによっては浮いてしまうのでサイト全体の雰囲気に合わせて程よい装飾をしましょう。