リストを横並びにしたい！Flexboxで「マーカーが消える問題」を華麗に解決する方法
こんにちは！Web制作の学習、順調に進んでいますか？
HTMLを学び始めると、必ず出会うのが「リスト（`ul`, `ol`）」ですよね。箇条書きを作るのにとっても便利なタグですが、いざCSSで「横並びのメニューを作りたい！」と思って`display: flex;`を適用した瞬間、「あれ？大事な『・（中黒）』や数字が消えちゃった！」と焦った経験はありませんか？
実はこれ、初心者が100人中100人通る「お決まりの登竜門」なんです。今日は、なぜそんなことが起きるのか、そしてどうすれば理想のレイアウトが作れるのかを、一緒に紐解いていきましょう。
—
なぜFlexboxを使うとマーカーが消えるの？
まず、身近な例え話をしましょう。
HTMLの`ul`や`ol`は、いわば「整理整頓された引き出し」のようなものです。デフォルトの状態では、引き出しの中に「マーカー（・や数字）」という小さなタグが、まるでラベルのようにくっついています。
ところが、`display: flex;`を適用するということは、この引き出しの中身を「整列させるための特殊なベルトコンベアに乗せる」という行為に似ています。このベルトコンベアの上では、今まで付いていた「ラベル（マーカー）」の扱いが少し特殊になり、表示されなくなってしまう性質があるのです。
「せっかくのリストなのに困るよ！」と思いますよね。でも、大丈夫。CSSの力を借りれば、簡単に元の姿に戻したり、あるいはもっとオシャレに飾り付けたりすることができるんです。
—
基本の実装：リストを横並びにする
まずは、基本の「横並びリスト」を作ってみましょう。`ul`をFlexコンテナにするだけで、中身の`li`は勝手に横へ並んでくれます。
—
消えたマーカーを「復活」させるコツ
もし、「やっぱりリストの『・（マーカー）』を表示したまま横並びにしたい！」という場合は、どうすればいいでしょうか？
一つの賢い方法は、`li`の中に擬似要素（`::before`）を使って、「自分でマーカーを作ってしまう」という手法です。これが現場でもよく使われる、一番コントロールしやすいやり方ですよ。
.nav-list li {
display: flex;
align-items: center; / 縦方向の中央揃え /
}
/ 自分でマーカーを描画する /
.nav-list li::before {
content: “●”; / ここで好きなマークを指定 /
margin-right: 8px; / マークと文字の間の隙間 /
color: #ff9900; / マーカーだけ色を変えるなんてことも自由自在！ /
}
この方法なら、マーカーのデザインも自由に変えられますし、Flexboxの「横並び」という便利な機能もそのまま活かせますよね。
—
ちょっと深掘り：dl, dt, dd も Flexbox で操る
おまけに、もう一つだけ。「記述リスト」と呼ばれる `dl`（辞書のようなリスト）も、Flexboxを使うとすごく便利になります。
`dl`の中に `dt`（用語）と `dd`（説明）がある構造ですが、これを `flex-direction: column;` にすると、縦に積み重ねるレイアウトが簡単に作れます。
.description-list {
display: flex;
flex-direction: column; / 中身を縦に並べる設定 /
}
「横に並べたいのか、縦に並べたいのか」。Flexboxは、この`flex-direction`というたった一つのプロパティで、まるで積み木を組み替えるようにレイアウトを自由自在に操れるんです。
—
最後に：つまずくのは「理解しようとしている証拠」
Flexboxを使っていると、最初は「思っていたのと違う場所に配置された！」「要素がはみ出した！」とパニックになることもあります。でも、それはあなたがWebのレイアウトと真剣に向き合っている証拠です。
「表示されない」なら「自分で作ればいい」、「横並びなら Flexbox」。この魔法の杖を一つずつ覚えていけば、必ず思い通りのWebサイトが作れるようになります。
焦らず、楽しみながらコーディングを続けてくださいね。次はどんなレイアウトに挑戦してみますか？何か困ったことがあれば、またいつでも聞きに来てください。応援しています！
コメント