プログラミングの独学サイトです。

CSS

CSS見出しデザイン集｜h2・h3に使える装飾サンプル

CSSでh2・h3見出しを装飾するコピペサンプルを20種類まとめました。左線、下線、背景付き、番号付き、吹き出し風、上下線、英字ラベル、グラデーション、チェック付きなど、ブログやWebサイトで使いやすい見出しデザインを紹介します。

更新 2026.07.12公開 2026.07.08 12分で読めます
この記事の目次
  1. 見出しデザインを使う前の注意点
  2. 1. 左線付き見出し
  3. 2. 太い左線と背景の見出し
  4. 3. 下線付き見出し
  5. 4. 下線の一部だけ色が違う見出し
  6. 5. 背景色付き見出し
  7. 6. 角丸ラベル風見出し
  8. 7. 番号付き見出し
  9. 8. カウンターで自動番号を付ける見出し
  10. 9. 吹き出し風見出し
  11. 10. リボン風見出し
  12. 11. 上下線付き見出し
  13. 12. 左右線付き中央見出し
  14. 13. 英字ラベル付き見出し
  15. 14. グラデーション文字の見出し
  16. 15. マーカー線付き見出し
  17. 16. チェックアイコン付き見出し
  18. 17. カード風見出し
  19. 18. 斜め背景の見出し
  20. 19. ドット付き見出し
  21. 20. CSS変数で色を変えやすい見出し
  22. 見出しデザインで変更しやすいCSS
  23. 見出し装飾でよくある失敗
  24. まとめ

見出しは、記事やページの構造を伝える大切な要素です。

CSSで少し装飾するだけで、本文の読みやすさやセクションの区切りがわかりやすくなります。

この記事では、h2 や h3 に使いやすい見出しデザインを20種類紹介します。

見出しデザインを使う前の注意点

見出しタグは、文字を大きくするためではなく、ページ構造を伝えるために使います。

  • 記事本文では基本的に h2 から始める
  • h2 の中を細かく分けるときに h3 を使う
  • 装飾のためだけに見出しタグを使わない
  • デザインを増やしすぎず、記事内で統一する

HTML見出しの使い分けは、HTMLタグの使い分け で解説しています。

1. 左線付き見出し

シンプルで使いやすい定番の見出しです。

<h2 class="heading-left-line">左線付き見出し</h2>
.heading-left-line {
  padding-left: 14px;
  font-size: 24px;
  border-left: 5px solid #2563eb;
}

色を変える場合は、border-left の色を変更します。

2. 太い左線と背景の見出し

章の区切りを少し強めに見せたいときに使えます。

<h2 class="heading-left-bg">背景付きの見出し</h2>
.heading-left-bg {
  padding: 12px 16px;
  font-size: 24px;
  background: #eff6ff;
  border-left: 6px solid #2563eb;
}

本文中で使う場合は、背景色を薄めにすると読みやすいです。

3. 下線付き見出し

控えめで、ブログ本文になじみやすい見出しです。

<h2 class="heading-underline">下線付き見出し</h2>
.heading-underline {
  padding-bottom: 10px;
  font-size: 24px;
  border-bottom: 2px solid #e5e7eb;
}

4. 下線の一部だけ色が違う見出し

疑似要素を使って、下線の一部だけアクセント色にします。

.heading-underline-accent {
  position: relative;
  padding-bottom: 12px;
  font-size: 24px;
  border-bottom: 2px solid #e5e7eb;
}

.heading-underline-accent::after {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 80px;
  height: 2px;
  content: "";
  background: #2563eb;
}

疑似要素の基本は、擬似要素の使い方 で解説しています。

5. 背景色付き見出し

セクションの区切りをはっきり見せたいときに使います。

.heading-bg {
  padding: 12px 16px;
  font-size: 22px;
  background: #f3f4f6;
  border-radius: 6px;
}

背景色は本文より少しだけ濃い程度にすると自然です。

6. 角丸ラベル風見出し

小さな見出しや補足セクションに向いています。

.heading-label {
  display: inline-block;
  padding: 8px 14px;
  color: #fff;
  font-size: 20px;
  background: #2563eb;
  border-radius: 9999px;
}

display: inline-block; にすると、文字の幅に合わせたラベルになります。

7. 番号付き見出し

手順やランキングに向いた見出しです。

<h2 class="heading-number">
  <span>01</span>
  番号付き見出し
</h2>
.heading-number {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
}

.heading-number span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 14px;
  background: #2563eb;
  border-radius: 50%;
}

8. カウンターで自動番号を付ける見出し

複数の見出しに自動で番号を付けたい場合です。

<section class="numbered-section">
  <h2>最初の見出し</h2>
  <h2>次の見出し</h2>
</section>
.numbered-section {
  counter-reset: heading;
}

.numbered-section h2 {
  counter-increment: heading;
}

.numbered-section h2::before {
  margin-right: 10px;
  color: #2563eb;
  content: counter(heading, decimal-leading-zero);
}

HTMLに番号を書かずに管理できます。

9. 吹き出し風見出し

少し目立たせたい見出しに使えます。

.heading-balloon {
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  color: #fff;
  font-size: 22px;
  background: #111827;
  border-radius: 6px;
}

.heading-balloon::after {
  position: absolute;
  left: 24px;
  bottom: -8px;
  width: 0;
  height: 0;
  content: "";
  border-top: 8px solid #111827;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

10. リボン風見出し

キャンペーンやおすすめ表示に使いやすいデザインです。

.heading-ribbon {
  display: inline-block;
  padding: 10px 22px;
  color: #fff;
  font-size: 22px;
  background: #db2777;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

clip-path を使って、右側をリボンのような形にしています。

11. 上下線付き見出し

短い見出しを上品に見せたいときに使えます。

.heading-double-line {
  padding: 12px 0;
  font-size: 24px;
  text-align: center;
  border-top: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
}

中央寄せの見出しに向いています。

12. 左右線付き中央見出し

セクションタイトルや小見出しに使いやすいデザインです。

<h2 class="heading-side-lines"><span>見出し</span></h2>
.heading-side-lines {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 22px;
  text-align: center;
}

.heading-side-lines::before,
.heading-side-lines::after {
  flex: 1;
  height: 1px;
  content: "";
  background: #d1d5db;
}

左右の線が伸びるので、短い見出しと相性がよいです。

13. 英字ラベル付き見出し

日本語見出しの上に小さな英字を添えるデザインです。

<h2 class="heading-with-label">
  <span>SERVICE</span>
  サービス
</h2>
.heading-with-label {
  display: grid;
  gap: 6px;
  font-size: 26px;
}

.heading-with-label span {
  color: #2563eb;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

14. グラデーション文字の見出し

LPやファーストビューで使いやすい、少し華やかな見出しです。

.heading-gradient-text {
  color: transparent;
  font-size: 32px;
  background: linear-gradient(90deg, #2563eb, #db2777);
  background-clip: text;
  -webkit-background-clip: text;
}

本文中で多用すると読みにくいため、短い見出しに限定します。

15. マーカー線付き見出し

手書き風に少し強調したいときに使えます。

.heading-marker {
  display: inline;
  font-size: 24px;
  background: linear-gradient(transparent 62%, #fef08a 62%);
}

文字装飾全般は、CSS文字装飾集 で扱います。

16. チェックアイコン付き見出し

ポイント紹介やメリットの見出しに向いています。

<h2 class="heading-check">チェック付き見出し</h2>
.heading-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
}

.heading-check::before {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  font-size: 16px;
  content: "✓";
  background: #16a34a;
  border-radius: 50%;
}

17. カード風見出し

見出し自体を小さなカードのように見せるデザインです。

.heading-card {
  padding: 16px 20px;
  font-size: 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

ページ全体のトーンが軽いときに使いやすいです。

18. 斜め背景の見出し

少し動きのある印象にしたい見出しです。

.heading-skew {
  display: inline-block;
  padding: 10px 18px;
  color: #fff;
  font-size: 22px;
  background: #2563eb;
  transform: skewX(-8deg);
}

.heading-skew span {
  display: inline-block;
  transform: skewX(8deg);
}

HTMLは次のようにします。

<h2 class="heading-skew"><span>斜め背景の見出し</span></h2>

外側を傾け、内側の文字を戻しています。

19. ドット付き見出し

やわらかく、少し装飾感のある見出しです。

.heading-dot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
}

.heading-dot::before {
  width: 12px;
  height: 12px;
  content: "";
  background: #f97316;
  border-radius: 50%;
}

20. CSS変数で色を変えやすい見出し

同じ見出しデザインを色違いで使う場合に便利です。

<h2 class="heading-variable">基本色の見出し</h2>
<h2 class="heading-variable heading-variable--pink">ピンクの見出し</h2>
.heading-variable {
  --heading-color: #2563eb;

  padding-left: 14px;
  font-size: 24px;
  border-left: 5px solid var(--heading-color);
}

.heading-variable--pink {
  --heading-color: #db2777;
}

CSS変数を使うと、デザインの形は共通のまま色だけ変えられます。

見出しデザインで変更しやすいCSS

コピペ後によく変更する場所です。

変えたいもの 変更するCSS
文字サイズ font-size
アクセント色 border-color、background、color
余白 padding、margin
角丸 border-radius
線の太さ border-width、疑似要素の height

見出し装飾でよくある失敗

  • 見た目のためだけに h2 や h3 を使ってしまう
  • 記事内で見出しデザインを増やしすぎる
  • 背景色が濃すぎて本文より目立ちすぎる
  • 疑似要素の線や三角形が文字に重なる
  • スマホで見出しが長くなり、折り返しが不自然になる
  • 英字ラベルの文字間が広すぎて読みにくい

まとめ

見出しデザインは、左線、下線、背景、番号、ラベル、疑似要素を組み合わせると幅広く作れます。

見出し全体のデザインはこの記事、文字そのものの装飾は CSS文字装飾集、HTML見出しの意味は HTMLタグの使い分け に分けて管理します。

RELATED

あわせて読みたい記事