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

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

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

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

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

 

装飾した見出しがこちら

h1~h6 まで。

みだし6連
みだし6連

 

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

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

というこれだけ簡単。

 

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

“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; /* アイコン右マージン */
}

 

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

headline_css_fontawesome_1
こんな。

 

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

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

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

@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 はこちら

 

ホホまとめ

「Web フォントは読み込み遅くなるから使いたくないわー」

とずっと思っていました、今でも思っています。

とともに、すこぶる便利だということを使い込んでから実感しているのも事実。

食わず嫌いをせずに時と場合によって取捨選択すればいいってことを再確認しました。


投稿日

カテゴリー:

投稿者:

コメント

“見出しのデザインを css の疑似要素と Web アイコンフォントで装飾して見出しを見出しらしく。” への3件のフィードバック

  1. web_shufu Avatar

    どうしても遅くなりますよね。便利なんですけど

  2. kana-kana_ceo Avatar

    タイトルそのまんまの話です。

  3. beatride Avatar

    出来たー!!!!

コメント、してみません?

%d人のブロガーが「いいね」をつけました。