見出しのデザインを css の疑似要素と Web アイコンフォントで装飾して見出しを見出しらしく。

見出し、h1～h6 な html タグ。

文章章題に使うやつです。

見出しのデザインをちゃんとしてあげることでぱっと見、わかりやすくなるはず。

こだわってるサイトも多いのでちょっと装飾してみました。

装飾した見出しがこちら

h1～h6 まで。

見出しをデザインするためにやったこと

Web アイコンフォントを導入（元々導入してある。画像でも可。
css でスタイリング（疑似要素 :before と border

というこれだけ簡単。

使っている Webフォントアイコンはこちら

We Love Icon Fonts

“Font Awesome” というやつです、では css へ。

css で見出しをスタイリングしていく

順を追ってスタイリングを。

当サンプルではこちら ↓

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<h1>見出し1</h1>
<h2>見出し2見出し2</h2>
<h3>見出し3見出し3見出し3</h3>
<h4>見出し4見出し4見出し4見出し4</h4>
<h5>見出し5見出し5見出し5見出し5見出し5</h5>
<h6>見出し6見出し6見出し6見出し6見出し6見出し6</h6>

</body>
</html>

簡単な html にスタイルする、ということで進めます。

Web フォントの @import を css に記述

例としてぼくが使っているウェブフォントアイコンを使います、適宜好きなウェブフォントアイコンに置き換えましょう。

@charset "UTF-8";

/* fontawesome web font */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

これでウェブフォントを使う準備ができました。

疑似要素 :before を使って各見出しタグの前にウェブフォントアイコンを差し込む

:before は IE8未満対応してませんけどもまぁそこは置いといて。

:before の説明は Moziila のドキュメントあたりを見ればいいと思うよ。

@charset "UTF-8";

/* fontawesome web font */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
h1:before,
h2:before,
h3:before,
h4:before,
h5:before,
h6:before {
	color: #E44D26; /* アイコンの色、適宜変更のこと */
	content: "\f00c";
	font-family: "FontAwesome",sans-serif;
	margin-right: 5px; /* アイコン右マージン */
}

これでもう見出しの前にアイコンが。

見出し要素にボーダーを付ける

このままではちょっと合わなかったので淡いボーダーを付けました。

見出し要素順に太さを変え、合わせてパディングを指定してキツキツな感じをなくす。

@charset "UTF-8";

/* fontawesome web font */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
h1:before,
h2:before,
h3:before,
h4:before,
h5:before,
h6:before {
	color: #E44D26; /* アイコンの色、適宜変更のこと */
	content: "\f00c";
	font-family: "FontAwesome",sans-serif;
	margin-right: 5px; /* アイコン右マージン */
}

/* 見出し下パディング */
h1, h2, h3, h4, h5, h6 { padding-bottom: 15px }

/* 見出し下ボーダー */
h1 { border-bottom: 10px solid #DDDDDD; }
h2 { border-bottom: 8px solid #DDDDDD; }
h3 { border-bottom: 6px solid #DDDDDD; }
h4 { border-bottom: 4px solid #DDDDDD; }
h5 { border-bottom: 2px solid #DDDDDD; }
h6 { border-bottom: 1px solid #DDDDDD; }

これでぱっと見じゃまにならない程度に目立つ見出しができたと思います。

見出しのデザインサンプルな html はこちら