list-styleプロパティは何に使用されますか？

list-styleプロパティは、リストアイテムのマーカーや記号の種類、位置などを設定するために使用されます。

list-styleの主な値にはどのようなものがありますか？

list-styleの主な値には、list-style-type、list-style-position、list-style-imageがあります。

list-style-imageを使用するとどのような効果がありますか？

list-style-imageを使用すると、リストアイテムのマーカーをカスタム画像に置き換えることができます。

【CSS】list-styleプロパティの使い方

概要

list-styleプロパティは、CSSでリストのマーカー（箇条書きの記号や番号）をカスタマイズするためのショートハンドプロパティです。<ul>（順不同リスト）、<ol>（順序付きリスト）の見た目を自由に変更できます。

この記事では、list-styleの基本的な使い方から、実践的なカスタマイズパターン、モダンなスタイリング手法まで詳しく解説します。

list-styleの基本

list-styleは、以下の3つのサブプロパティを一括で指定できるショートハンドプロパティです。

サブプロパティ	役割
`list-style-type`	マーカーの種類（ディスク、数字など）
`list-style-position`	マーカーの位置（内側か外側）
`list-style-image`	マーカーに使用する画像

基本構文

/* ショートハンド */
list-style: <type> <position> <image>;

/* 各プロパティを個別に指定 */
list-style-type: disc;
list-style-position: outside;
list-style-image: none;

/* グローバル値 */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

list-style-type の詳細

マーカーの種類を指定するプロパティです。

順不同リスト（ul）向けの値

/* 塗りつぶしの円（デフォルト） */
ul { list-style-type: disc; }

/* 白抜きの円 */
ul { list-style-type: circle; }

/* 四角形 */
ul { list-style-type: square; }

/* マーカーなし */
ul { list-style-type: none; }

順序付きリスト（ol）向けの値

/* 数字（デフォルト） */
ol { list-style-type: decimal; }

/* ゼロ埋め数字（01, 02, 03...） */
ol { list-style-type: decimal-leading-zero; }

/* 小文字ローマ数字（i, ii, iii...） */
ol { list-style-type: lower-roman; }

/* 大文字ローマ数字（I, II, III...） */
ol { list-style-type: upper-roman; }

/* 小文字アルファベット（a, b, c...） */
ol { list-style-type: lower-alpha; }

/* 大文字アルファベット（A, B, C...） */
ol { list-style-type: upper-alpha; }

/* 小文字ギリシャ文字（α, β, γ...） */
ol { list-style-type: lower-greek; }

日本語・東アジア向けの値

/* 日本語ひらがな（あ, い, う...） */
ol { list-style-type: hiragana; }

/* 日本語カタカナ（ア, イ, ウ...） */
ol { list-style-type: katakana; }

/* 漢数字（一, 二, 三...） */
ol { list-style-type: cjk-ideographic; }

/* 韓国語 */
ol { list-style-type: korean-hangul-formal; }

使用例

<ul class="features">
  <li>高速なパフォーマンス</li>
  <li>使いやすいインターフェース</li>
  <li>24時間サポート</li>
</ul>

<ol class="steps">
  <li>アカウントを作成</li>
  <li>プランを選択</li>
  <li>支払い情報を入力</li>
  <li>サービス開始</li>
</ol>

.features {
  list-style-type: square;
}

.steps {
  list-style-type: decimal-leading-zero;
}

list-style-position の詳細

マーカーの位置を指定するプロパティです。

outside（デフォルト）

マーカーがリストアイテムのボックスの外側に表示されます。

ul {
  list-style-position: outside;
}

inside

マーカーがリストアイテムのボックスの内側に表示され、テキストと同じボックス内に配置されます。

ul {
  list-style-position: inside;
}

違いを比較する例

<div class="comparison">
  <ul class="outside-list">
    <li>これはoutsideの例です。マーカーはテキストの外側に配置されます。</li>
    <li>2行目のテキストもマーカーの右側で揃います。</li>
  </ul>

  <ul class="inside-list">
    <li>これはinsideの例です。マーカーはテキストボックスの内側に配置されます。</li>
    <li>2行目のテキストはマーカーの下から始まります。</li>
  </ul>
</div>

.comparison ul {
  width: 300px;
  padding: 16px;
  background: #f5f5f5;
  margin-bottom: 16px;
}

.outside-list {
  list-style-position: outside;
}

.inside-list {
  list-style-position: inside;
}

list-style-image の詳細

マーカーをカスタム画像に置き換えるプロパティです。

ul {
  list-style-image: url('marker.png');
}

/* 画像が読み込まれない場合のフォールバック */
ul {
  list-style-image: url('marker.png');
  list-style-type: square; /* フォールバック */
}

SVGを使用する例

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="%233498db"/></svg>');
}

ショートハンドの使い方

/* type のみ */
ul { list-style: disc; }

/* type と position */
ul { list-style: square inside; }

/* type、position、image すべて */
ul { list-style: square inside url('marker.png'); }

/* マーカーを完全に削除 */
ul { list-style: none; }

実践的な使用例

ナビゲーションメニュー

<nav class="main-nav">
  <ul class="nav-list">
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/services">サービス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

.nav-list li {
  margin: 0;
}

.nav-list a {
  text-decoration: none;
  color: #333;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

.nav-list a:hover {
  border-color: #3498db;
}

特徴リスト（チェックマーク）

<ul class="feature-list">
  <li>無料トライアル14日間</li>
  <li>クレジットカード不要</li>
  <li>いつでもキャンセル可能</li>
</ul>

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #27ae60;
  font-weight: bold;
}

手順リスト（カスタム番号）

<ol class="steps-list">
  <li>会員登録フォームに必要事項を入力</li>
  <li>確認メールのリンクをクリック</li>
  <li>プロフィールを設定</li>
  <li>サービスの利用を開始</li>
</ol>

.steps-list {
  list-style: none;
  padding: 0;
  counter-reset: step-counter;
}

.steps-list li {
  position: relative;
  padding-left: 48px;
  margin-bottom: 24px;
  line-height: 1.6;
  counter-increment: step-counter;
}

.steps-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  width: 32px;
  height: 32px;
  background: #3498db;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

タイムライン風リスト

<ol class="timeline">
  <li>
    <time>2024年1月</time>
    <h3>プロジェクト開始</h3>
    <p>チームを結成し、企画をスタート</p>
  </li>
  <li>
    <time>2024年4月</time>
    <h3>ベータ版リリース</h3>
    <p>限定ユーザーへの提供開始</p>
  </li>
  <li>
    <time>2024年7月</time>
    <h3>正式リリース</h3>
    <p>一般公開を開始</p>
  </li>
</ol>

.timeline {
  list-style: none;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.timeline li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 32px;
}

.timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 3px solid #3498db;
  border-radius: 50%;
}

.timeline time {
  display: block;
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.timeline h3 {
  font-size: 16px;
  margin: 0 0 8px;
}

.timeline p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

入れ子リストのスタイリング

<ul class="nested-list">
  <li>
    フロントエンド
    <ul>
      <li>HTML/CSS</li>
      <li>JavaScript</li>
      <li>
        フレームワーク
        <ul>
          <li>React</li>
          <li>Vue.js</li>
          <li>Angular</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    バックエンド
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
</ul>

.nested-list {
  list-style-type: disc;
}

.nested-list ul {
  list-style-type: circle;
  margin-top: 8px;
}

.nested-list ul ul {
  list-style-type: square;
}

.nested-list li {
  margin-bottom: 8px;
  line-height: 1.6;
}

モダンな::marker疑似要素

CSS Selectors Level 4で追加された::marker疑似要素を使うと、マーカーをより細かくスタイリングできます。

ul li::marker {
  color: #3498db;
  font-size: 1.2em;
}

ol li::marker {
  color: #e74c3c;
  font-weight: bold;
}

/* カスタム文字を使用 */
ul li::marker {
  content: '→ ';
  color: #27ae60;
}

使用例

<ul class="custom-marker-list">
  <li>最新機能を搭載</li>
  <li>高いセキュリティ</li>
  <li>24時間サポート対応</li>
</ul>

.custom-marker-list {
  padding-left: 24px;
}

.custom-marker-list li::marker {
  content: '★ ';
  color: #f1c40f;
}

.custom-marker-list li {
  padding-left: 8px;
  margin-bottom: 8px;
}

リストのリセット

フレームワークやリセットCSSでよく使われるパターンです。

/* 完全なリセット */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 記事内のリストのみスタイルを復元 */
.article-content ul,
.article-content ol {
  list-style: revert;
  margin: 1em 0;
  padding-left: 2em;
}

アクセシビリティの考慮

list-style: noneの注意点

list-style: noneを使用すると、一部のスクリーンリーダーがリストとして認識しなくなる場合があります。

/* アクセシビリティを維持しながらマーカーを非表示 */
ul {
  list-style: none;
}

ul li {
  display: list-item; /* リストセマンティクスを維持 */
}

/* または role属性を使用 */

<ul role="list" class="no-marker">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

ブラウザサポート

プロパティ	Chrome	Firefox	Safari	Edge
list-style	全バージョン	全バージョン	全バージョン	全バージョン
::marker	86以降	68以降	11.1以降	86以降

まとめ

list-styleプロパティは、リストの見た目をカスタマイズするための重要なプロパティです。

主なポイント:

list-styleはショートハンドで、type、position、imageを一括指定
ナビゲーションやメニューにはlist-style: noneが定番
カスタムマーカーには::before疑似要素や::marker疑似要素が便利
counter-resetとcounter-incrementで高度な番号付けが可能
アクセシビリティのため、意味的にリストである場合はrole="list"を検討

適切なリストスタイリングにより、情報を整理して伝えやすいデザインを実現しましょう。

概要