cssでの見出しデザイン

cssでの見出しデザイン

cssだけでデザインの変更が可能なので、画像を作成しなくても、後から変更可能です。
疑似要素を組み合わせると色々な表現が可能になるので、とても便利です。

吹き出し風

■css
h2 {
position: relative;
padding: 0.6em;
background: #e0edff;
}
h2:before {
content: ”;
position: absolute;
top: 100%;
left: 20px;
border: 10px solid transparent;
border-top: 10px solid #CCC;
width: 0;
height: 0;
}

漫画の台詞でお馴染みの吹き出しですが、フォーマルでありながら優しい印象を持たせたデザインになります。

リボン風

h2{
position: relative;
background: #EA5A28;
color: #FFFFFF;
padding: 2px;
}
h2::before {
content: ”;
position: absolute;
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px #ccc;
}

左側だけ折り目がついたようなリボンです。奥行きを表現することができます。

[]風

h2 {
position: relative;
line-height: 1.4;
padding:5px 0 0 5px 10px;
display: inline-block;
top:0;
}

h2:before,h1:after{
content:”;
position: absolute;
top: 0;
width: 10px;
height: 100%;
display: inline-block;
}
h2:before{
border-left: solid 1px #000000;
border-top: solid 1px #000000;
border-bottom: solid 1px #000000;
left: 0;
}
h2:after{
content: ”;
border-top: solid 1px #000000;
border-right: solid 1px #000000;
border-bottom: solid 1px #000000;
right: 0;
}

シンプルですが、本のタイトルの様なデザインになり、ブログなどに最適ですね。