【html&css】コピペだけ！おしゃれな見出しデザイン37選

2026年2月19日

本記事では、見出し（h1~h6タグ）のおしゃれなデザインコードを37個ご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

おしゃれなフリー素材デザイン集

本サイトでは、見出し以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

シンプルな見出しデザイン

ここでは、以下のシンプルな見出しデザイン例を記載しています。

シンプルな見出しデザイン

左線
左線＆背景色
左線＆立体的
左線（内側）＆背景
下線
下線（点線）
下線（破線）
下線（二重線）
下線（吹き出し風）
両端線
下線（小）
左右に斜線
カギカッコ
カギカッコ（大）

実際のデザインプレビューとHTML＆CSSコードを記載しています。

左線

CSS見出しデザイン

HTMLコード表示

<div class="heading-01">CSS見出しデザイン</div>

CSSコード表示

.heading-01 {
  padding: .5em .7em;
  border-left: 5px solid #3b82f6;
  color: #333333;
}

左線＆背景色

CSS見出しデザイン

HTMLコード表示

<div class="heading-02">CSS見出しデザイン</div>

CSSコード表示

.heading-02 {
  padding: .5em .7em;
  border-left: 5px solid #3b82f6;
  color: #333333;
  background: #f0f7ff;
}

左線＆立体的

CSS見出しデザイン

HTMLコード表示

<div class="heading-03">CSS見出しデザイン</div>

CSSコード表示

.heading-03 {
  padding: .5em .7em;
  border-left: 5px solid #3b82f6;
  color: #333333;
  background: #ffffff;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

左線（内側）＆背景

CSS見出しデザイン

HTMLコード表示

<div class="heading-04">CSS見出しデザイン</div>

CSSコード表示

.heading-04 {
  display: flex;
  align-items: center;
  padding: .5em .7em;
  background-color: #f2f2f2;
  color: #333333;
}

.heading-04::before {
  display: inline-block;
  width: 5px;
  height: 1.5em;
  margin-right: .5em;
  background-color: #2589d0;
  content: '';
}

下線

CSS見出しデザイン

HTMLコード表示

<h2 class="heading-05">CSS見出しデザイン</h2>

CSSコード表示

.heading-05 {
  padding: .5em 0;
  border-bottom: 2px solid #2589d0;
  color: #333333;
}

下線（点線）

CSS見出しデザイン

HTMLコード表示

<div class="heading-06">CSS見出しデザイン</div>

CSSコード表示

.heading-06 {
  padding: .5em 0;
  border-bottom: 3px dotted #2589d0;
  color: #333333;
}

下線（破線）

CSS見出しデザイン

HTMLコード表示

<div class="heading-07">CSS見出しデザイン</div>

CSSコード表示

.heading-07 {
  padding: .5em 0;
  border-bottom: 3px dashed #2589d0;
  color: #333333;
}

下線（二重線）

CSS見出しデザイン

HTMLコード表示

<div class="heading-08">CSS見出しデザイン</div>

CSSコード表示

.heading-08 {
  padding: .5em 0;
  border-bottom: 5px double #2589d0;
  color: #333333;
}

下線（吹き出し風）

CSS見出しデザイン

HTMLコード表示

<div class="heading-09">CSS見出しデザイン</div>

CSSコード表示

.heading-09 {
  position: relative;
  padding: 1rem 1.5rem;
  border-bottom: 3px solid #2589d0;
  color: #333333;
}

.heading-09::after {
  position: absolute;
  bottom: -6px;
  left: 1em;
  width: 12px;
  height: 12px;
  content: '';
  border-right: 3px solid #2589d0;
  border-bottom: 3px solid #2589d0;
  background: #fff;
  transform: rotate(45deg);
}

両端線

CSS見出しデザイン

HTMLコード表示

<div class="heading-10">CSS見出しデザイン</div>

CSSコード表示

.heading-10 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
}

.heading-10::before,
.heading-10::after {
  content: '';
  height: 2px;
  background-color: #2589d0;
  flex-grow: 1;
}
.heading-10::before {
  margin-right: 15px;
}
.heading-10::after {
  margin-left: 15px;
}

下線（小）

CSS見出しデザイン

HTMLコード表示

<div class="heading-11">CSS見出しデザイン</div>

CSSコード表示

.heading-11 {
  text-align: center;
  color: #333333;
}

.heading-11::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: #2589d0;
  margin: 15px auto 0;
}

左右に斜線

CSS見出しデザイン

HTMLコード表示

<div class="heading-12">CSS見出しデザイン</div>

CSSコード表示

.heading-12 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
}

.heading-12::before,
.heading-12::after {
  content: '';
  width: 3px;
  height: 20px;
  background-color: #2589d0;
  transform: rotate(25deg);
}
.heading-12::before {
  margin-right: 15px;
}
.heading-12::after {
  margin-left: 15px;
}

カギカッコ

CSS見出しデザイン

HTMLコード表示

<div class="heading-13">CSS見出しデザイン</div>

CSSコード表示

.heading-13 {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #333333;
}

.heading-13::before,
.heading-13::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
}
.heading-13::before {
  top: 0;
  left: 0;
  border-top: 3px solid #2589d0;
  border-left: 3px solid #2589d0;
}
.heading-13::after {
  bottom: 0;
  right: 0;
  border-right: 3px solid #2589d0;
  border-bottom: 3px solid #2589d0;
}

カギカッコ（大）

CSS見出しデザイン

HTMLコード表示

<div class="heading-14">CSS見出しデザイン</div>

CSSコード表示

.heading-14 {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #333333;
}

.heading-14::before,
.heading-14::after {
  content: '';
  position: absolute;
  top: 0;
  width: 10px;
  height: 100%;
  border-top: 3px solid #2589d0;
  border-bottom: 3px solid #2589d0;
}
.heading-14::before {
  left: 0;
  border-left: 3px solid #2589d0;
}
.heading-14::after {
  right: 0;
  border-right: 3px solid #2589d0;
}

カラフルな見出しデザイン

ここでは、以下のカラフルな見出しデザイン例を記載しています。

カラフルな見出しデザイン

タグ風
吹き出し風
背景に回り込むリボン風
リボン風
旗風

実際のデザインプレビューとHTML＆CSSコードを記載しています。

タグ風

CSS見出しデザイン

HTMLコード表示

<div class="heading-tag">CSS見出しデザイン</div>

CSSコード表示

.heading-tag {
  position: relative;
  display: inline-block;
  padding: 0.5em 1em 0.5em 2.5em;
  border-radius: 2rem 4px 4px 2rem;
  background-color: #2589d0;
  color: #ffffff;
}

.heading-tag::before {
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffffff;
}

吹き出し風

CSS見出しデザイン

HTMLコード表示

<div class="heading-9">CSS見出しデザイン</div>

CSSコード表示

.heading-9 {
  position: relative;
  padding: .5em .7em;
  border-radius: 10px;
  background-color: #2589d0;
  color: #ffffff;
}

.heading-9::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 30px;
  width: 0;
  height: 0;
  border: 11px solid transparent;
  border-top: 11px solid #2589d0;
}

背景に回り込むリボン風

CSS見出しデザイン

HTMLコード表示

<div class="heading-11">CSS見出しデザイン</div>

CSSコード表示

.heading-11 {
  position: relative;
  padding: .5em .7em;
  background-color: #2589d0;
  color: #ffffff;
}

.heading-11::before {
  position: absolute;
  top: 100%;
  left: 0;
  border-bottom: solid 10px transparent;
  border-right: solid 20px #1579c0;
  content: '';
}

リボン風

CSS見出しデザイン

HTMLコード表示

<div class="heading-ribon"><span>CSS見出しデザイン</span></div>

CSSコード表示

.heading-ribon {
  position: relative;
  width: 290px;
  margin:0 auto 30px;
  padding: .5em .7em;
  background-color: #2589d0;
  color: #ffffff;
  text-align: center;
}

.heading-ribon::before,
.heading-ribon::after {
  position: absolute;
  bottom: -10px;
  z-index: -1;
  border-style: solid;
  border-color: #1579c0;
  content: '';
}

.heading-ribon::before {
  left: -30px;
  border-width: 25px 25px 25px 15px;
  border-left-color: transparent;
}

.heading-ribon::after {
  right: -30px;
  border-width: 25px 15px 25px 25px;
  border-right-color: transparent;
}

.heading-ribon span::before,
.heading-ribon span::after {
  position: absolute;
  bottom: -10px;
  width: 10px;
  height: 10px;
  background-color: #002970; /* 固定色またはlineColorの暗い色 */
  content: '';
}

.heading-ribon span::before {
  left: 0;
  clip-path: polygon(0 0, 100% 0%, 100% 100%);
}

.heading-ribon span::after {
  right: 0;
  clip-path: polygon(0 0, 100% 0%, 0% 100%);
}

旗風

CSS見出しデザイン

HTMLコード表示

<div class="heading-34"><span>CSS見出しデザイン</span></div>

CSSコード表示

.heading-34 {
  position: relative;
  margin: 0 0 25px 9px;
  padding: .5em .8em;
  background-color: #2589d0;
  color: #ffffff;
}

.heading-34::before {
  position: absolute;
  top: 0;
  left: -9px;
  z-index: 1;
  width: 5px;
  height: 135%;
  border-radius: 3px;
  background-color: #660000;
  content: '';
}

.heading-34 span::before,
.heading-34 span::after {
  position: absolute;
  left: -9px;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background-color: #c99; /* 紐の色は固定 */
  content: '';
}

.heading-34 span::before {
  top: 44%;
  transform: rotate(-25deg);
}

.heading-34 span::after {
  top: 54%;
  transform: rotate(25deg);
}

かわいい見出しデザイン

ここでは、以下のかわいい見出しデザイン例を記載しています。

かわいい見出しデザイン

テープ風
付箋風（単色）
付箋風（先頭色）
番号
カラフルなシャドウ
立体的
ストライプ背景
チェック柄
映画フィルム風

実際のデザインプレビューとHTML＆CSSコードを記載しています。

テープ風

CSS見出しデザイン

HTMLコード表示

<div class="heading-tape">CSS見出しデザイン</div>

CSSコード表示

.heading-tape {
  display: inline-block;
  padding: 0.5em 1em;
  color: #555555;
  background: #f0f0f0;
  border-left: 4px dotted rgba(0, 0, 0, 0.1);
  border-right: 4px dotted rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
}

付箋風（単色）

CSS見出しデザイン

HTMLコード表示

<div class="heading-sticky-solid">CSS見出しデザイン</div>

CSSコード表示

.heading-sticky-solid {
  display: inline-block;
  width: 80%;
  padding: 1em;
  color: #555555;
  background: #ffeb3b;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
  transform: rotate(1deg);
}

付箋風（先頭色）

CSS見出しデザイン

HTMLコード表示

<div class="heading-sticky-border">CSS見出しデザイン</div>

CSSコード表示

.heading-sticky-border {
  padding: 1em;
  color: #333333;
  background: #ffffff;
  border-left: 10px solid #2589d0;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

番号

01CSS見出しデザイン

HTMLコード表示

<div class="heading-number"><span class="number">01</span>CSS見出しデザイン</div>

CSSコード表示

.heading-number {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 2px solid #2589d0;
  color: #333333;
}

.heading-number .number {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background: #2589d0;
  color: #fff;
}

カラフルなシャドウ

CSS見出しデザイン

HTMLコード表示

<div class="heading-color-shadow">CSS見出しデザイン</div>

CSSコード表示

.heading-color-shadow {
  padding: 10px 15px;
  color: #333333;
  background: #ffffff;
  border: 2px solid #2589d0;
  box-shadow: 5px 5px 0 #2589d066;
}

立体的

CSS見出しデザイン

HTMLコード表示

<div class="heading-solid-box">CSS見出しデザイン</div>

CSSコード表示

.heading-solid-box {
  padding: 10px 15px;
  color: #333333;
  background: #ffffff;
  border: 1px solid #333333;
  box-shadow: 4px 4px 0 #333333;
}

ストライプ背景

CSS見出しデザイン

HTMLコード表示

<div class="heading-stripe">CSS見出しデザイン</div>

CSSコード表示

.heading-stripe {
  padding: 10px 15px;
  color: #555555;
  border: 1px solid #cceeff;
  background: repeating-linear-gradient(45deg, #eef9ff, #eef9ff 10px, #ffffff 10px, #ffffff 20px);
}

チェック柄

CSS見出しデザイン

HTMLコード表示

<div class="heading-check">CSS見出しデザイン</div>

CSSコード表示

.heading-check {
  padding: 10px 15px;
  color: #333333;
  background-color: #fff;
  border-bottom: 2px solid #aaccff;
  background-image: linear-gradient(90deg, #c8c8ff 50%, transparent 50%), linear-gradient(#c8c8ff 50%, transparent 50%);
  background-size: 20px 20px;
}

映画フィルム風

CSS見出しデザイン

HTMLコード表示

<div class="heading-film">CSS見出しデザイン</div>

CSSコード表示

.heading-film {
  padding: 10px 15px;
  text-align: center;
  color: #ffffff;
  background: #333333;
  border-top: 5px dashed #ffffff;
  border-bottom: 5px dashed #ffffff;
}

おしゃれな見出しデザイン

ここでは、以下のおしゃれな見出しデザイン例を記載しています。

おしゃれな見出しデザイン

大きいラベル
下に反射する文字
1文字目だけ大きめ
数字の背景
文字の背景
円の背景

実際のデザインプレビューとHTML＆CSSコードを記載しています。

大きいラベル

CSS HEADINGCSS見出しデザイン

HTMLコード表示

<div class="heading-big-label">CSS HEADING<span>CSS見出しデザイン</span></div>

CSSコード表示

.heading-big-label {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #333333;
  text-transform: uppercase;
}

.heading-big-label span {
  display: block;
  font-size: 12px;
  color: #999999;
  margin-top: 5px;
  letter-spacing: normal;
  text-transform: none;
}

下に反射する文字

CSS見出しデザイン

HTMLコード表示

<div class="heading-reflection">CSS見出しデザイン</div>

CSSコード表示

.heading-reflection {
  position: relative;
  text-align: center;
  padding-bottom: 20px;
  color: #333333;
}

.heading-reflection::before {
  content: attr(data-en);
  /* またはテキストを直接指定 */
  content: 'CSS見出しデザイン';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform: scaleY(-1);
  opacity: 0.3;
  /* 必要に応じてmask-image等でグラデーションをかけるとよりリアルになります */
}

1文字目だけ大きめ

CSS見出しデザイン

HTMLコード表示

<div class="heading-first-big">CSS見出しデザイン</div>

CSSコード表示

.heading-first-big {
  font-weight: bold;
  color: #333333;
}

.heading-first-big::first-letter {
  color: #2589d0;
  font-size: 1.5em;
  margin-right: 2px;
}

数字の背景

CSS見出しデザイン

HTMLコード表示

<div class="heading-bg-number" data-number="01">CSS見出しデザイン</div>

CSSコード表示

.heading-bg-number {
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: bold;
  color: #333333;
}

.heading-bg-number::before {
  content: attr(data-number);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  font-weight: bold;
  color: #e0f2fe;
  z-index: -1;
  line-height: 1;
}

文字の背景

CSS見出しデザイン

HTMLコード表示

<div class="heading-bg-text" data-en="HEADING">CSS見出しデザイン</div>

CSSコード表示

.heading-bg-text {
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: bold;
  color: #333333;
}

.heading-bg-text::before {
  content: attr(data-en);
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: bold;
  color: #e0f2fe;
  z-index: -1;
  white-space: nowrap;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

円の背景

CSS見出しデザイン

HTMLコード表示

<div class="heading-bg-circle">CSS見出しデザイン</div>

CSSコード表示

.heading-bg-circle {
  position: relative;
  z-index: 1;
  padding-left: 20px;
  font-weight: bold;
  color: #333333;
}

.heading-bg-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #a3d5f5;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.7;
}

アイコン付き見出しデザイン

ここでは、以下のアイコン付き見出しデザイン例を記載しています。

アイコン付き見出しデザイン

重なる2つの正方形
チェックアイコン
冠アイコン

実際のデザインプレビューとHTML＆CSSコードを記載しています。

重なる2つの正方形

CSS見出しデザイン

HTMLコード表示

<div class="heading-icon-squares">CSS見出しデザイン</div>

CSSコード表示

.heading-icon-squares {
  position: relative;
  padding-left: 1.5em;
  color: #333333;
}

.heading-icon-squares::before,
.heading-icon-squares::after {
  content: '';
  position: absolute;
  width: 0.8em;
  height: 0.8em;
  border: 2px solid #2589d0;
  top: 50%;
  transform: translateY(-50%);
}
.heading-icon-squares::before {
  left: 0;
}
.heading-icon-squares::after {
  left: 0.3em;
  margin-top: -0.1em;
  margin-left: -0.1em;
}

チェックアイコン

CSS見出しデザイン

HTMLコード表示

<div class="heading-icon-check">CSS見出しデザイン</div>

CSSコード表示

.heading-icon-check {
  position: relative;
  padding-left: 1.5em;
  color: #333333;
}

.heading-icon-check::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.8em;
  height: 0.5em;
  border-left: 3px solid #2589d0;
  border-bottom: 3px solid #2589d0;
  transform: translateY(-60%) rotate(-45deg);
}

冠アイコン

CSS見出しデザイン

HTMLコード表示

<div class="heading-icon-crown">CSS見出しデザイン</div>

CSSコード表示

.heading-icon-crown {
  position: relative;
  padding-left: 1.5em;
  color: #333333;
}

.heading-icon-crown::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.2em;
  height: 1em;
  background: #fbbf24;
  clip-path: polygon(0% 0%, 20% 50%, 50% 0%, 80% 50%, 100% 0%, 100% 100%, 0% 100%);
  transform: translateY(-50%);
}

【html&css】コピペだけ！おしゃれな見出しデザイン37選

おしゃれなフリー素材デザイン集

シンプルな見出しデザイン

左線

左線＆背景色

左線＆立体的

左線（内側）＆背景

下線

下線（点線）

下線（破線）

下線（二重線）

下線（吹き出し風）

両端線

下線（小）

左右に斜線

カギカッコ

カギカッコ（大）

カラフルな見出しデザイン

タグ風

吹き出し風

背景に回り込むリボン風

リボン風

旗風

かわいい見出しデザイン

テープ風

付箋風（単色）

付箋風（先頭色）

番号

カラフルなシャドウ

立体的

ストライプ背景

チェック柄

映画フィルム風

おしゃれな見出しデザイン

大きいラベル

下に反射する文字

1文字目だけ大きめ

数字の背景

文字の背景

円の背景

アイコン付き見出しデザイン

重なる2つの正方形

チェックアイコン

冠アイコン

関連記事