前回はCSSで吹き出し風のデザインを作成しましたが、引き続きCSSを使ったデザインテクニックを紹介したいと思います。CSSの最大限に活用することで、画像データに頼らずカスタマイズ性の高いデザインを作成することができます。   今回はサイトを作る中でも重要なパーツの一つでもあります、見出しのデザインをCSSで作成していきます。  

帯タイプの見出しデザイン

まずはサイト全幅に設定された帯タイプの見出しデザインをいくつか紹介します。    

// HTML
<div class="heading_01">CSSで作る見出しデザイン
</div>

// CSS
.heading_01 {
 position: relative;
 color: #fff;
 background-color: #4067DB;
 font-size: 120%;
 font-weight: bold;
 margin: 0 auto 30px auto ;
 padding: 10px;
 width: 100% ;
 box-shadow: 0 1px 2px #999;
 -moz-box-shadow: 0 1px 3px #999;
 -webkit-box-shadow: 0 1px 3px #999;
 -o-box-shadow: 0 1px 3px #999;
 -ms-box-shadow: 0 1px 3px #999;
}
.heading_01:before,
.heading_01:after {
 content: "";
 position:absolute;
 top: 100%;
 height: 0;
 width: 0;
 border: 10px solid transparent;
 border-top: 10px solid #1B2C5D;
}
.heading_01:before {
 right: 0;
 border-left: 10px #1B2C5D;
}
.heading_01:after {
 left: 0;
 border-right: 10px #1B2C5D;
}

     

// HTML
<div class="heading_02">CSSで作る見出しデザイン
</div>

// CSS
.heading_02 {
 position: relative ;
 margin: 0 auto 30px auto ;
 padding: 10px ;
 width: 100% ;
 color: #44599B ;
 font-size: 120%;
 font-weight: bold;
 border-top:1px dashed #666;
 border-bottom:1px dashed #666;
 background:#ddd;
 box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
}

     

// HTML
<div class="heading_03">CSSで作る見出しデザイン
</div>

// CSS
.heading_blog_03 {
 position:relative;
 margin:0 auto ;
 padding: 10px ;
 width: 95% ;
 color: #fff;
 font-size: 120%;
 background-color:#A6DBE9;
 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3),20px 0 0 0 #A6DBE9,-20px 0 0 0 #A6DBE9;
}

   

ボックスタイプの見出しデザイン

続いて、両端に余白が設定され、周囲が囲まれたボックスタイプの見出しデザインを紹介します。    

// HTML
<div class="heading_04">CSSで作る見出しデザイン
</div>

//  CSS
.heading_04 {
 margin: 0 0 30px 0 ;
 padding: 10px ;
 width: 85% ;
 border: 2px solid #E66565;
 border-left: 20px double #E66565 ;
 border-right: 10px solid #E66565 ;
 font-size: 120%;
 font-weight: bold;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

     

// HTML
<div class="heading_05">CSSで作る見出しデザイン
</div>

// CSS
.heading_05 {
 margin: 0 auto 30px 0 ;
 padding: 10px ;
 width: 90% ;
 color: #fff ;
 font-size: 120%;
 font-weight: bold;
 background-color:#F5B6A0;
 border-top:#FED7CB solid 1px;
 border-right:#D19988 solid 1px;
 border-bottom:#D19988 solid 1px;
 border-left:#FED7CB solid 1px;
 box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset;
 background-image: -moz-linear-gradient(
 top,
 #FFD8CC 0%,
 #ED8D89 70%,
 #C05D51);
 background-image: -webkit-gradient(
 linear,
 left top,left bottom,
 from(#FFD8CC),
 color-stop(0.70, #ED8D89),
 to(#C05D51));
}

     

// HTML
<div class="heading_06">CSSで作る見出しデザイン
</div>

//CSS
.heading_blog_06 {
 margin: 0 auto 30px 0 ;
 padding: 10px 10px 10px 40px ;
 width: 85% ;
 height: 44px ;
 font-size: 120%;
 font-weight: bold;
 background-color: #F8AF6F;
 border-radius: 24px ;
 position: relative ;
}
.heading_blog_06:before {
 content: "";
 position: absolute;
 background-color: #FFE2B8;
 left:12px ;
 top: 12px ;
 height: 20px;
 width: 20px;
 border-radius: 20px;
 box-shadow: 1px 1px 1px #999 inset;
}

   

リストタイプの見出しデザイン

最後に、見出しの頭にポイントとなるデザインがついたリストタイプの見出しデザインを紹介します。    

// HTML
<div class="heading_07">CSSで作る見出しデザイン
</div>

// CSS
.heading_07 {
 margin: 0 auto 30px 0 ;
 padding: 10px 10px 10px 30px ;
 width: 85% ;
 font-size: 120%;
 font-weight: bold;
 border-left: solid 5px #5FD89C ;
 border-bottom: dashed 1px #aaa ;
}

     

// HTML
<div class="heading_08">CSSで作る見出しデザイン
</div>

// CSS
.heading_08 {
 margin: 0 auto 30px 0 ;
 padding: 10px 10px 10px 40px ;
 position:relative;
 width: 85% ;
 color: #357c31 ;
 font-size: 120%;
 font-weight: bold;
 border-bottom:1px dotted #ccc;
}
.heading_08:before {
 content:'';
 border-radius:30px;
 height:12px;
 width:12px;
 display:block;
 position:absolute;
 top:14px;
 left:7px;
 background-color: #8DCA8A;
}
.heading_08:after {
 content:'';
 border-radius:30px;
 height:15px;
 width:15px;
 display:block;
 position:absolute;
 top:7px;
 left:2px;
 background-color: #ADF9AB;
 z-index: 1;
}

   

// HTML
<div class="heading_09">CSSで作る見出しデザイン
</div>

// CSS
.heading_09 {
 width: 85% ;
 font-size: 120%;
 font-weight: bold;
 margin: 0 auto 30px 0 ;
 padding: 10px 10px 10px 40px ;
 position:relative;
 border-bottom:1px solid #C5E37E;
}
.heading_09:before {
 content: "";
 position: absolute;
 background: #C5E37E;
 top: 0;
 left: 10px;
 height: 12px;
 width: 12px;
 transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}
.heading_09:after {
 content: "";
 position: absolute;
 background:#8ABE76;
 top: 20px;
 left: 0;
 height: 8px;
 width: 8px;
 transform: rotate(15deg);
 -moz-transform: rotate(15deg);
 -webkit-transform: rotate(15deg);
 -o-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
}

  CSSだけでこんなにもいろんなデザインをつくることが出来ます。そして画像データを使用しない分、サイトの読み込みスピードもアップします。 ぜひ、CSSを使ったデザインを積極的に取り入れてみてはいかがでしょうか。