タイポグラフィー
リストのマーカースタイルを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
list-disc | list-style-type: disc; |
list-decimal | list-style-type: decimal; |
list-none | list-style-type: none; |
list-(<custom-property>) | list-style-type: var(<custom-property>); |
list-[<value>] | list-style-type: <value>; |
list-disc や list-decimal のようなユーティリティを使用して、リスト内のマーカーのスタイルを制御します。
<ul class="list-disc"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ul><ol class="list-decimal"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ol><ul class="list-none"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ul>以下を使用してください list-[<value>] 構文 を設定するにはマーカー完全にカスタム値に基づいて
<ol class="list-[upper-roman] ..."> <!-- ... --></ol>CSS 変数の場合は、以下も使用できます。 list-(<custom-property>) 構文
<ol class="list-(--my-marker) ..."> <!-- ... --></ol>これは単なる省略形です list-[var(<custom-property>)] 自動的に var() 関数を追加するものです。
プレフィックスa list-style-type ユーティリティ md: のようなブレークポイントバリアントをプレフィックスとして付けて、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみ
<ul class="list-none md:list-disc ..."> <!-- ... --></ul>バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。