CSS辞書

list-style

背景・装飾

リストのマーカーや記号の種類・位置・画像を指定するプロパティです。disc、circle、square、decimal、noneなどの値があり、カスタム画像も使用できます。リストデザインの基本となるプロパティです。

構文

Syntax
list-style: <list-style-type> <list-style-position> <list-style-image>

Tailwindでは

list-nonelist-style-type: none
list-disclist-style-type: disc
list-decimallist-style-type: decimal
list-insidelist-style-position: inside

コード例

1

list-style: square inside;
実行結果
  • 四角いマーカー
  • 内側表示

四角いマーカーを内側に表示

2

list-style: none;
実行結果
  • マーカーなし
  • テキストのみ

マーカーを非表示

💡 TIPS

list-style-type, list-style-position, list-style-imageのショートハンド。

🤖 AIがよく間違えるポイント

list-style: noneを指定するとSafari(VoiceOver)はリストとして読み上げなくなるため、意味的にリストである場合はul側にrole="list"を付けるのが定石ですが、AIはこのアクセシビリティ知識を出し忘れます。マーカーの色や大きさだけ変えるなら::marker擬似要素が使えます。

💬 AIへの頼み方

ナビゲーションのリストマーカーを消しつつ、スクリーンリーダーでリストとして読まれるように実装して

リストの行頭マーカーの色とサイズだけ::markerで変えて

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
1+
Firefox
1+
Safari
1+
Edge
12+