CSSで出来る見出しデザインテンプレート

h1～h6までの見出しのデザインを画像を使わないでCSSで考えている方へ。
コードのバリエーションをメモしていたので見出しのデザインをご紹介していきます。

※　Firefoxのアドオン　Firebugを利用すると分かりやすいのでぜひ活用してみてください。

見出し sample1

シンプルな見出しです。
私がシンプルなデザインが好きということもあり、当サイトでもこのタイプを利用しています。
下に区切り線がつくので見出しが目立ちます。

見出し sample2

見出し領域に背景色を設定することで見出し部分を分かりやすくしているデザインです。
こういったデザインの見出しは様々なサイトでよく活用されています。
サイズ・位置・色を新しく設定することで雰囲気はだいぶ変わってきます。

見出し sample3

見出しに点線を利用することでやさしいイメージになります。すっきりしたデザインが好みの方におすすめ。
点線はサイドバーでタイトルを区切る際に良く使われている気がします。

見出し sample4

線で囲むことによりとてもはっきりした見出しになります。

簡単にCSSが作れるサイト

こちらは、色を選ぶだけでHTML・CSSを作成してくれるWebツールです。
作業に時間をかけたくない方や素早く見出しを作りたいときにおすすめ。

スタイルシート見出しメーカー

最後に見出しについて

上記についてのcssは、コピペ・アレンジしてご活用になっていただいてかまいません。
また新しいデザインが出来たときには随時追加していく予定ですので興味がありましたらぜひまた見に来てください。