リストのマーカーや記号の種類・位置・画像を指定するプロパティです。disc、circle、square、decimal、noneなどの値があり、カスタム画像も使用できます。リストデザインの基本となるプロパティです。
list-style: <list-style-type> <list-style-position> <list-style-image>| list-none | list-style-type: none |
| list-disc | list-style-type: disc |
| list-decimal | list-style-type: decimal |
| list-inside | list-style-position: inside |
list-style: square inside;四角いマーカーを内側に表示
list-style: none;マーカーを非表示
list-style-type, list-style-position, list-style-imageのショートハンド。
list-style: noneを指定するとSafari(VoiceOver)はリストとして読み上げなくなるため、意味的にリストである場合はul側にrole="list"を付けるのが定石ですが、AIはこのアクセシビリティ知識を出し忘れます。マーカーの色や大きさだけ変えるなら::marker擬似要素が使えます。
ナビゲーションのリストマーカーを消しつつ、スクリーンリーダーでリストとして読まれるように実装して
リストの行頭マーカーの色とサイズだけ::markerで変えて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。