MENU

リスト01

Figma
  1. ホーム
  2. Figma
  3. リスト01
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

list01：擬似要素（::before）によるカスタムアイコンの実装

ポイント: デフォルトのリスト記号（黒丸など）を使わず、::before 擬似要素でデザインカンプ通りのオリジナルアイコンを表示させています。

.item01 {
  display: flex;
  align-items: center; /* アイコンと文字を垂直中央揃え */
  gap: 6px;
}

.item01::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("../img/icon-check.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

解説: ::before を使い、CSS側からチェックアイコンを挿入しています。ポイントは content: "" を空で指定し、display: inline-block（または flex）で幅と高さを持たせることです。これにより、HTML側に画像タグを書くことなく、装飾としてのアイコンを制御でき、メンテナンス性が向上します。

list02：CSSカウンターによる自動ナンバリング

ポイント: 数字をHTMLに直接入力するのではなく、CSSの counter 機能を使い、リストの順番に合わせて自動で数字を振るようにしています。

.list02 {
  counter-reset: item-counter; /* カウンターをリセット（初期化） */
}

.item02 {
  counter-increment: item-counter; /* 項目ごとにカウントアップ */
}

.item02::before {
  content: "0" counter(item-counter) "."; /* 「0」を付与して表示 */
}

/* 10番目以降は「0」を取る処理 */
.item02:nth-of-type(9) ~ .item02::before {
  content: counter(item-counter) ".";
}

解説: デザインカンプで「01. 02.」のように桁数が揃えられている場合、通常の <ol> タグだけでは再現が困難です。ここでは counter-increment を使い、CSS内部で変数（item-counter）をカウントアップさせています。また、content プロパティ内で "0" と counter() を組み合わせることで、「01.」という形式を実現しました。さらに ~（一般兄弟結合子）を活用し、10個目以降のアイテムからは「0」を消しています。

Figma
目次