CSSでカスタムリストスタイルを実装して独自のデザインを作る方法

はじめに

ウェブデザインでは、リストの見た目をカスタマイズすることが、デザインの一貫性や独自性を高めるために重要です。CSSには、リストのマーカー（番号や記号）を自由にカスタマイズできる「カウンタースタイル」という機能があります。今回は、このカウンタースタイルを使って、ユニークなリストデザインを作る方法をご紹介します。

カウンタースタイルとは？

カウンタースタイルとは、CSSでリストのマーカー（通常は番号や箇条書きの記号）を自由にカスタマイズするための機能です。通常、リストのマーカーはデフォルトの番号や黒い点で表示されますが、@counter-styleを使うことで、任意の文字やシンボルを使ったり、色やフォントスタイルを変えることができます。これにより、デザインの自由度が大幅に向上し、ウェブサイトのテーマやスタイルに合わせたオリジナルのリストを作成することができます。

カスタムリストスタイルのHTMLとCSSコード

ここでは、カスタムリストスタイルを実装するためのHTMLとCSSのコード例を示します。以下のコードでは、リストの項目として「技術的なフレーズ」を使用し、リストのマーカーに独自のカスタム記号を利用します。

<ul>
  <li>インターフェースを磨く</li>
  <li>アルゴリズムを最適化する</li>
  <li>データの正規化を進める</li>
  <li>API設計を洗練させる</li>
  <li>セキュリティを強化する</li>
</ul>

<style>
  /* カスタムカウンタースタイルを定義 */
  @counter-style custom-counter {
    system: cyclic;
    symbols: "★" "☆" "○" "●" "▲"; /* リストマーカーに使う記号 */
    suffix: " "; /* マーカーの後にスペースを追加 */
  }

  /* リスト全体のスタイルを設定 */
  ul {
    list-style: custom-counter; /* カスタムカウンタースタイルを適用 */
  }

  /* リスト項目のマーカースタイルを設定 */
  li::marker {
    color: #d9534f; /* マーカーの色を設定 */
    font-size: 1.2em; /* マーカーのサイズを設定 */
    font-weight: bold; /* マーカーの太字を設定 */
  }
</style>

コードの解説

1. カスタムカウンタースタイルの定義 (@counter-style)

@counter-style custom-counter {
  system: cyclic;
  symbols: "★" "☆" "○" "●" "▲";
  suffix: " ";
}

@counter-styleは、CSSでカスタムカウンタースタイルを定義するためのルールです。ここでは「custom-counter」という名前のスタイルを定義しています。system: cyclic;は、リストが繰り返されるたびに指定したシンボルを順番に繰り返すよう設定します。

symbolsプロパティでは、リストのマーカーとして使用したい記号を指定します。この例では、「★」「☆」「○」「●」「▲」の5つの記号を順番に使用しています。

suffixプロパティは、マーカーの後ろに続く文字（ここではスペース）を指定します。これにより、マーカーとリストテキストの間に適切な余白が設けられます。

2.リストのスタイル (ul)

ul {
  list-style: custom-counter;
}

ul要素に対して、先ほど定義した「custom-counter」というカウンタースタイルを適用しています。これにより、リスト項目にカスタムマーカーが表示されます。

3.リストマーカーのスタイル (li::marker)

li::marker {
  color: #d9534f;
  font-size: 1.2em;
  font-weight: bold;
}

::marker擬似要素を使って、リストマーカーのスタイルを変更します。color: #d9534f;でマーカーの色を赤にし、font-size: 1.2em;で少し大きくし、font-weight: bold;で太字に設定しています。

まとめ

カウンタースタイルを使うことで、リストのデザインを大幅にカスタマイズし、ウェブサイトのテーマやトーンに合わせた独自のスタイルを作ることができます。ぜひ、この記事の内容を参考にして、あなたのプロジェクトにもこの技術を取り入れてみてください！