【簡単に作れる】ブログで使える見出しデザイン【CSS】

今回は、ブログで使える見出しデザインを紹介していきます。

僕自身、見出しで結構インパクトが変わって「読みやすさ」や「見やすさ」が変わると思っています。

h1タグ〜h6タグにまで使えるので、自分がいいなと思ったものがあったら、実装してみてください。

それでは、さっそくいきましょう！

スポンサーリンク

ブログで使える見出しデザイン

下線

h1 {
/*太さ カラー*/
border-bottom: solid 4px #000;
}

横に太線

h1 {
background:#f7f7f7;
color: #000;
border-left: solid 5px #1e73be;
padding: 0.3em 0.5em;
}

吹き出し風

h1 {
background: #1e73be;
position: relative;
padding: 0.5em;
}

h1:after {
position: absolute;
top: 100%;
left: 30px;
width: 0;
height: 0;
content: '';
border: 17px solid transparent;
border-top: 17px solid #1e73be;
}

切り込み

h1 {
  background: #63acb7;
   font-size: 25px;
   color: #000;
   position: relative;
   padding: 7px 7px 7px 47px;
  line-height: 1.8;
   margin-left: -37px;
   z-index:-1;
 }
 
 h1:before {
   position: absolute;
   content: '';
   left: -2px;
   top: -2px;
   border: none;
   border-left: solid 40px #fff;
   border-bottom: solid 79px transparent;
   z-index:-2
 }