Documentation CSS

概要

list-style-typeプロパティは、CSSでリストのマーカー（箇条書きの記号や番号）の種類を設定するプロパティです。順不同リスト（<ul>）では丸や四角などの記号を、順序付きリスト（<ol>）では数字やローマ数字、アルファベットなどを指定できます。

この記事では、list-style-typeの基本的な使い方から、豊富な値のバリエーション、カスタムマーカーの作成方法まで詳しく解説します。

list-style-typeの基本

基本構文

/* キーワード値 */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: none;

/* 文字列値 */
list-style-type: '-';
list-style-type: '→ ';

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

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

基本的な記号マーカー

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

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

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

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

使用例

<div class="marker-demo">
  <div>
    <h4>disc</h4>
    <ul class="disc-list">
      <li>アイテム1</li>
      <li>アイテム2</li>
    </ul>
  </div>
  <div>
    <h4>circle</h4>
    <ul class="circle-list">
      <li>アイテム1</li>
      <li>アイテム2</li>
    </ul>
  </div>
  <div>
    <h4>square</h4>
    <ul class="square-list">
      <li>アイテム1</li>
      <li>アイテム2</li>
    </ul>
  </div>
</div>
.disc-list { list-style-type: disc; }
.circle-list { list-style-type: circle; }
.square-list { list-style-type: square; }

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

数字系

/* アラビア数字（デフォルト）: 1, 2, 3... */
ol { list-style-type: decimal; }

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

ローマ数字

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

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

アルファベット

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

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

ギリシャ文字

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

東アジア言語向けの値

日本語

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

/* ひらがな（いろは順）: い, ろ, は... */
ol { list-style-type: hiragana-iroha; }

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

/* カタカナ（いろは順）: イ, ロ, ハ... */
ol { list-style-type: katakana-iroha; }

漢数字・その他

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

/* 日本語形式: 一, 二, 三...（正式） */
ol { list-style-type: japanese-formal; }

/* 日本語形式（略式） */
ol { list-style-type: japanese-informal; }

使用例

<div class="japanese-lists">
  <ol class="hiragana-list">
    <li>ひらがな表記</li>
    <li>50音順で表示</li>
    <li>日本語コンテンツに最適</li>
  </ol>

  <ol class="katakana-list">
    <li>カタカナ表記</li>
    <li>フォーマルな印象</li>
  </ol>
</div>
.hiragana-list {
  list-style-type: hiragana;
}

.katakana-list {
  list-style-type: katakana;
}

カスタム文字列マーカー

CSS3では、任意の文字列をマーカーとして使用できます。

/* ハイフン */
ul {
  list-style-type: '-';
}

/* 矢印 */
ul {
  list-style-type: '→ ';
}

/* チェックマーク */
ul {
  list-style-type: '✓ ';
}

/* 絵文字 */
ul {
  list-style-type: '📌 ';
}

使用例

<ul class="arrow-list">
  <li>矢印マーカーの例</li>
  <li>カスタム文字列を使用</li>
  <li>デザインに個性を追加</li>
</ul>
.arrow-list {
  list-style-type: '→ ';
  padding-left: 24px;
}

.arrow-list li {
  padding-left: 8px;
}

実践的な使用例

ナビゲーションメニュー

<nav>
  <ul class="nav-menu">
    <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-menu {
  list-style-type: none; /* マーカーを非表示 */
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  transition: color 0.2s;
}

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

ステップ形式の手順

<ol class="steps">
  <li>アカウントを作成する</li>
  <li>プロフィールを設定する</li>
  <li>初期設定を完了する</li>
  <li>サービスを利用開始</li>
</ol>
.steps {
  list-style-type: decimal-leading-zero;
  padding-left: 48px;
}

.steps li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}

.steps li::marker {
  color: #3498db;
  font-weight: bold;
}

法的文書・契約書

<ol class="legal-list">
  <li>
    第一条（目的）
    <ol class="legal-sub">
      <li>本契約は...</li>
      <li>甲は乙に対し...</li>
    </ol>
  </li>
  <li>
    第二条（定義）
    <ol class="legal-sub">
      <li>本契約において...</li>
    </ol>
  </li>
</ol>
.legal-list {
  list-style-type: cjk-ideographic;
  padding-left: 32px;
}

.legal-list > li {
  margin-bottom: 24px;
  font-weight: bold;
}

.legal-sub {
  list-style-type: lower-alpha;
  font-weight: normal;
  margin-top: 12px;
}

.legal-sub li {
  margin-bottom: 8px;
}

入れ子リストの自動スタイル

<ul class="nested-list">
  <li>
    レベル1
    <ul>
      <li>
        レベル2
        <ul>
          <li>レベル3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
.nested-list {
  list-style-type: disc;
}

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

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

複数のスタイルを組み合わせたTODOリスト

<ul class="todo-list">
  <li class="completed">完了したタスク</li>
  <li class="pending">進行中のタスク</li>
  <li class="blocked">ブロックされたタスク</li>
</ul>
.todo-list {
  list-style-type: none;
  padding: 0;
}

.todo-list li {
  padding: 12px 16px 12px 40px;
  position: relative;
  margin-bottom: 8px;
  border-radius: 4px;
}

.todo-list li::before {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.todo-list .completed {
  background: #d4edda;
}

.todo-list .completed::before {
  content: '✓';
  color: #28a745;
}

.todo-list .pending {
  background: #fff3cd;
}

.todo-list .pending::before {
  content: '○';
  color: #856404;
}

.todo-list .blocked {
  background: #f8d7da;
}

.todo-list .blocked::before {
  content: '✕';
  color: #721c24;
}

::marker疑似要素との連携

::marker疑似要素を使うと、マーカーのスタイルをより細かく制御できます。

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

使用例

.styled-list li::marker {
  color: #3498db;
  font-weight: bold;
}

/* 偶数番目のマーカーの色を変える（順序付きリストで有効） */
.alternating-list li:nth-child(even)::marker {
  color: #e74c3c;
}

.alternating-list li:nth-child(odd)::marker {
  color: #3498db;
}

すべての値一覧

カテゴリ値表示例
記号disc●
記号circle○
記号square■
数字decimal1, 2, 3
数字decimal-leading-zero01, 02, 03
ローマ数字lower-romani, ii, iii
ローマ数字upper-romanI, II, III
アルファベットlower-alphaa, b, c
アルファベットupper-alphaA, B, C
ギリシャlower-greekα, β, γ
日本語hiraganaあ, い, う
日本語katakanaア, イ, ウ
漢数字cjk-ideographic一, 二, 三
非表示none（なし）

ブラウザサポート

ブラウザ基本値カスタム文字列東アジア値
Chrome全バージョン79以降全バージョン
Firefox全バージョン39以降全バージョン
Safari全バージョン14.1以降全バージョン
Edge全バージョン79以降全バージョン

まとめ

list-style-typeプロパティは、リストマーカーの種類を柔軟に設定できる重要なプロパティです。

主なポイント:

  • 順不同リストには disc、circle、square が基本
  • 順序付きリストには decimal、lower-roman、lower-alpha など多彩な選択肢
  • none でマーカーを非表示にし、カスタムデザインを適用可能
  • カスタム文字列で独自のマーカーを設定可能
  • ::marker疑似要素でさらに細かいスタイリングが可能

用途に応じて適切な値を選択し、見やすく美しいリストデザインを実現しましょう。

参考文献

円