リストタグとFlexboxの「危険な関係」：なぜマーカーが消えたり、意図しない挙動をするのか？
フロントエンド開発の現場で、もっとも「理屈はわかるのに、いざ書くとハマる」のが、`ul`や`ol`タグに対するFlexboxの適用ではないでしょうか。
「横並びのメニューを作れ」と言われて、何も考えずに親要素に `display: flex` を当てる。その瞬間、本来あるべきはずのマーカー（・や数字）が消え失せ、横並びにはなったものの要素間の余白調整で泥沼にハマる……。若手エンジニアから「Flexboxにするとリストのマークってどうすればいいんですか？」と相談されるたび、私はいつもこう答えます。「それはブラウザの仕様を理解しきれていない証拠だよ」と。
今日は、中級エンジニアなら絶対に押さえておくべき、リストタグとFlexboxの仕様、そして現場で即戦力となる実装パターンについて深掘りしていきましょう。
—
なぜFlexboxを使うとマーカーが消えるのか？
結論から言うと、`display: flex` を適用した瞬間に、その要素（`ul`や`ol`）は「ブロックレベル要素」としての性質から「フレックスコンテナ」へとその身を変えます。
多くのブラウザにおいて、`ul`や`ol`のマーカーは `list-style-type` プロパティによって制御されていますが、内部的には `display: list-item` を持つ `li` 要素の「外側」に描画されています。Flexboxは、子要素（`li`）をフレックスアイテムとして再定義するため、ブラウザのレンダリングエンジンは「リストアイテムとしてのマーカーの描画領域」を適切に処理できなくなるケースが多々あるのです。
これを無理やりCSSで解決しようとせず、仕様に沿った「正しい解決策」を身につけることが、バグの少ないクリーンなコードを書く第一歩です。
—
現場で使える「Flexboxリスト」実装パターン
実務において、横並びリストを実装する際は「マーカーをどう扱うか」で戦略を変える必要があります。大きく分けて2つのパターンを紹介します。
パターン1：マーカーを自前で実装する（最も推奨される方法）
実務では、標準のマーカーをそのまま使うことは稀です。デザイン要件が複雑な場合、`::before` 疑似要素を使ってマーカーを自作するのが最も安全で、かつ柔軟です。
/ 親要素：flexコンテナ化 /
.flex-list {
display: flex;
flex-direction: row; / 横並び /
gap: 20px; / モダンブラウザならこれで要素間余白を一発制御 /
list-style: none; / 標準マーカーは殺す /
padding: 0;
margin: 0;
}
/ 子要素：マーカーを擬似要素で実装 /
.flex-list li {
position: relative;
padding-left: 15px; / マーカー分の余白を確保 /
}
.flex-list li::before {
content: “●”;
position: absolute;
left: 0;
color: #ff6b6b; / マーカーの色を自由に変更可能 /
}
この方法のメリットは、Flexboxのレイアウト計算を阻害しない点にあります。`gap`プロパティを使えば、古い`margin`調整地獄からも解放されます。
—
パターン2：リストの性質を維持して並べる（display: contentsの活用）
もし、どうしても標準のマーカー（`list-style`）を残したままレイアウトを制御したい場合、あるいは`dl/dt/dd`のような記述リストで構造を維持したい場合は、少しひねったアプローチが必要です。
実は、`display: flex` を使う際に、リストの構造を壊さずに子要素を並べる裏技的なプロパティがあります。それが `display: contents` です。
/ 親要素 /
.dl-container {
display: flex;
flex-direction: column; / 縦並びのリストを想定 /
}
/
- display: contents を使うと、その要素自体は存在しないものとして扱われ、
- 子要素が直接フレックスアイテムとして並ぶ
/
dl {
display: contents;
}
dt {
font-weight: bold;
color: #333;
}
dd {
margin-left: 1rem;
margin-bottom: 10px;
}
この手法は、HTMLのセマンティクス（意味構造）を保ったまま、Flexboxの恩恵を最大限に受けたい時に非常に強力です。
—
シニアからのアドバイス：実装時の「泥臭い」注意点
最後に、現場で泣きを見ないためのTipsをいくつか共有します。
1. `gap` の恩恵を信じる: 昔は `li:not(:last-child) { margin-right: 20px; }` のように書いていましたが、今は `gap` 一択です。ただし、一部の古いブラウザや特定のメールクライアント環境では無視されることがあるので、対応が必要なプロジェクトでは注意してください。
2. `flex-wrap` を忘れない: 横並びリストを作る際、画面幅が狭くなったときの折り返しを考慮していますか？ `flex-wrap: wrap;` を指定しておかないと、スマホで見切れるという「初心者がやりがちなミス」に直結します。
3. `dl` タグの特殊性: `dl` は `ul` と異なり、`dt` と `dd` が並列の構造です。Flexboxを適用する際は、HTML構造をネストするか、上記のように `display: contents` を使いこなすことで、CSSで無理なレイアウトを組む必要がなくなります。
フロントエンドの技術は日々進化していますが、「HTMLの構造」と「ブラウザのレンダリング原理」を理解していれば、どんな複雑なデザイン要件が来ても動じることはありません。
まずは手元のコードで、`display: flex` を当てたときに何が起きているのか、ブラウザのデベロッパーツールで要素のボックスモデルをじっくり観察してみてください。そこには、教科書には載っていない「リアルな挙動」がすべて詰まっています。
コメント