記事やLPの見出しが、いつも同じ形になってしまうと感じたことはありませんか。

この記事では、コピペするだけで使えるHTML・CSSの見出しデザインを20個まとめました。
前回のボタン記事はHTMLとCSSを1つのコードにまとめていましたが、今回はHTMLとCSSを別々のコードとして掲載しています。

WordPressの子テーマやスタイルシートにCSSだけを追加して使いたい場合にも、そのまま使いやすい形です。

使い方｜HTMLとCSSをそれぞれ貼り付ける

使い方はシンプルです。まずCSSのコードを、サイトのスタイルシート（子テーマのstyle.cssなど）に追加します。

続いて、HTMLのコードを、見出しを表示したい場所に貼り付けます。クラス名は「kts-head」から始まる名前で統一しているので、他のスタイルとぶつかりにくくなっています。

文字の内容は、HTMLコード内のテキスト部分を書き換えるだけで変更できます。

見出しデザイン一覧（20個）

01. シンプル下線見出し

下に1本の線を引くだけの、もっとも基本的な見出しです。

実際の見た目

シンプル下線見出し

HTMLコード

<h2 class="kts-head01">シンプル下線見出し</h2>

CSSコード

.kts-head01 { font-size: 24px; font-weight: 700; color: #1F2933; padding-bottom: 10px; border-bottom: 3px solid #2E6F5E; display: inline-block; }

02. 左に太いラインが立つ見出し

左側に太い線を添えて、見出しの始まりをはっきり示します。

実際の見た目

左ラインの見出し

HTMLコード

<h2 class="kts-head02">左ラインの見出し</h2>

CSSコード

.kts-head02 { font-size: 24px; font-weight: 700; color: #1F2933; padding-left: 16px; border-left: 6px solid #D97757; }

03. 背景に色帯を敷いた見出し

見出しの背景全体に色を敷いて、セクションの切れ目をはっきりさせます。

実際の見た目

背景帯の見出し

HTMLコード

<h2 class="kts-head03">背景帯の見出し</h2>

CSSコード

.kts-head03 { font-size: 22px; font-weight: 700; color: #fff; background: #2E6F5E; padding: 12px 20px; border-radius: 6px; }

04. 上下二重線の見出し

太い線と細い線を組み合わせて、落ち着いた印象に仕上げます。

実際の見た目

上下二重線の見出し

HTMLコード

<h2 class="kts-head04">上下二重線の見出し</h2>

CSSコード

.kts-head04 { font-size: 24px; font-weight: 700; color: #1F2933; padding: 8px 0; border-top: 3px solid #1F2933; border-bottom: 1px solid #1F2933; display: inline-block; }

05. 小さなラベル付き見出し

見出しの上に小さなラベルを添えて、カテゴリーや章番号を示せます。

実際の見た目

HTMLコード

<div class="kts-head05-wrap"> <span class="kts-head05-label">SECTION</span> <h2 class="kts-head05">ラベル付きの見出し</h2> </div>

CSSコード

.kts-head05-label { display: block; font-size: 12px; font-weight: 700; color: #3F8CFF; letter-spacing: 0.05em; margin-bottom: 4px; } .kts-head05 { font-size: 24px; font-weight: 700; color: #1F2933; margin: 0; }

06. リボン風見出し

端が折れたリボンのような形で、見出しを目立たせます。

実際の見た目

リボン風見出し

HTMLコード

<h2 class="kts-head06">リボン風見出し</h2>

CSSコード

.kts-head06 { position: relative; display: inline-block; font-size: 20px; font-weight: 700; color: #fff; background: #D97757; padding: 10px 24px; } .kts-head06::before, .kts-head06::after { content: ""; position: absolute; top: 0; border-top: 20px solid #B85F42; border-bottom: 20px solid #B85F42; } .kts-head06::before { left: -10px; border-left: 10px solid transparent; } .kts-head06::after { right: -10px; border-right: 10px solid transparent; }

07. 波線見出し

下線を波線にして、やわらかい印象を加えた見出しです。

実際の見た目

波線の見出し

HTMLコード

<h2 class="kts-head07">波線の見出し</h2>

CSSコード

.kts-head07 { font-size: 24px; font-weight: 700; color: #1F2933; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: #3F8CFF; text-underline-offset: 8px; text-decoration-thickness: 2px; }

08. ドット下線見出し

点線の下線で、カジュアルな雰囲気に仕上げます。

実際の見た目

ドット下線見出し

HTMLコード

<h2 class="kts-head08">ドット下線見出し</h2>

CSSコード

.kts-head08 { font-size: 24px; font-weight: 700; color: #1F2933; padding-bottom: 8px; border-bottom: 3px dotted #8A94A0; display: inline-block; }

09. グラデーションテキスト見出し

文字そのものに色のグラデーションをかける、目を引く見出しです。

実際の見た目

グラデーション見出し

HTMLコード

<h2 class="kts-head09">グラデーション見出し</h2>

CSSコード

.kts-head09 { font-size: 28px; font-weight: 800; display: inline-block; background: linear-gradient(90deg, #6C63FF, #3F8CFF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

10. 吹き出し風見出し

下に三角形のしっぽを付けて、会話の吹き出しのように見せます。

実際の見た目

吹き出し風見出し

HTMLコード

<h2 class="kts-head10">吹き出し風見出し</h2>

CSSコード

.kts-head10 { position: relative; display: inline-block; font-size: 20px; font-weight: 700; color: #1F2933; background: #F1F3F5; padding: 14px 22px; border-radius: 10px; } .kts-head10::after { content: ""; position: absolute; left: 24px; bottom: -10px; border-width: 10px 8px 0; border-style: solid; border-color: #F1F3F5 transparent transparent; }

11. 絵文字アイコン付き見出し

文頭に絵文字を添えて、親しみやすい印象にする見出しです。

実際の見た目

📌アイコン付き見出し

HTMLコード

<h2 class="kts-head11"><span aria-hidden="true">📌</span>アイコン付き見出し</h2>

CSSコード

.kts-head11 { font-size: 22px; font-weight: 700; color: #1F2933; display: flex; align-items: center; gap: 8px; }

12. 角丸ボックス見出し

影付きの角丸ボックスに収めて、カード風の見出しにします。

実際の見た目

角丸ボックス見出し

HTMLコード

<h2 class="kts-head12">角丸ボックス見出し</h2>

CSSコード

.kts-head12 { font-size: 20px; font-weight: 700; color: #1F2933; background: #fff; padding: 14px 22px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); display: inline-block; }

13. コーナーカット見出し

角を斜めに切り落とした形で、ユニークな印象にする見出しです。

実際の見た目

コーナーカット見出し

HTMLコード

<h2 class="kts-head13">コーナーカット見出し</h2>

CSSコード

.kts-head13 { font-size: 20px; font-weight: 700; color: #fff; background: #1F2933; padding: 14px 24px; display: inline-block; clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%); }

14. 左アクセント背景見出し

左のラインと薄い背景色を組み合わせて、優しい強調感を出します。

実際の見た目

左アクセント背景見出し

HTMLコード

<h2 class="kts-head14">左アクセント背景見出し</h2>

CSSコード

.kts-head14 { font-size: 20px; font-weight: 700; color: #1F2933; background: #EFF6F3; border-left: 5px solid #2E6F5E; padding: 12px 18px; }

15. 二色分割見出し

背景を斜めに2色で分けた、遊び心のある見出しです。

実際の見た目

二色分割見出し

HTMLコード

<h2 class="kts-head15">二色分割見出し</h2>

CSSコード

.kts-head15 { font-size: 20px; font-weight: 700; color: #fff; padding: 14px 24px; display: inline-block; background: linear-gradient(115deg, #2E6F5E 50%, #3F8CFF 50%); border-radius: 6px; }

16. スモールラベル（オーバーライン）見出し

見出しの上に短い一言を添えて、文脈を先に伝える形です。

実際の見た目

HTMLコード

<div class="kts-head16-wrap"> <p class="kts-head16-over">この章で分かること</p> <h2 class="kts-head16">オーバーライン見出し</h2> </div>

CSSコード

.kts-head16-over { font-size: 13px; color: #8A94A0; margin: 0 0 4px; } .kts-head16 { font-size: 24px; font-weight: 700; color: #1F2933; margin: 0; }

17. カード型見出し

見出しをカードのように独立させ、次のブロックとの区切りをはっきりさせます。

実際の見た目

カード型見出し

HTMLコード

<h2 class="kts-head17">カード型見出し</h2>

CSSコード

.kts-head17 { font-size: 20px; font-weight: 700; color: #1F2933; background: #fff; border: 1px solid #E4E4E4; border-radius: 10px; padding: 16px 22px; text-align: center; }

18. マーカーで引いたような見出し

テキストの背景を帯状に敷いて、マーカーで線を引いたように見せます。

実際の見た目

マーカー風見出し

HTMLコード

<h2 class="kts-head18"><span>マーカー風見出し</span></h2>

CSSコード

.kts-head18 { font-size: 24px; font-weight: 700; color: #1F2933; margin: 0; } .kts-head18 span { background: linear-gradient(transparent 60%, #FFE08A 60%); }

19. グラデーション枠ボックス見出し

枠線だけにグラデーションを使い、白背景でも軽やかに見せる見出しです。

実際の見た目

グラデーション枠見出し

HTMLコード

<h2 class="kts-head19">グラデーション枠見出し</h2>

CSSコード

.kts-head19 { font-size: 20px; font-weight: 700; color: #1F2933; display: inline-block; padding: 12px 22px; border-radius: 10px; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #FF7A7A, #7A7AFF); background-origin: border-box; background-clip: padding-box, border-box; }

20. 番号付きセクション見出し

大きな番号を横に添えて、順番のある章立てを表す見出しです。

実際の見た目

01番号付きセクション見出し

HTMLコード

<h2 class="kts-head20"><span class="num">01</span>番号付きセクション見出し</h2>

CSSコード

.kts-head20 { font-size: 22px; font-weight: 700; color: #1F2933; display: flex; align-items: center; gap: 14px; margin: 0; } .kts-head20 .num { font-size: 32px; font-weight: 800; color: #D97757; }

カスタマイズの小ワザ

• 色を変えたい時は、CSSの色コード（#で始まる部分）を書き換えるだけで反映されます。
• 文字を変えたい時は、HTMLコード内のテキスト部分を書き換えてください。
• 見出しのレベル（h2・h3など）は、サイトの構成に合わせて書き換えて問題ありません。
• 05番・16番のように、見出しとラベルがセットになっているものは、HTMLの構造ごとコピーしてください。
• 文字色と背景色のコントラストが十分か、実際のサイトの背景で見え方を確認してください。

まとめ｜雰囲気別見出し早見表

雰囲気	該当する見出し
シンプル・定番	01, 02, 04, 08
目を引く・華やか	06, 09, 13, 15, 19
やわらかい・親しみやすい	07, 10, 11, 18
情報を添える	05, 16, 20
ボックス・カード風	03, 12, 14, 17

20個の見出しは、線・背景・文字装飾・形の違いで、それぞれ異なる印象を作れる。前回のボタンと組み合わせて、サイト全体のトーンを揃えるのもおすすめである。

※本記事のコードは2026年9月時点の主要ブラウザでの表示を想定しています。古いブラウザでは、一部の見た目（グラデーションテキスト・波線・コーナーカットなど）が反映されない場合があります。