【実務・中級編】CSSによるリストマーカーの非表示とリセット – HTML実践ガイド

なぜ「list-style: none」だけで満足してはいけないのか？リスト要素のプロフェッショナルな扱い方

現場でコードをレビューしていると、HTMLのリスト要素（`ul`, `ol`, `li`）に対して機械的に `list-style: none` を当てて満足しているケースに頻繁に出くわします。

「動いているからいいじゃん」

そう思うかもしれません。しかし、それはブラウザが裏側で何を行っているのか、そしてアクセシビリティという観点で何が起きているのかを理解していない証拠です。今日は、リスト要素の「リセット」という、一見地味で基礎的な作業に潜む罠と、それをプロとしてどう美しく処理すべきかについて深掘りしていきましょう。

まず、なぜデフォルトでマーカー（点や数字）が付くのか。これは、ブラウザの「ユーザーエージェントスタイルシート」が、`ul`や`ol`に対して `padding-left` や `list-style-type` を自動付与しているからです。

ここで重要なのは、`list-style: none` はあくまで「マーカーを消す」だけで、要素の「リストとしての意味」を消すわけではないという点です。

スクリーンリーダー（音声読み上げツール）は、`ul` や `ol` のマークアップを検知すると、「リスト項目、全5項目」といった情報をユーザーに伝えます。しかし、CSSで無理やり見た目を変えすぎて、構造と見た目の乖離が激しくなると、ユーザー体験は著しく低下します。

多くのエンジニアがやりがちなのが、`li` に対して個別で `list-style: none` を当てる記述です。

/ ❌ アンチパターン /
li {
list-style: none;
}

これだと、もしリストの中にネストされたリストがあった場合、意図せずスタイルが漏れ出すことがあります。また、`ul` や `ol` 自体が持っているブラウザデフォルトの `padding` や `margin` が残ったままだと、後続のレイアウト崩れの原因になります。

私が現場で常用している、堅牢なリセットセットがこちらです。

/ ✅ 推奨されるリセットパターン /
.c-list-reset {
/ リストのデフォルトスタイル（マーカー）を無効化 /
list-style: none;

/ ブラウザごとのデフォルト余白を強制リセット /
margin: 0;
padding: 0;
}

/
li要素に対しては、継承を考慮して余白のみを制御する。
必要に応じてdisplay: flexなどでレイアウトを組む。
/
.c-list-reset li {
margin: 0;
padding: 0;
}

もし、`ul` のセマンティクス（意味）を維持しつつ、見た目だけを完全に装飾として扱いたい場合は、`role=”list”` を付与することを検討してください。

特に、`display: flex` や `grid` を使ってリストを横並びにした際に、一部の古いブラウザや特定のスクリーンリーダー環境下で「リストであること」の認識が外れてしまうケースが稀にあります。

最後に、`dl`, `dt`, `dd` についても触れておきましょう。これらは「リスト」というより「定義リスト」ですが、現代のフロントエンドでは「キーと値のペア」を表示する際に非常に強力な構造です。

これらもデフォルトでブラウザ独自の余白を持っているため、以下のように制御するのが鉄則です。

dl, dt, dd {
margin: 0;
padding: 0;
}

/
dtとddの配置は、floatではなくFlexboxやGridを使うのが
今の時代における「正解」です。
/
.c-description-list {
display: grid;
grid-template-columns: 120px 1fr;
gap: 10px;
}

HTMLのリスト要素をリセットするという作業は、単なる「CSSの打ち消し」ではありません。「ブラウザのデフォルトから解放し、自分たちのデザインシステムに合わせて再構築する」という設計行為です。

些細なことかもしれませんが、こうした細部を疎かにしないエンジニアこそが、堅牢でメンテナンス性の高いプロダクトを作れるのだと、私は確信しています。皆さんの現場のCSSリセットも、一度見直してみてはいかがでしょうか？