# list-style

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

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/list-style/

## 構文

```css
list-style: <list-style-type> <list-style-position> <list-style-image>
```

## Tailwindでは

- `list-none` → list-style-type: none
- `list-disc` → list-style-type: disc
- `list-decimal` → list-style-type: decimal
- `list-inside` → list-style-position: inside

## ブラウザ対応

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

## コード例

### 例1: 四角いマーカーを内側に表示

```css
list-style: square inside;
```

### 例2: マーカーを非表示

```css
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で変えて