CSSだけで見出しをおしゃれに装飾する方法｜擬似要素とレスポンシブ対応まで解説

2025年11月29日

ハシビィくん

タイトルがシンプルなデザインすぎて装飾して、目立たせる工夫がしたいっす！

カピーさん

それなら擬似要素を使ってみるのがいいだろう。工夫次第で色々できるから覚えておくといいぞ。

＼見出し部分／を作ってみる

見出し部分を装飾してみた完成系は以下のようになります。基本形です。

See the Pen Untitled by honky (@honky-the-typescripter) on CodePen.

まずは基本となるHTML部分を。

<h1>見出しタイトル</h1>

そして次は根幹のCSS部分になります。コピペ後に改修していただくことも可能です。あくまでベースと捉えてください。

body {
  text-align: center;
}

h1 {
  display: inline-block;
  position: relative;
  font-size: 24px;
  color: #000;
  padding: 0 20px; /* 余白をしっかり確保して重なりを防ぐ */
}

/* 共通スタイル */
h1::before,
h1::after {
  content: "";
  position: absolute;
  background: #000;
  width: 30px;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}

/* 左の斜線 */
h1::before {
  left: -40px;
  transform: translateY(-50%) rotate(45deg);
}

/* 右の斜線 */
h1::after {
  right: -40px;
  transform: translateY(-50%) rotate(-45deg);
}

/* --- レスポンシブ対応版 --- */

/* スマホ（幅 480px 以下）*/
@media (max-width: 480px) {
  h1 {
    font-size: 20px;
  }
  h1::before,
  h1::after {
    width: 20px;
  }
  h1::before {
    left: -28px;
  }
  h1::after {
    right: -28px;
  }
}

/* タブレット（幅 768px 以下）*/
@media (max-width: 768px) {
  h1 {
    font-size: 22px;
  }
  h1::before,
  h1::after {
    width: 26px;
  }
  h1::before {
    left: -34px;
  }
  h1::after {
    right: -34px;
  }
}

このスタイルでは、h1 要素の左右に疑似要素 ::before と ::after を使って斜めの線を配置し、見出しを装飾しています。基本的な構造は問題ありませんが、より安定した表示にするためにいくつか改善点があります。

まず、疑似要素の縦位置を top: 50% と transform: translateY(-50%) の組み合わせにすると、フォントサイズが変わった場合でも装飾の位置がずれにくくなります。また、h1 本体に左右の余白を適度に持たせることで、文字と装飾が重なるのを防ぎやすくなります。

さらに、画面幅が狭いスマートフォンやタブレットでは、文字サイズや斜線の長さがそのままだとバランスが崩れることがあります。そのため、メディアクエリを使ってフォントサイズや斜線の長さ、位置を小さく調整し、どの画面幅でも見やすいレイアウトにしています。

このように疑似要素の基本構造はそのまま活かしつつ、位置調整とレスポンシブ対応を行うことで、より汎用性が高く安定した見出し装飾になります。

まとめ：CSSだけで見出しをおしゃれに装飾する方法｜擬似要素とレスポンシブ対応まで解説

CSS の擬似要素を使えば、画像を使わずに見出しをおしゃれに装飾できます。::before と ::after を組み合わせるだけで、軽量でカスタマイズ性の高いデザインを実現できるのが魅力です。さらにレスポンシブ対応の書き方を取り入れることで、PC・スマホどちらでも崩れにくい見出しが作れます。記事内のコードを参考に、あなたのサイトに合った見た目へアレンジしてみてください。

CSSだけで見出しをおしゃれに装飾する方法｜擬似要素とレスポンシブ対応まで解説