<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>見出し装飾</title>
<style>
h1[class]{
font-size:1.4rem;
padding: 0.5em 0em 0.5em 3em;
}
.title01{
position: relative; /*次の疑似要素::beforeの基点とする*/
background: #676767;
color:#FFF;
text-shadow: 1px 1px 10px #C0C0C0;
border-radius:5px; /*周囲の角を取る*/
}
.title01::before{
content: ""; /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
position: absolute; /*基点からの絶対位置で場所指定*/
top: 0.7em; /*●の起点を上のpadding(0.5em)分ずらす*/
left: 1em; /*●の起点を一文字分ずらす*/
height: 1.2em;
width:1.2em; /*一文字より少し大きめの■を作る*/
background: #FFF;
color: #fff;
border-radius: 50%; /*■の角を取る*/
box-shadow: 1px 1px 1px #777 inset;
}
.title02{
position: relative; /*次の疑似要素::afterの基点とする*/
background: #676767;
color: #fff;
}
.title02::after{
content: ""; /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
position: absolute; /*基点からの絶対位置で場所指定*/
bottom: 0; /*薄い四角枠の起点を下にずらす*/
left: 1em; /*薄い四角枠の起点を右にずらす*/
width: 60%; /*薄い四角枠の幅*/
height: 2em; /*薄い四角枠の高さ*/
background: rgba(192,192,192,0.4); /*薄い四角枠の色、透明設定を行っている*/
-webkit-transform: rotate(-1.5deg); /*safari対応*/
transform: rotate(-1.5deg); /*薄い四角枠を少し傾ける*/
}
.title03{
position: relative; /*次の疑似要素::before,afterの基点とする*/
background: #fff;
border-bottom: 3px solid #000;
}
.title03::before{ /*前の少し濃い四角*/
content: ""; /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
position: absolute; /*基点からの絶対位置で場所指定*/
top: 1em;
left: 1em;
height: 0.5em;
width: 0.5em;
-webkit-transform: rotate(15deg); /*safari対応*/
transform: rotate(15deg); /*15度回転*/
background:#040404;
}
.title03::after{ /*後の薄い四角*/
content: ""; /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
position: absolute; /*基点からの絶対位置で場所指定*/
top: 0.1em;
left: 1.4em;
height: 0.8em;
width: 0.8em;
-webkit-transform: rotate(45deg); /*safari対応*/
transform: rotate(45deg); /*45度回転*/
background: #787878;
}
.title04{
position: relative; /*次の疑似要素::before,afterの基点とする*/
background: #fff;
border-bottom: 1px solid #000;
}
.title04::before{ /*前の□*/
content: "□"; /*疑似要素の中身、中抜き□*/
position: absolute; /*基点からの絶対位置で場所指定*/
top: 1em;
left: 0.8em;
color: #676767;
}
.title04::after{ /*後の□*/
content:"□"; /*疑似要素の中身、中抜き□*/
position: absolute; /*基点からの絶対位置で場所指定*/
top: 0.6em;
left: 1em;
color: #000000;
}
</style>
</head>
<body>
<h1>見出し装飾</h1>
<article>
<h2>色々な見出し装飾例</h2>
<figure class="base">
<h1 class="title01">見出し</h1>
<h1 class="title02">見出し</h1>
<h1 class="title03">見出し</h1>
<h1 class="title04">見出し</h1>
</figure>
</article>
</body>
</html>