CSS見出しデザインのコピペ集10選（下線・マーカー・ふきだし・グラデ文字）

素の見出しは、ただの太い文字。ここにひと工夫あるだけで、ページ全体が締まって見えます。この記事は、定番の見出しデザインを動くデモつきで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;
}

二色の下線

薄い線を全体に引き、左端だけテーマカラーを重ねる——ちょっと上級に見えて、じつは数行です。

.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%の数字を小さくするとマーカーが太く、大きくすると細くなります。

背景帯

見出し全体に色をしいて、角を丸く。章の区切りがはっきりします。

.heading {
  color: #fff;
  background: #ff8a3d;
  padding: 10px 18px;
  border-radius: 8px;
}

ふきだし

下向きの三角を足すと、しゃべっているようなふきだしに。子ども向け・カジュアルなページで活躍します。

.heading {
  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でしっぽの位置を動かせます。

ワンランク上の演出

両側に線

中央の文字の左右から線が伸びる、記念日・特集ページ風。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（字間）を広げると、ぐっとそれらしくなります。

まとめ

迷ったら下線か左縦線——数行で「見出しらしさ」が出る、失敗しない2つ
::before/::afterを覚えると、HTMLを変えずに飾り（線・三角・アクセント）を足せる
派手な演出（グラデ文字・ふきだし）はページに1〜2か所にしぼると上品にまとまる

べんりワザコピペで使えるCSSボタンデザイン集見出しがきまったら、次はボタン。コピペで使えるボタンデザイン集へ

同じ本文でも、見出しの装いひとつで「作りこまれたページ」に見えます。まずは1つ、テーマカラーで試してみてください。

コピペで使えるCSS見出しデザイン集