なぜリストの「点（マーカー）」が消えるの？ `display: flex` との切ない関係を紐解く
Web制作を始めたばかりの頃、誰もが一度は「あれ？ リストのあの黒い点（マーカー）はどこに行ったの？」と首を傾げる瞬間があります。
メニューバーを作ろうと `
- ` と `
- ` を使い、CSSで `display: flex` を指定した瞬間に、今まで仲良く並んでいた「・（マーカー）」がプイッと消えてしまう。まるで魔法が解けたようで、少し寂しい気持ちになりますよね。
今日は、そんな「リストのマーカー消失問題」の正体と、それを解決するための「少しの工夫」について、現場の知見を交えてお話しします。
—
なぜ `display: flex` にするとマーカーが消えるのか？
結論から言うと、`
- ` 要素は「リストアイテムですよ」という特別な役割（`display: list-item`）を背負っているからなんです。
普段、`
- ` はこの特別なモードで動いています。このモードの時は、ブラウザが気を利かせて「これはリストだから、頭に黒い点を付けてあげよう！」と自動的にマーカーを描画してくれるんです。
ところが、`display: flex` や `display: grid` を指定した瞬間に、その「リストアイテムモード」が解除され、ただの「箱」になってしまいます。役職を解かれた部長さんがただの一般市民に戻るように、`
- ` も「リストであること」を忘れ、マーカーを描画する能力を失ってしまうわけです。
—
現場でよく使う「マーカーを復活させる」テクニック
マーカーが消えてしまっても、諦める必要はありません！ 現場では、いくつかの方法でこの問題を華麗に回避しています。一番おすすめの「擬似要素」を使う方法を一緒に見てみましょう。
1. `::before` で自分だけのマーカーを作る
HTMLのリスト構造はそのままに、CSSで「偽物のマーカー」をペタッと貼り付ける方法です。これなら、`flex` を使って自由にレイアウトしても、マーカーは消えません。
ul {
list-style: none; / 元々のブラウザ標準のマーカーを消す /
padding: 0;
}li {
display: flex; / 横並びレイアウトを有効にする /
align-items: center; / 縦方向の揃えを整える /
}/ 擬似要素を使って、マーカーを再現する /
li::before {
content: “●”; / ここを変えれば好きなマークにできる！ /
color: #ff7f50; / コーラルピンクで可愛く /
margin-right: 8px; / 文字との隙間を作る /
font-size: 0.8em;
}なぜこの方法が良いの？
この方法の素晴らしいところは、「アクセシビリティ」が保たれることです。
スクリーンリーダー（視覚障がいの方などが使う読み上げソフト）は、HTMLの ` - ` を見れば「あ、これはリストだな」と正しく認識してくれます。見た目は自由自在に飾り付けつつ、中身は正統派なリストであること。これがプロのこだわりです。
—
迷った時は「役割」を意識してみよう
HTMLのタグにはそれぞれ「役割」があります。
- `
- ` や `
- `
- `
- `
：これは「一つひとつの項目」。
レイアウト（デザイン）を変えるときに、ついつい `display` プロパティで見た目だけをいじりたくなりますが、「そのタグが持っている本来の役割を壊していないかな？」と一歩立ち止まって考えてみるのが、上達への近道です。
もし「どうしてもマーカーの調整がうまくいかない！」と悩んだら、無理にリストタグにこだわらず、ただの `
` を並べるという選択肢もあります。でも、箇条書きである意味があるなら、ぜひ今回の「`::before` で擬似的に作る」方法を試してみてください。—
最後に：つまずくのは、成長の証
「コードを書いたのに、思った通りにならない」。これ、実は一番学習が進む瞬間なんです。
「なんでだろう？」と調べて、仕組みを知る。その繰り返しが、あなたのWeb制作の引き出しをどんどん増やしていきます。マーカーが消えたことで落ち込む必要なんて全くありません！
「リストのマーカー、また消えちゃったよ（笑）」くらいの余裕を持って、ぜひいろいろなレイアウトに挑戦してみてくださいね。あなたの書くコードが、もっともっと素敵になりますように！
- `
コメント