コピペでOK!css見出しデザイン集

コピペで使える見出しのデザイン集!
随時更新していく予定で、更新したらNEWSにてお知らせします!
※見出しをクリックするとサンプルのcssが表示されます。
サンプル見出し1
.h1-design1 {
background-color: #61A3BA; //背景色
color: #fff; //文字色
font-size: 24px; //文字サイズ
padding: 10px;
}
サンプル見出し2
.h1-design2 {
font-size: 24px; //文字サイズ
padding: 10px 10px 10px 0;
background-color: #ffffdd;
color: #333; //文字色
border-bottom: 5px dotted #61A3BA; //ボーダーの太さ、種類、色
}
サンプル見出し3
.h1-design3 {
font-size: 24px; //文字サイズ
padding: 10px 10px 10px 0;
background-color: #ffffdd; //背景色
color: #333; //文字色
border-bottom: 5px dashed #61A3BA; //ボーダーの太さ、種類、色
}
サンプル見出し4
.h1-design4 {
font-size: 24px; //文字サイズ
padding: 10px 10px 10px 0;
background-color: #ffffdd; //背景色
color: #333; //文字色
border-bottom: 5px double #61A3BA; //ボーダーの太さ、種類、色
}
サンプル見出し5
.h1-design5 {
position: relative;
font-size: 24px; //文字サイズ
padding: 10px 10px 10px 0;
background-color: #ffffdd; //背景色
color: #333; //文字色
border-bottom: 3px solid #61A3BA; //上のボーダーの太さ、種類、色
}
//下側のボーダー
.h1-design5::after {
position: absolute;
content: '';
width: 100%;
height: 1px; //ボーダーの太さ
bottom: -8px;
left: 0;
background-color: #61A3BA; //ボーダーの色
}
サンプル見出し6
.h1-design6 {
position: relative;
font-size: 24px; //文字サイズ
padding: 10px 10px 10px 20px;
background-color: #ffffdd; //背景色
color: #333; //文字色
border-bottom: 2px solid #61A3BA; //ボーダーの太さ、種類、色
}
//ボーダー左側の四角
.h1-design6::before {
position: absolute;
content: '';
width:10px; //四角の横幅
height: 10px; //四角の高さ
bottom: -6px;
left: 0;
background-color: #61A3BA; //四角の色
}
//ボーダー右側の四角
.h1-design6::after {
position: absolute;
content: '';
width: 10px; //四角の横幅
height: 10px; //四角の高さ
bottom: -6px;
right: 0;
background-color: #61A3BA; //四角の色
}
サンプル見出し7
.h1-design7 {
position: relative;
font-size: 24px; //文字サイズ
padding: 10px 10px 10px 20px;
background-color: #ffffdd; //背景色
color: #333; //文字色
border-bottom: 3px dotted #61A3BA; //ボーダーの太さ、種類、色
}
//ボーダー左の丸
.h1-design7::before {
position: absolute;
content: '';
width:10px; //丸の横幅
height: 10px; //丸の高さ
bottom: -6px;
left: 0;
border-radius: 50%; //丸にする
background-color: #61A3BA; //丸の色
}
//ボーダー右の丸
.h1-design7::after {
position: absolute;
content: '';
width: 10px; //丸の横幅
height: 10px; //丸の高さ
bottom: -6px;
right: 0;
border-radius: 50%; //丸にする
background-color: #61A3BA; //丸の色
}
サンプル見出し8
.h1-design8 {
position: relative;
font-size: 24px; //文字サイズ
padding: 10px 10px 10px 20px;
background-color: #ffffdd; //背景色
color: #333; //文字色
}
//左端の飾り線
.h1-design8::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 8px; //太さ
height: 100%;
background-color: #61A3BA; //色
}
サンプル見出し9
.h1-design9 {
position: relative;
font-size: 24px; //文字サイズ
padding: 10px 10px 10px 24px;
background-color: #fff; //背景色
color: #333; //文字色
}
//左端色付き部分
.h1-design9::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 16px; //太さ
height: 100%;
background-color: #61A3BA; //色
}
サンプル見出し10
.h1-design10 {
position: relative;
font-size: 24px; //文字サイズ
padding: 10px 10px 10px 24px;
background-color: #ffffdd; //背景色
color: #333; //文字色
border-bottom: 2px solid #61A3BA; //ボーダーの太さ、種類、色
}
//左端色付き部分
.h1-design10::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 16px; //太さ
height: 100%;
background-color: #61A3BA; //色
}