ホームページ制作MATSUTE BLOG

1. 仕切りがわかりやすい見出し
2. まるポチタイプの見出し
3. ワンポイントタイプの見出し
4. カッコタイプの見出し
5. ステップ、フローなどで使える見出し
6. POINT!CHECK! POINT! などで目立たせる見出し

h1 {
position: relative;
padding: 0.5em 1em 0.5em 2em;
border: 1px solid #ccc;
border-top: 3px solid #3498db;
background: -webkit-linear-gradient(top, #FFF 0%, #F0F0F0 100%);
background: linear-gradient(to bottom, #FFF 0%, #F0F0F0 100%);
box-shadow: 0 -1px 0 #FFF inset;
}

h1::after {
content:"";
position: absolute;
top: 1em;
left: .6em;
width: 10px;
height: 10px;
border: 3px solid #3498db;
border-radius: 100%;
z-index: 2;
}

2．まるポチタイプの見出し

.samp-h1-title13 {
font-size: 1.2rem;
font-weight: 700;
position: relative;
padding: 0em 2em 0em 3em;
margin: 0 0 1em 0;
color: #FFF;
text-align:center;
border-radius: 100vh;
background: #fa4141;
}

.samp-h1-title13::before {
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 14px;
height: 14px;
background-color: #FFF;
border-radius: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.samp-h1-title13::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 14px;
height: 14px;
background-color: #FFF;
border-radius: 50%;
-webkit-transform:transform: translateY(-50%);
transform: translateY(-50%);
}

3．ワンポイントタイプの見出し

.samp-h1-title14 {
font-size:1.2rem;
font-weight:700;
position: relative;
padding: 0.7em 2em 0 5em;
margin:0 0 1em 0;
border-top: 1px solid #fa4141;
}

.samp-h1-title14 strong {
display: inline-block;
position: absolute;
top: -10px;
left: 14px;
width: 60px;
height: 50px;
padding-top: 10px;
text-align: center;
color:#FFF;
background-color: #fa4141;
}

.samp-h1-title14 strong::before {
content: "";
position: absolute;
top:0;
right: -10px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid #d90606;
}

.samp-h1-title14 strong::after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 0;
height: 0;
border: 30px solid #fa4141;
border-bottom-width: 15px;
border-bottom-color: transparent;
z-index:-1;
}

.samp-h1-title15 {
font-size:1.2rem;
font-weight:700;
position: relative;
padding: 1em 2em;
margin: 0 0 1em 0;
text-align: center;
}

.samp-h1-title15::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
}

.samp-h1-title15::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-top: 3px solid #000;
border-left: 3px solid #000;
}

.samp-h1-title16 {
position: relative;
overflow: hidden;
height: 40px;
margin: 0 0 1em 0;
border-bottom: 3px solid #fa4141;
}

.samp-h1-title16::before {
content: "";
position: absolute;
top: -100%;
left: -60px;
width: 200px;
height: 200px;
-webkit-transform: rotate(25deg);
transform: rotate(45deg);
background-color: #fa4141;
}

.samp-h1-title16-1 {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.0;
position: absolute;
display: block;
top: 0.6em;
left: 1.6em;
color: #FFF;
z-index: 1;
}

.samp-h1-title16-2 {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.0;
position: relative;
display: block;
top: 0.5em;
left: 160px;
z-index: 1;
}

.samp-h1-title17 {
position: relative;
padding: 1rem 2rem;
margin:0 0 1em 0;
border: 3px solid #fa4141;
background-color: #FFF;
}

.samp-h1-title17::before {
content: "";
font-size: 1.2rem;
font-weight: 700;
line-height: 1.2;
position: absolute;
top: -28px;
left: -3px;
height: 24px;
padding: 0 1em;
color: #FFF;
background-color: #fa4141;
border: 3px solid #fa4141;
border-bottom:none;
border-top-right-radius: 6px;
}