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

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

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

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

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

見出し sample1

.sample1 {
border-bottom: 1px solid #42AFBC;
border-left: 10px solid #42AFBC;
color: #666666;
font-size: 16px;
padding:5px 0 5px 15px;
}

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

見出し sample2

.sample2 {
background: none repeat scroll 0 0 #F5F5F5;
border-left: 10px solid #42AFBC;
color: #666666;
font-size: 16px;
padding: 5px 0 5px 15px;
}

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

見出し sample3

.sample3 {
border-bottom: 2px dotted #42AFBC;
color: #666666;
font-size: 16px;
padding: 5px 0 5px 15px;
}

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

見出し sample4

.sample4 {
border-top: 1px solid #42AFBC;
border-right: 1px solid #42AFBC;
border-left: 7px solid #42AFBC;
border-bottom: 1px solid #42AFBC;
padding: 7px 5px 7px 5px;
}

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

簡単にCSSが作れるサイト

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

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

最後に見出しについて

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

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

この記事が気に入ったら
いいね または フォローしてね!

よろしければシェアお願いします!

この記事を書いた人

店舗で事業を行っている方やハンドメイドでオリジナル商品を作っている人にこそホームページが必要です。宣伝ツールとして上手く活用すればWEBからの集客で売上をあげることができるからです。

ブログ記事では、集客のテクニックや私が実際に使っているツールなどを含め紹介していきますので参考にしていただければ幸いです。

目次