KAKERU Designing suetomi

見出しの飾りをCSSで作る｜左線・下線・マーカー・両側の線・枠、コピペ5種類と選び方

見出しの飾りをCSSで作る。左線・下線・マーカー・両側の線の見本とコード

見出しは、ページを「読む人が、どこに何が書いてあるかを見つける」ための目印です。左に線を引く、下線を引く、マーカーを引く、枠で囲む。見出しの飾りはどれもCSSだけで作れて、画像を用意する必要はありません。

使いどころ

飾りは、見出しの段（h2・h3）ごとに1種類と決めて使う。目立たせたい文だけに飾りを付けたい、という理由で見出しのタグを使うのはやめる。

今回は、左に太い線、下線の一部だけ色、蛍光ペンのようなマーカー、文字の両側に線、枠で囲んで英字を置く、の5種類を、コピペ用のコードつきで紹介します。線の太さやマーカーの高さを変えた比較と、スマホで崩れやすいところ、飾りの選び方もまとめました。

トミー

連載「WEBの技術」の31回目です。
今回は「見出しの飾り」。毎日見ている部品ですが、選び方ひとつでページの読みやすさが変わります。

完成見本：同じ見出しに、5種類の飾り

見出しの下の灰色の線は、本文の代わりです。どの見本も、HTMLは見出しのタグ1つ（3と5は中に span が1つ）で、飾りはすべてCSSで描いています。

BORDER-LEFT1. 左に太い線を引くいちばん基本の形。本文の見出しはまずここから
BORDER-BOTTOM ＋ ::AFTER2. 下線の一部だけ色を変える落ち着いた印象にしたいページ
LINEAR-GRADIENT3. 蛍光ペンのようなマーカーを引くキャンペーンなど、少しくだけた雰囲気のページ
FLEX ＋ ::BEFORE / ::AFTER4. 文字の両側に線を引く短い見出しを、ページの真ん中に置くとき
BORDER ＋ BORDER-RADIUS5. 枠で囲んで、上に小さな英字を置くページの大きな区切り。数を絞って使う

※ 見本は読み上げソフトでは読まれないようにしています。記事の見出しの順番を乱さないよう、見本の中は見出しのタグにしていません（コピペ用のコードは h2 です）。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-hd は、サイトのほかのデザインと名前がぶつからないようにするための目印です。文字の大きさや色は、サイトに合わせて変えてください。

1. 左に太い線を引く

border-left（左側だけの線）で、見出しの左に太い線を1本引きます。padding-left で文字と線のあいだをあけています。見出しが2行になっても、線は2行分の高さに伸びます。

HTML
<h2 class="kd-hd-bar">お問い合わせの流れ</h2>
CSS
.kd-hd-bar {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
  padding: 4px 0 4px 14px;
  /* 左に太い線を1本 */
  border-left: 6px solid #0284C7;
}

2. 下線の一部だけ色を変える

見出しの下に、薄い灰色の線（border-bottom）を全体に引き、その左側だけに濃い青の短い線を重ねます。短い線は ::after（要素の中の最後に、CSSだけで小さな部品を足す指定）で作り、position: absolute で薄い線の真上に置いています。

HTML
<h2 class="kd-hd-under">サービスの特長</h2>
CSS
.kd-hd-under {
  position: relative;
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
  padding-bottom: 10px;
  /* 下に薄い線を全体に */
  border-bottom: 2px solid #DCE4EA;
}
/* 左の一部だけ、濃い線を重ねる */
.kd-hd-under::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  border-top: 2px solid #0284C7;
}

3. 蛍光ペンのようなマーカーを引く

文字を span で囲み、背景に linear-gradient（色が切りかわる帯を作る指定）を敷きます。上から60%までは transparent（透明）、60%から下だけ薄い青にすると、文字の下半分にペンで線を引いたように見えます。

HTML
<h2 class="kd-hd-mark"><span>3つのプランから選べます</span></h2>
CSS
.kd-hd-mark {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}
.kd-hd-mark span {
  padding: 0 4px;
  /* 上から60%までは透明、そこから下だけ薄い青 */
  background: linear-gradient(transparent 60%, #BAE6FD 60%);
  /* 2行になったとき、行ごとに左右の余白を付ける */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

4. 文字の両側に線を引く

見出しを display: flex（中身を横に並べる指定）にして、::before と ::after で文字の前と後ろに線を足します。線に flex: 1（残りの幅を分け合う指定）を付けると、文字の長さに合わせて、線が左右の残りの幅いっぱいに伸びます。

HTML
<h2 class="kd-hd-side">よくある質問</h2>
CSS
.kd-hd-side {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
  text-align: center;
}
/* 文字の前と後ろに、残りの幅いっぱいの線 */
.kd-hd-side::before,
.kd-hd-side::after {
  content: "";
  flex: 1;
  min-width: 24px;
  border-top: 2px solid #0284C7;
}

5. 枠で囲んで、上に小さな英字を置く

見出しのまわりを border と border-radius（角の丸み）で囲みます。上の小さな英字は position: absolute で枠線の上に重ね、ページの背景と同じ白い背景を付けて、下の線を隠しています。英字は飾りなので、aria-hidden="true"（読み上げソフトに読ませない属性）を付けています。

HTML
<h2 class="kd-hd-box">
  <span class="kd-hd-en" aria-hidden="true">SERVICE</span>
  サービス内容
</h2>
CSS
.kd-hd-box {
  position: relative;
  margin: 14px 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
  padding: 16px 20px 12px;
  /* 文字のまわりを角丸の枠で囲む */
  border: 2px solid #0284C7;
  border-radius: 10px;
}
/* 枠の上の線にかぶせる、小さな英字 */
.kd-hd-en {
  position: absolute;
  top: -0.9em;
  left: 14px;
  padding: 0 8px;
  /* ページの背景と同じ色で、下の枠線を隠す */
  background: #FFFFFF;
  font-size: 12px;
  letter-spacing: .14em;
  line-height: 1.6;
  color: #0369A1;
}

WordPressのブロックエディターでは、見出しブロックを選んで、右側の設定の「高度な設定」にある「追加 CSS クラス」に kd-hd-bar のようにクラス名を入れると、その見出しにだけ飾りが付きます。テーマがもともと見出しに飾りを付けている場合は、テーマの飾りと重なります。その場合は、テーマの飾りを打ち消すCSSを、同じクラスに足します。

CSS（テーマの飾りと重なるとき）
.entry-content h2.kd-hd-bar {
  /* テーマの飾りを打ち消すCSSを、ここに足す */
}

仕組み：線・帯・枠は、どれも「箱のまわり」の指定

左線と枠は border だけで描ける

見出しのタグは、画面の上では横に長い「箱」です。1の border-left はその箱の左側だけに、5の border は箱の4辺に線を引きます。線と文字のあいだは padding（箱の内側の余白）で決まります。線は箱の高さに合わせて伸びるので、見出しが2行になっても、線の長さを調べ直す必要はありません。

短い線や両側の線は ::before・::after で足す

2の短い青い線や、4の両側の線は、HTMLには書いていません。::before・::after は、要素の中の最初と最後に、CSSだけで部品を1つずつ足す指定です。content: ""（中身は空）を書かないと表示されない点に気をつけます。足した部品に線を引くことで、見出しのタグ1つのまま、線を2本・3本と増やせます。

2では、見出しを position: relative（中の部品を置く基準にする指定）にして、::after を position: absolute で左下に置いています。bottom: -2px は、薄い線（2px）とちょうど重なる位置です。

マーカーは「透明から色へ」をはっきり切りかえる

3の linear-gradient(transparent 60%, #BAE6FD 60%) は、上から下へ色が変わる帯です。同じ60%の位置に透明と薄い青を置いているので、色がぼやけずに、くっきり切りかわります。帯は文字の背景に敷くので、文字の色やコントラストはそのまま残ります。

見出しのタグに直接帯を敷くと、文字のない右側の余白まで塗られます。文字を span で囲んで、span に帯を敷くのはこのためです。span のような行の中の要素は、2行になると行ごとに分かれて背景が付くので、マーカーも行ごとに引かれます。box-decoration-break: clone は、2行目以降の端にも左右の余白（padding）を付ける指定です。MDNでは、一部のブラウザでは使えない「Limited availability」とされていますが、使えないブラウザでも、行の端の余白が少し狭くなるだけで、マーカー自体は表示されます。

両側の線は flex: 1 で残りの幅を分け合う

4では、見出しの中に「線・文字・線」の3つが横に並びます。2本の線に flex: 1 を付けると、文字の幅を引いた残りを、2本の線が半分ずつ分け合います。見出しの文字を長くしても短くしても、文字はいつも真ん中に来ます。

数値を変えるとどうなるか

左の線の太さ

2px：細くて目立たない
6px：目安
14px：線が主役になる

2px（左）は、本文の中で見出しの目印としては弱く感じます。14px（右）は線のほうが先に目に入り、見出しの文字より線が主役になります。本文の見出しは、文字の大きさの4分の1前後（今回は22pxの文字に6px）が目安です。

マーカーの高さ

85%：細い下線に近い
60%：目安
0%：全体を塗る

85%（左）は、マーカーというより太めの下線に見えます。0%（右）は文字全体を塗るので、ボタンやラベルのように見えて、押せるものと間違えられやすくなります。文字の下半分から下3分の1くらい（60〜70%）が、ペンで引いたように見える範囲です。

下線の濃い部分の長さ

32px：控えめ
64px：目安
100%：全部が濃い線

濃い部分を全体（右）にすると、薄い線を重ねた意味がなくなり、普通の下線になります。32px〜64pxくらいの短い線にすると、見出しの書き出しに目が行きやすくなります。

変えるところ指定今回の値目安
左の線の太さborder-left6px文字の大きさの4分の1前後
マーカーの高さlinear-gradient の％60%60〜70%（下3分の1〜半分）
濃い線の長さ::after の width64px32〜64px
両側の線と文字の間gap16px文字の大きさの半分〜1文字分

スマホと、見る人への配慮

両側の線は、長い見出しで消える

なし：線が消える
24px：線が残る

4の見出しは、文字が長くてスマホで2行になると、文字が幅を使い切って、線が短くなります。min-width（これより短くしない幅）がないと、線は幅0まで縮んで見えなくなります（左）。コピペ用のコードでは min-width: 24px を付けて、少なくとも24pxは線を残しています（右）。それでも、2行に折り返した見出しの両側に線があると、まとまりが悪く見えます。両側の線は、スマホでも1行に収まる短い見出しに使います。

飾りは「強制カラーモード」でも崩れにくくする

Windowsの「コントラスト テーマ」のように、OSが決めた少ない色だけで画面を表示する設定（強制カラーモード）があります。MDNによると、この設定では線の色や背景色がOSの決めた色に置きかわり、グラデーションのような background-image は表示されません。

今回の線は、すべて border で描いているので、強制カラーモードでも線として残ります。もし2の短い線を background-color で描くと、背景色が置きかわって見えなくなることがあります。3のマーカーはこの設定では消えますが、見出しの文字は残るので、内容が読めなくなることはありません。マーカーは飾りであって、意味を伝える役目を持たせない、という前提で使います。

文字の色とコントラスト

見本の見出しの文字（#10283A）は、白い背景との明るさの差が約15対1、マーカーの薄い青の上でも約11対1です。5の小さな英字は12pxと小さいので、KAKERUブルー（#0EA5E9、白い背景で約2.8対1）ではなく、濃い青（#0369A1、約5.9対1）にしています。マーカーを濃い色にするほど文字が読みにくくなるので、マーカーは薄い色を選びます。

見出しのタグは、順番のために使う

読み上げソフトには、見出しだけを順にたどって、読みたい場所を探す使い方があります。W3Cの解説では、見出しは h1〜h6 の順番で入れ子にし、h2 の次にいきなり h4 を置くような段の飛ばし方は避けるように書かれています。「この飾りは h4 に付いているから h4 を使う」という選び方をすると、ページの組み立てが読み上げで伝わらなくなります。飾りはクラスで付けて、タグは文章の順番で選びます。

同じ理由で、5の英字には aria-hidden="true" を付けています。付けないと、読み上げでは「SERVICE サービス内容」と、同じ意味の言葉が2回続きます。

やりすぎ注意

飾りの種類を増やすと、どれが大きな区切りで、どれが小さな区切りなのかが分からなくなります。1ページの中では、h2 に1種類、h3 に1種類くらいに絞ります。枠で囲む見出し（5）は、存在感が強いので、ページの大きな区切りの数か所だけに使います。

トミー

見出しの飾りは、かっこよさより「読む人が迷わないか」で選びたい部品です。
本文を流し読みしたとき、h2 と h3 の違いがひと目で分かれば、それで十分です。

AIに頼むなら

見出しの飾りは、Claudeなどの生成AIに頼むとすぐ作ってもらえます。そのときは「どの段の見出しか」「線の色と太さ」「テーマとの重なり」まで伝えると、手直しが少なく済みます。

WordPressの h2 に、左に6pxの線（#0284C7）が付く見出しのCSSを作って。クラス名は kd-hd-bar。
h3 は、下に薄い灰色の線＋左だけ64pxの濃い青の線にして。線は border で描いて。
テーマの h2 の飾り（背景色・::before）を打ち消すCSSも付けて。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • h2 や h3 の全部に効く書き方になっていないか。h2 { … } のようにタグ名だけで書くと、サイドバーやフッターの見出しまで同じ飾りになります。クラス名を付けた見出しにだけ効く形に直します
  • 線を background で描いていないか。短い線や両側の線を background-color で描くと、強制カラーモードで見えなくなることがあります。border で描く形にします
  • スマホ幅で、長い見出しが崩れないか。両側の線や、横に並べた飾りは、2行に折り返したときに崩れやすい部分です。いちばん長い見出しを入れて、スマホの幅で確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • 本文の h2 と h3 の見分け。h2 は左の線（1）、h3 は下線（2）のように、段ごとに飾りを決めて、サイト全体で同じにします。飾りがそろっていれば、読む人は飾りの形で段の違いを見分けられます
  • トップページやLPの、短い区切りの見出し。「よくある質問」「料金」のような短い見出しには、両側の線（4）や、英字つきの枠（5）が合います。ページを大きく区切る場所にだけ使います
  • キャンペーンページの、ひと言の強調。くだけた雰囲気のページでは、マーカー（3）が合います。見出しの中の、いちばん伝えたい言葉だけに引きます

使わない場面

  • 目立たせたい文を、見出しのタグで囲むこと。本文の中で強調したい1文は、見出しではありません。strong や、段落にクラスを付けて飾ります
  • 1ページに何種類もの飾りを混ぜること。5種類を全部使うと、区切りの大きさが伝わらなくなります。今回の5種類は「選ぶための見本」として見てください
  • 長い見出しへの両側の線。スマホで2行になる見出しには、左の線か下線を選びます
トミー

KAKERUなら、サイトを作り始めるときに「h2 はこの飾り、h3 はこの飾り」と1枚の見本にまとめておきます。
あとからページを足す人も、同じ見出しを選ぶだけで、サイト全体の見た目がそろいます。

まとめ

  • 見出しの飾りは、border・::before・::after・linear-gradient だけで、画像なしで作れる
  • 左の線や枠は border で描くと、見出しが2行になっても線が伸びる
  • マーカーは文字を span で囲み、linear-gradient で透明から薄い色へくっきり切りかえる
  • 両側の線は flex: 1 で残りの幅を分け合う。min-width を付けて、長い見出しには使わない
  • 線は background でなく border で描くと、強制カラーモードでも残る
  • 飾りは段（h2・h3）ごとに1種類。飾りのために見出しのタグを選ばない

まずは1のコードをコピーして、自分のサイトの h2 に付けてみてください。そのあと、線の太さや色を少しずつ変えると、見出しの「目立ちすぎ」と「目立たなさすぎ」の間がつかめます。

参考にした資料

いずれも2026年10月29日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

下線が伸びるリンクをCSSだけで コピペで使える5種類と、文章の中のリンクの注意点
関連記事下線が伸びるリンクをCSSだけで｜コピペで使える5種類と、文章の中のリンクの注意点
グラデーションの文字をCSSだけで コピペで使える5種類と、読みやすさを守る使い方
関連記事グラデーションの文字をCSSだけで｜コピペで使える5種類と、読みやすさを守る使い方
文字の縁取り・袋文字をCSSだけで コピペで使える5種類と、太くしてもやせない書き方
関連記事文字の縁取り・袋文字をCSSだけで｜コピペで使える5種類と、太くしてもやせない書き方
吹き出しをCSSだけで作る。しっぽの形と使いどころ
関連記事吹き出しをCSSだけで作る｜コピペで使える4種類と、しっぽの作り方・使いどころ

次に読む

無料の道具（登録なし）KAKERU TOOLS｜仕事の「ちょっと面倒」を、道具で減らす。WEB技術・前の回ダークモードにCSSで対応する｜prefers-color-scheme・color-scheme・light-dark()と切りかえボタン、コピペ4種類
見出しの飾りをCSSで作る。左線・下線・マーカー・両側の線の見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA