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

JavaScriptなし見出し

2025/03/29

コピペで使える見出しのデザイン集！

随時更新していく予定で、更新したら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; //色
}