HTML・CSSの見出しデザイン5選｜コピペで作れる初心者向け実例

HTMLで見出しを作ったものの、文字が大きいだけでは少し物足りないと感じることがありますよね。見出しの意味はHTMLのh1〜h6で表し、下線や背景色などのデザインはCSSで追加します。

この記事では、コピーして試せる見出しデザインを5種類紹介します。どの例も、実際にブラウザで表示したPNG画像、index.html、style.cssを対応させています。

見た目だけでなく、見出しレベルの選び方、スマートフォンでの調整、うまく表示されない原因も解説します。HTML・CSSを学び始めた方でも、記事やサービスサイトへ使える見出しを作れるようになります。

見出しはHTMLで意味、CSSでデザインを付ける

HTMLの見出しにはh1からh6まであります。数字は文字サイズを選ぶためではなく、文章の階層を表すために使います。

<h1>HTML・CSS入門</h1>

<h2>HTMLの基本</h2>
<h3>見出しの書き方</h3>
<h3>段落の書き方</h3>

<h2>CSSの基本</h2>
<h3>文字色の変え方</h3>

• h1：ページ全体の主題となる見出しです。
• h2：ページ内の大きな章を表します。
• h3：h2の内容をさらに分ける小見出しです。

h2の次に見た目を小さくしたいだけでh4へ飛ばすのは避けましょう。階層は内容に合わせ、文字サイズはCSSで調整します。

見出しデザイン5例の一覧

すべての例でクラス名を使います。既存サイトへ追加するときは、他のCSSと重なりにくいクラス名へ変更しても構いません。

一部だけ色が変わる下線の見出し

最初は、見出しの下へ薄い線を引き、その一部だけ濃い青にするデザインです。装飾が控えめなので、長い記事でも使いやすい見た目です。

index.htmlのbodyタグ内へ、heading-underlineクラスを付けた見出しを記述します。

<h2 class="heading-underline">サービスの特徴</h2>

style.cssの末尾へ次のCSSを追加します。::afterはHTMLへ新しいタグを書かずに、装飾用の線を作る疑似要素です。

.heading-underline {
  position: relative;
  margin: 0;
  padding-bottom: 16px;
  font-size: 2.125rem;
  border-bottom: 4px solid #dbeafe;
}

.heading-underline::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 120px;
  height: 4px;
  content: "";
  background-color: #2563eb;
}

親となる見出しへposition: relative;を指定すると、疑似要素の位置を見出し自身を基準にできます。青い部分の長さはwidth: 120px;で調整してください。

左線と淡い背景の見出し

左側へ太い線を付け、右へ向かって背景が白くなるデザインです。文字の読みやすさを保ちながら、見出しの開始位置をはっきり示せます。

<h2 class="heading-left">サービスの特徴</h2>

.heading-left {
  margin: 0;
  padding: 12px 18px;
  font-size: 2.125rem;
  background: linear-gradient(90deg, #eff6ff, #ffffff);
  border-left: 8px solid #2563eb;
}

border-leftは「太さ・線の種類・色」の順で指定しています。線が表示されないときは、solidなどの線種を書き忘れていないか確認しましょう。

背景色と白文字の見出し

章の切り替わりを強く見せたい場合は、見出し全体へ背景色を付けます。濃い青と白文字を組み合わせると、色の差がはっきりします。

<h2 class="heading-bg">サービスの特徴</h2>

.heading-bg {
  margin: 0;
  padding: 18px 24px;
  color: #ffffff;
  font-size: 2.125rem;
  background-color: #1d4ed8;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgb(29 78 216 / 18%);
}

paddingで文字と背景の端に余白を作り、border-radiusで角を丸めています。背景色を変える場合は、文字とのコントラストが十分かも確認してください。

ラベルと横線を組み合わせた見出し

「POINT 01」のようなラベルを付けると、手順や特徴を番号付きで見せられます。横線が残りの幅へ自動で伸びるため、画面幅が変わっても整いやすいデザインです。

この例だけは、ラベルと見出し文字を分けるため、h2の中にspanとstrongを入れます。見出し全体の意味はh2が持ちます。

<h2 class="heading-label">
  <span>POINT 01</span>
  <strong>サービスの特徴</strong>
</h2>

.heading-label {
  display: grid;
  gap: 9px;
  margin: 0;
  font-size: 2.125rem;
}

.heading-label span {
  width: fit-content;
  padding: 5px 11px;
  color: #1d4ed8;
  background-color: #dbeafe;
  border-radius: 999px;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}

.heading-label strong {
  display: flex;
  align-items: center;
  gap: 18px;
}

.heading-label strong::after {
  flex: 1;
  height: 2px;
  content: "";
  background-color: #bfdbfe;
}

flex: 1;によって疑似要素が残りの幅を使い、横線になります。見出しが長い場合は線が短くなり、スマートフォンでは必要に応じて改行されます。

吹き出し型の見出し

質問や読者の悩みを提示するときには、吹き出し型の見出しも使えます。三角形は画像ではなく、2つの疑似要素の枠線で作っています。

<h2 class="heading-balloon">
  こんなお悩みはありませんか？
</h2>

.heading-balloon {
  position: relative;
  margin: 0 0 24px;
  padding: 22px 26px;
  font-size: 2.125rem;
  background-color: #fff7d6;
  border: 2px solid #f4c430;
  border-radius: 14px;
}

.heading-balloon::before,
.heading-balloon::after {
  position: absolute;
  left: 44px;
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
}

.heading-balloon::before {
  bottom: -18px;
  border-width: 18px 15px 0;
  border-color: #f4c430 transparent transparent;
}

.heading-balloon::after {
  bottom: -14px;
  margin-left: 2px;
  border-width: 15px 13px 0;
  border-color: #fff7d6 transparent transparent;
}

::beforeで黄色い外枠、少し小さい::afterで背景色の内側を作り、枠付きの三角形に見せています。三角形の位置はleft、大きさはborder-widthで調整できます。

スマートフォンで見出しを調整する

パソコンでちょうどよい文字サイズも、スマートフォンでは大きすぎて不自然に改行されることがあります。画面幅に合わせて値が変わるclamp()を使うと、最小と最大を保ちながら調整できます。

.heading-underline,
.heading-left,
.heading-bg,
.heading-label,
.heading-balloon {
  overflow-wrap: anywhere;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
}

この指定では、文字サイズが最小1.5rem、最大2.125remの範囲で変化します。overflow-wrap: anywhere;は、長い英単語やURLが見出しからはみ出す場合の予防になります。

見出しデザインが反映されないときの対処方法

HTMLとCSSのクラス名が違う

HTMLのclass="heading-left"に対して、CSSは先頭にピリオドを付けた.heading-leftと書きます。ハイフン、スペル、大文字・小文字まで確認してください。

線が表示されない

borderでは、色と太さだけでなくsolidなどの線種も必要です。疑似要素の場合はcontent: "";があるか、幅と高さが0になっていないかも確認します。

疑似要素の位置がずれる

疑似要素へposition: absolute;を使う場合、基準にしたい見出しへposition: relative;を指定します。これがないと、別の祖先要素やページ全体を基準に配置されることがあります。

テーマのCSSに上書きされる

WordPressではテーマが見出し用CSSを持っていることがあります。ブラウザの開発者ツールで対象のh2を選択し、どのCSSが適用・上書きされているか確認してください。

見出しを読みやすくする注意点

• 本文と区別できる大きさ・太さ・余白を確保します。
• 文字と背景のコントラストを十分に取ります。
• 長すぎる見出しは簡潔な表現に整えます。
• 装飾を増やしすぎず、同じ階層ではデザインを統一します。
• 見出し順序はデザインではなく内容の階層で決めます。

HTMLの基本的な書き方や、見出しを含む文書構造を確認したい場合は、次の記事も参考にしてください。

HTMLの見出しデザインまとめ

見出しの意味と階層はHTMLのh1〜h6で表し、線・背景・角丸・吹き出しなどのデザインはCSSで追加します。まずはシンプルな下線や左線から試すと、各プロパティの役割を理解しやすくなります。

デザインを追加したあとは、パソコンとスマートフォンの両方で改行、余白、コントラストを確認してください。見出し階層を崩さず、同じレベルの見た目を揃えると、読み手が内容を追いやすいページになります。