zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

リストスタイル

リストマーカーと、マーカーを内容ボックスの内側・外側のどちらに置くかを設定します。

リストマーカーの種類と、リスト項目のテキスト枠に対する位置を選びます。ul や ol の意味構造は HTML で用意します。

クラスと CSS の早見表

クラスの例期待される宣言
list-disclist-style-type: disc;
list-decimallist-style-type: decimal;
list-nonelist-style-type: none;
list-insidelist-style-position: inside;
list-outsidelist-style-position: outside;
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。自作 CSS はデモカードを配置するだけで、list-style-type と list-style-position はユーティリティに任せます。リストの意味構造は HTML のリスト要素で表します。

使い方の例

マーカーの種類を選ぶ

意味構造を持つ ul と ol で disc、decimal、マーカーなしを比べます。

マーカーの種類を選ぶ
HTML
<div class="wind-demo-list-types">
  <section><strong>Bullets</strong><ul class="list-disc"><li>Choose a route</li><li>Check the source</li></ul></section>
  <section><strong>Steps</strong><ol class="list-decimal"><li>Choose a route</li><li>Check the source</li></ol></section>
  <section><strong>Marker-free links</strong><ul class="list-none"><li>Overview</li><li>Reference</li></ul></section>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-list-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
  color: #223247;
}

.wind-demo-list-types section {
  border: 1px solid #b7c5d4;
  padding: .75rem 1rem;
}

.wind-demo-list-types strong {
  color: #5d6c7c;
  font-size: .8rem;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-list-types": true
    },
    "safelist": {
      "docs-preview": [
        "list-disc",
        "list-decimal",
        "list-none"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-list-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; color: #223247; }
.wind-demo-list-types section { border: 1px solid #b7c5d4; padding: 0.75rem 1rem; }
.wind-demo-list-types strong { color: #5d6c7c; font-size: 0.8rem; }

折り返した項目とマーカー位置

同じ長い項目を使い、inside と outside で2行目の位置がどう変わるかを示します。

折り返した項目とマーカー位置
HTML
<div class="wind-demo-list-positions">
  <section><strong>Outside</strong><ul class="list-disc list-outside"><li>A long item wraps onto a second line so the marker position stays easy to compare. / 長い項目は2行目に折り返されます。</li><li>Another item</li></ul></section>
  <section><strong>Inside</strong><ul class="list-disc list-inside"><li>A long item wraps onto a second line so the marker position stays easy to compare. / 長い項目は2行目に折り返されます。</li><li>Another item</li></ul></section>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-list-positions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  color: #223247;
}

.wind-demo-list-positions section {
  min-width: 0;
  border: 1px solid #b7c5d4;
  padding: .75rem;
}

.wind-demo-list-positions strong {
  color: #5d6c7c;
  font-size: .8rem;
}
.list-disc {
  list-style-type: disc;
}
.list-inside {
  list-style-position: inside;
}
.list-outside {
  list-style-position: outside;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-list-positions": true
    },
    "safelist": {
      "docs-preview": [
        "list-disc",
        "list-outside",
        "list-inside"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-list-positions { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; color: #223247; }
.wind-demo-list-positions section { min-width: 0; border: 1px solid #b7c5d4; padding: 0.75rem; }
.wind-demo-list-positions strong { color: #5d6c7c; font-size: 0.8rem; }

任意値と名前付きの値

list-disc、list-decimal、list-none はマーカーの種類を指定します。list-inside と list-outside は独立して位置を指定するため、種類と位置は必要に応じて組み合わせられます。マーカーを消したナビゲーションでもリンクテキストとナビゲーションの意味づけは必要です。現在のカタログには固定の選択肢があり、名前付きトークンや任意マーカー構文はありません。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

list-decimal

フィールド値
カタログ識別子v1.list-decimal
クラスパターンlist-decimal
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位list (41)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティlist-style-type

受け入れる値

種類接尾辞出力される値
exactnull"decimal"

宣言テンプレート

プロパティ値の種類固定値
list-style-typeresolvednull

カタログの例

クラスの例期待される宣言
list-decimallist-style-type: decimal

list-disc

フィールド値
カタログ識別子v1.list-disc
クラスパターンlist-disc
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位list (41)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティlist-style-type

受け入れる値

種類接尾辞出力される値
exactnull"disc"

宣言テンプレート

プロパティ値の種類固定値
list-style-typeresolvednull

カタログの例

クラスの例期待される宣言
list-disclist-style-type: disc

list-inside

フィールド値
カタログ識別子v1.list-inside
クラスパターンlist-inside
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位list (41)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティlist-style-position

受け入れる値

種類接尾辞出力される値
exactnull"inside"

宣言テンプレート

プロパティ値の種類固定値
list-style-positionresolvednull

カタログの例

クラスの例期待される宣言
list-insidelist-style-position: inside

list-none

フィールド値
カタログ識別子v1.list-none
クラスパターンlist-none
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位list (41)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティlist-style-type

受け入れる値

種類接尾辞出力される値
exactnull"none"

宣言テンプレート

プロパティ値の種類固定値
list-style-typeresolvednull

カタログの例

クラスの例期待される宣言
list-nonelist-style-type: none

list-outside

フィールド値
カタログ識別子v1.list-outside
クラスパターンlist-outside
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位list (41)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティlist-style-position

受け入れる値

種類接尾辞出力される値
exactnull"outside"

宣言テンプレート

プロパティ値の種類固定値
list-style-positionresolvednull

カタログの例

クラスの例期待される宣言
list-outsidelist-style-position: outside

Revision History

作成更新