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

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Yahoo!カテゴリー登録サイト

ページ上部へ戻る