素の見出しは、ただの太い文字。ここにひと工夫あるだけで、ページ全体が締まって見えます。この記事は、定番の見出しデザインを動くデモつきで10個まとめました。コピペして、色を自分のテーマカラーに変えるだけです。
CSS枠線で囲ってみる線の引き方（border）そのものの仕組みは、CSSコースのこの回へ線でひきしめる
シンプルな下線
まずはこれ。下に1本、テーマカラーの線を引くだけで「見出しらしさ」が出ます。
.heading {
border-bottom: 3px solid #ff8a3d;
padding-bottom: 8px;
}padding-bottomで文字と線の間に少しすき間をあけるのがコツです。
左に縦線
線を左に立てると、きりっとした印象に。ビジネス系・お知らせ系のサイトの定番です。
.heading {
border-left: 6px solid #ff8a3d;
padding-left: 14px;
}border-leftの太さとpadding-leftはセットで調整します。線を太くしたら余白も広げると、文字が線にくっつきません。線を#dddのようなグレーにして文字色だけテーマカラーにすると、ぐっと落ち着いた印象になります。
二色の下線
薄い線を全体に引き、左端だけテーマカラーを重ねる——ちょっと上級に見えて、じつは数行です。
.heading {
position: relative;
border-bottom: 3px solid #eee;
padding-bottom: 8px;
}
.heading::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 60px;
height: 3px;
background: #ff8a3d;
}::afterは「要素のうしろに、CSSだけで飾りをひとつ足す」道具。widthを変えると色つき部分の長さが調整できます。
中央に短いアクセント線
中央ぞろえの見出しには、下に短い線をちょこんと。やわらかい雰囲気のサイトに合います。
.heading {
text-align: center;
}
.heading::after {
content: "";
display: block;
width: 44px;
height: 4px;
margin: 10px auto 0;
border-radius: 2px;
background: #ff8a3d;
}塗りでめだたせる
蛍光マーカー
文字の下半分にだけ色をしく、蛍光ペン風。グラデーションを「上半分は透明」にするのがタネです。
.heading {
display: inline;
background: linear-gradient(transparent 60%, #ffe066 60%);
}60%の数字を小さくするとマーカーが太く、大きくすると細くなります。display: inlineがポイントで、こうしておくと折り返した2行目にもマーカーが続きます（blockのままだと、文字ではなく箱ごと塗られてしまいます）。
背景帯
見出し全体に色をしいて、角を丸く。章の区切りがはっきりします。
.heading {
color: #fff;
background: #ff8a3d;
padding: 10px 18px;
border-radius: 8px;
}この帯は横幅いっぱいに広がります。章の区切りにはこのままが向きますが、文字の長さで止めたいときはdisplay: inline-blockを足してください。
ふきだし
下向きの三角を足すと、しゃべっているようなふきだしに。子ども向け・カジュアルなページで活躍します。
.heading {
display: inline-block;
position: relative;
color: #fff;
background: #ff8a3d;
padding: 10px 22px;
border-radius: 999px;
}
.heading::after {
content: "";
position: absolute;
left: 32px;
bottom: -8px;
border: 8px solid transparent;
border-top-color: #ff8a3d;
border-bottom: none;
}三角の正体は「borderの片側だけ色をつけた四角」。leftでしっぽの位置を動かせます。
display: inline-blockが要るのは、<h2>がそのままだと横幅いっぱいに広がってしまうから。これを付けると文字の長さぴったりまで縮んで、ようやく「ふきだし」らしい形になります。
ワンランク上の演出
両側に線
中央の文字の左右から線が伸びる、記念日・特集ページ風。flexで「線・文字・線」を並べています。
.heading {
display: flex;
align-items: center;
gap: 16px;
}
.heading::before,
.heading::after {
content: "";
flex: 1;
height: 2px;
background: #ff8a3d;
}::beforeと::afterの線がflex: 1で左右の残り幅いっぱいに伸びる、という仕組みです。
グラデーション文字
文字そのものをグラデーションで塗る、主役級の演出。トップページの大見出しに1つだけ使うと効果的です。
.heading {
background: linear-gradient(135deg, #ff8a3d, #ff5e78);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}仕組みは「背景のグラデーションを、文字の形で切り抜く」。color: transparentで元の文字色を消すのを忘れずに。
英字をそえる
日本語の見出しの下に小さな英字。おしゃれなカフェ・ポートフォリオサイトの定番です。
.heading span {
display: block;
margin-top: 4px;
font-size: 12px;
letter-spacing: 3px;
color: #ff8a3d;
}HTMLは<h2>じこしょうかい<span>PROFILE</span></h2>のように、英字を<span>で入れておくだけ。letter-spacing（字間）を広げると、ぐっとそれらしくなります。
色をまとめて差し替える
この記事の見本はぜんぶオレンジ（#ff8a3d）ですが、実際は自分のテーマカラーに変えて使います。使う場所が増えてきたら、色に「あだ名」を付けておくと、1か所の変更でページ中の見出しにまとめて効きます。
:root {
--main-color: #ff8a3d; /* ここを変えるだけで全部変わる */
}
.heading {
border-bottom: 3px solid var(--main-color);
}
.heading::after {
background: var(--main-color);
}--main-colorが色のあだ名（CSS変数）、var(--main-color)があだ名で呼び出す書き方です。見出し・ボタン・リンクで同じ変数を使い回すと、サイト全体の色が1行で着せ替えられます。
見出しが変になるときのチェックリスト
コピペしたのに見た目がおかしいときは、たいてい次のどれかです。
::afterの飾りが出ない →content: ""を書き忘れていませんか？空でも必須です- 飾りの位置がずれる・あらぬ場所に飛ぶ →
position: absoluteを使う型は、見出し側にposition: relativeが必要です - マーカーが文字ではなく見出し全体を塗る →
display: inlineになっていますか？blockだと箱ごと塗られます - 上下の余白がちぐはぐ →
h2にはブラウザ標準のmarginが付いています。margin: 40px 0 16pxのように自分で決めると整います
まとめ
- 迷ったら下線か左縦線——数行で「見出しらしさ」が出る、失敗しない2つ
::before/::afterを覚えると、HTMLを変えずに飾り（線・三角・アクセント）を足せる- 派手な演出（グラデ文字・ふきだし）はページに1〜2か所にしぼると上品にまとまる
同じ本文でも、見出しの装いひとつで「作りこまれたページ」に見えます。まずは1つ、テーマカラーで試してみてください。