リストを自由に操ろう！`list-style-type`と「自分だけのマーカー」の作り方
こんにちは！Web制作の世界へようこそ。
HTMLを書き始めると、必ずと言っていいほど出会うのが「リスト」ですよね。箇条書きのメニューや、手順を説明するステップなど、Webサイトには欠かせない存在です。
でも、「黒丸（●）以外のマークにしたい」「そもそもマークを消したい」と思ったことはありませんか？
今日は、リストの見た目を自由自在に変える魔法のプロパティ`list-style-type`と、さらに一歩進んだ「自分だけのマーカー」を作る方法を、一緒に楽しく学んでいきましょう。
—
1. まずは基本！`list-style-type`でおしゃれに変身
`list-style-type`は、その名の通り「リストのスタイルの種類」を決めるプロパティです。
`
- `（順序なしリスト）や `
- ` に対して指定することで、頭のマークを簡単に切り替えられます。
よく使う標準的な値を整理してみましょう。
- `disc`：塗りつぶしの黒丸（デフォルト）。定番中の定番ですね。
- `circle`：中が空洞の円。少し軽やかな印象になります。
- `square`：四角形。しっかりとした情報を伝える時に便利です。
- `decimal`：1, 2, 3… と続く算用数字。手順説明にぴったり！
- `none`：これ重要！ マーカーを完全に消します。デザインをゼロから作りたい時は、まずこれを指定するのが鉄則です。
実際に書いてみましょう
/ リストのマーカーを四角に変える /
.my-list {
list-style-type: square;
}/ マーカーを消す（アイコンを自作したい時など） /
.clean-list {
list-style-type: none;
}「あれ？`none`にしたら、何か物足りないな…」と感じたあなた。鋭いです！
マーカーを消すのは「真っ白なキャンバス」を用意するようなもの。ここからが本当の楽しみですよ。—
2. `@counter-style`で、世界に一つだけのマーカーを！
CSSには`@counter-style`という、今のWeb制作現場では必須のルールがあります。「標準の丸や数字じゃ満足できない！」という時の救世主です。
例えば、「お買い物の手順」を表現する時に、数字の代わりに「絵文字」を使ってみたくありませんか？
カスタムマーカーの作り方
/ まず自分だけのルール（名前）を定義します /
@counter-style my-shopping-style {
system: cyclic; / 繰り返す設定 /
symbols: “🛒” “🛍️” “📦”; / 使いたい絵文字を並べるだけ！ /
suffix: ” “; / マークとテキストの間の余白 /
}/ 定義したルールをリストに適用 /
.shopping-steps {
list-style: my-shopping-style;
}たったこれだけで、`
- `の頭に可愛い絵文字が順番に並びます。まるで魔法みたいですよね。`system: cyclic`を指定しておくと、絵文字が順番に表示された後、また最初に戻って繰り返してくれるので、長いリストでも安心です。
—
3. なぜ「リスト」にこだわるのか？
初学者の頃は「`div`タグで囲んで文字を並べればいいのでは？」と思うかもしれません。でも、あえて`
- `や`
- `を使うのには大切な理由があります。
それは、「ブラウザや検索エンジンに、これが『リストである』と教えるため」です。
例えば、目の不自由な方が使う読み上げソフトは、` - `タグを見つけると「これはリストの項目ですよ」と教えてくれます。`list-style-type`で見た目を整えつつ、中身は正しいHTMLタグを使う。これが、誰にとっても優しいWebサイトを作る「プロの作法」なんです。
—
つまずきポイント：余白が消えない！？
`list-style-type: none;` にしても、なんだか左側に謎の余白が残ってしまう…という経験はありませんか？
実はこれ、リストにはデフォルトで「左側のパディング（`padding-left`）」が設定されているからなんです。そんな時は、迷わずこう指定してあげてください。
.clean-list {
list-style-type: none;
padding-left: 0; / 左側の余白をゼロにする /
margin: 0; / 念のため余白をリセット /
}これだけでスッキリと左寄せになり、自由なレイアウトが組めるようになります。
—
まとめ：あなたの表現力を広げよう
- `list-style-type` は、リストの「顔」を変えるプロパティ。
- `none` を使えば、自分だけのデザインを作る土台ができる。
- `@counter-style` を使えば、絵文字や特殊文字で個性を出せる。
最初は難しく感じるかもしれませんが、まずは「`disc`を`square`に変えてみる」といった小さな一歩からで大丈夫です。
ぜひ、あなたのWebサイトのリストに、素敵な彩りを加えてみてくださいね。もし分からないことがあれば、いつでも何度でも、手を動かして試してみてください。それが一番の上達の近道です。応援しています！
- `を使うのには大切な理由があります。
- `（順序付きリスト）の `
コメント