CSS list-styleプロパティの便利ワザとデザイン活用法

はじめに

CSSのlist-styleプロパティは、リスト（ulやol、liなど）の見た目を簡単にカスタマイズできる便利なプロパティです。
デフォルトのリストスタイルはシンプルですが、list-styleを活用することで、デザイン性の高いリストに変身させることができます。
この記事では、list-styleの基本からおしゃれなアレンジ、応用テクニックまで紹介します。

使いどころ

• メニューやナビゲーションのデザイン
• サイト内の手順説明や注意事項リスト
• FAQやToDoリスト
• カードやパネル内のリスト装飾

style.css

ul {
  list-style: disc inside;
}

index.html

<ul>
  <li>１番目</li>
  <li>２番目</li>
  <li>３番目</li>
</ul>

list-styleは、簡単な指定だけで見た目をがらりと変えることができます。

おしゃれな使い方

1. アイコンを使ったリスト

style.css

ul {
  list-style: none;
  padding-left: 0;
}
ul li::before {
  content: "✔️";
  margin-right: 8px;
  color: #2ecc71;
}

チェックマークや好きな絵文字・アイコンをリストマーカーとして使うだけで、一気に雰囲気が変わります。

2. カスタム画像をマーカーにする

style.css

ul {
  list-style: url('star_16x16.png') inside;
}

独自の画像を使ってリストを目立たせることもできます。

3. 番号付きリストのデザイン変更

style.css

ol {
  list-style: decimal-leading-zero inside;
}

index.html

<ol>
  <li>１番目</li>
  <li>２番目</li>
  <li>３番目</li>
</ol>

先頭に0をつけた連番なども簡単に表現できます。

応用的な使い方

1. 擬似要素と組み合わせてデザインを拡張

style.css

ul {
  list-style: none;
  padding-left: 0;
}
ul li {
  position: relative;
  padding-left: 24px;
}
ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  border-radius: 50%;
}

CSSだけでカラフルなマーカーを表現できます。

2. 階層ごとにマーカーを変える

style.css

ul {
  list-style: square;
}
ul ul {
  list-style: circle;
}
ul ul ul {
  list-style: disc;
}

index.html

<ul>
  <li>
    日本
    <ul>
      <li>
        東日本
        <ul>
          <li>東京</li>
        </ul>
      </li>
      <li>
        西日本
      </li>
    </ul>
  </li>
  <li>アメリカ</li>
  <li>台湾</li>
</ul>

入れ子リストの階層ごとにマーカーを変えられます。

最後に

list-styleプロパティを使えば、リストの表現の幅が大きく広がります。
基本的な使い方から応用テクニックまで活用して、あなたのWebデザインをより魅力的に仕上げましょう！