owned mediaウェブ制作に役立つコンテンツを発信中!

CSSで作る見出しデザイン

最終更新日: Update!!
前回はCSSで吹き出し風のデザインを作成しましたが、引き続き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;
}
   
CSSで作る見出しデザイン
 
// 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;
}
   
CSSで作る見出しデザイン
 
// 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;
}
   
ボックスタイプの見出しデザイン
続いて、両端に余白が設定され、周囲が囲まれたボックスタイプの見出しデザインを紹介します。  
CSSで作る見出しデザイン
 
// 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;
}
   
CSSで作る見出しデザイン
 
// 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));
}
   
CSSで作る見出しデザイン
 
// 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;
}
   
リストタイプの見出しデザイン
最後に、見出しの頭にポイントとなるデザインがついたリストタイプの見出しデザインを紹介します。  
CSSで作る見出しデザイン
 
// 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 ;
}
   
CSSで作る見出しデザイン
 
// 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;
}
 
CSSで作る見出しデザイン
 
// 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を使ったデザインを積極的に取り入れてみてはいかがでしょうか。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram