こんにちは！フロントエンドの世界へようこそ。
HTMLでリストを作るとき、`
- `タグや`
- `タグを使いますよね。でも、いざブラウザで表示してみると、左側に黒い「・（中黒）」が出てきて、「うーん、このデザインじゃないんだよな……」と悩んだことはありませんか？
今日は、そんなリストの「デフォルトの点々」を消す方法と、その時に絶対に忘れてはいけない「ある大切なこと」について、お話ししていきましょう。
—
なぜ、リストには勝手に「点々」がつくの？
Webブラウザはとても親切な存在です。HTMLを書いただけで、「これはリストですよ！」とユーザーに伝わるように、最初から「点々（リストマーカー）」をつけてくれています。
例えるなら、「買ったばかりの服に、最初からタグがついている」ようなもの。便利ですが、自分の好みのスタイルに変えたいときは、一度そのタグを外す必要がありますよね。
CSSでその点々を消す魔法の呪文が、これです。
ul {
/ リストマーカー（点々）を消す魔法の呪文 /
list-style: none;
}たったこれだけで、あんなに主張していた「点々」がスッと消えてくれます。
—
ちょっと待って！「消す」だけだと危険な理由
ここで、初心者の皆さんがつまずきやすいポイントがあります。それは、「見た目だけを消すと、アクセシビリティが損なわれる」という問題です。
視覚障がいのある方が使う「スクリーンリーダー（画面読み上げソフト）」という道具があります。このソフトは、`
- `や`
- `というタグを読み取ると、「リスト項目です」とユーザーに教えてくれます。
ところが、CSSで雑に書き換えてしまうと、ソフトが「あ、これはただの文章だな」と勘違いして、リストであることを伝えてくれなくなることがあるんです。
お買い物のレシートを想像してみてください
リストは、ただの文章の集まりではなく、「意味のある順序やグループ」です。レシートに商品名と価格が並んでいるから「これは合計金額が出るんだな」とわかるように、リストもタグがあることで「これは関連する項目の集まりだ」と伝わります。
見た目をカスタマイズしても、「これはリストだよ！」というHTMLの構造（骨組み）は、絶対に壊さないようにしましょうね。
—
現場でよく使う「リセット＆カスタマイズ」の構成例
では、実際に現場でよく使われる、丁寧なスタイルの書き方を紹介します。
- 新鮮な野菜
- 美味しい果物
- お肉と魚
.my-custom-list {
/ 1. デフォルトの点々を消す /
list-style: none;/ 2. ブラウザが勝手につける余白（パディング）もリセット /
padding: 0;
margin: 0;
}.my-custom-list li {
/ 3. 自分で好きなアイコンなどをつける場合はここ！ /
padding-left: 20px;
position: relative;
}/ 擬似要素を使って、自分好みのオシャレなアイコンに変身させましょう /
.my-custom-list li::before {
content: “★”; / 点々の代わりに星マークを置いてみました /
position: absolute;
left: 0;
color: #ffcc00;
}—
まとめ：HTMLは「心」、CSSは「服」
最後に、一つだけ覚えておいてください。
HTMLは「その要素が何であるか（リストである）」という心の部分。
CSSは「どう見えるか（星マークにするか、点々を消すか）」という服の部分です。服をどれだけおしゃれに着替えても、心（HTML）まで捨ててしまわないように気をつけていれば、誰にとっても使いやすく、見た目も美しいWebサイトが作れますよ。
最初は難しく感じるかもしれませんが、こうやって少しずつ「なぜそうするのか？」を理解していくのが、フロントエンドの醍醐味です。焦らず、一つずつ一緒に学んでいきましょうね！
何か分からないことがあったら、いつでもまた聞きに来てください。応援しています！
- `というタグを読み取ると、「リスト項目です」とユーザーに教えてくれます。
コメント