MENU

見出し

Figma
  1. ホーム
  2. Figma
  3. 見出し
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

title04：背景機能で作る「縦線」の装飾

ポイント: 疑似要素や新しいタグを使わず、背景の設定だけで左側にアクセントラインを入れています。

.title04 {
  background-image: linear-gradient(
    var(--color-nord12) 50%,
    var(--color-nord13) 50%
  );
  background-size: 4px 100%; /* 4px幅の縦線として表示 */
  background-repeat: no-repeat; /* 線が繰り返されるのを防ぐ */
}

解説: 本来は背景をグラデーションにするための linear-gradient ですが、色の境界を50%ずつに分けることで、パキッとした「1つの線」として扱っています。この背景画像を background-size プロパティによって「幅4px・高さ100%」に指定し、細長い棒状に引き伸ばしています。さらに、CSSの背景はデフォルトでタイル状に繰り返される性質があるため、background-repeat で no-repeat を指定して、左端に1本だけ線が置かれるよう制御しています。

title05：擬似要素 ::after で作る中央揃えデザイン

ポイント: 文字の長さに左右されず、常に中央に短い下線を配置するデザインです。

.title05::after {
  content: "";
  display: block;      /* 線を次の行に送る */
  width: 60px;         /* 線の長さ */
  height: 2px;
  margin-top: 15px;
  margin-inline: auto; /* 線自体を中央寄せにする */
}

解説: ::after という「架空の要素（擬似要素）」をCSSで生成することで、HTMLの構造をシンプルに保ったまま装飾を追加しています。通常の下線であれば border-bottom でも実装可能ですが、それだと文字数に合わせて線が伸びてしまいます。そこで、あえて display: block を指定して独立した「箱」として扱い、幅を 60px に固定することで、どんな文字数の見出しでもデザインを崩さないようにしました。仕上げに margin-inline: auto を適用することで、この短い装飾線だけを中央へ配置しています。

Figma
目次