皆さん、こんにちは！世界最高峰のフロントエンド・スペシャリストであり、皆さんのWeb制作をそっとサポートする主筆ライターの私です。
Webサイトで情報を整理するとき、リストって本当によく使いますよね！例えば、お店のメニューだったり、ブログの記事の目次だったり、手順を説明する時だったり。でも、HTMLの`
- `や`
- 牛乳
- パン
- 卵
- `（List Item）タグで項目を並べます。
順序ありリスト ` ` と ` `
今度は、カップラーメンの作り方を考えてみましょう。
1. フタを開ける
2. お湯を注ぐ
3. 3分待つ
4. 完成！これはどうでしょう？もし「3分待つ」を最初にやったら、美味しくないですよね！このように、順番に意味があるものを並べる時に使うのが「順序ありリスト（Ordered List）」です。HTMLでは`
- `タグの中に`
- `タグで項目を並べます。
これらのリストは、情報を整理して見やすくするだけでなく、Googleなどの検索エンジンにも「これはリストだよ」と正しく伝える役割も持っているんですよ。とっても大切なんです！
—
「ちょん」の種類を変える魔法！ `list-style-type`プロパティ
さて、本題に入りましょう。まずは、リストのマーカーの種類を変える一番基本的な方法からご紹介します。それがCSSの`list-style-type`プロパティです。
これはまるで、文房具屋さんでノートに書く時のペン先を選ぶようなもの。丸いペン先、四角いペン先、はたまた何も書かない透明なペンなんてのもありますよね。それと同じ感覚で、リストのマーカーの種類を指定できます。
` `（順序なしリスト）で使える代表的な種類
| 値 | 説明 | 見た目（例） |
| :——- | :————————————- | :———– |
| `disc` | デフォルトの黒丸 | ● |
| `circle` | 白抜きの丸 | ○ |
| `square` | 四角 | ■ |
| `none` | マーカーを非表示にする | |` `（順序ありリスト）で使える代表的な種類
| 値 | 説明 | 見た目（例） |
| :—————- | :—————————————– | :———– |
| `decimal` | デフォルトの数字 (1, 2, 3…) | 1. |
| `lower-alpha` | 小文字のアルファベット (a, b, c…) | a. |
| `upper-alpha` | 大文字のアルファベット (A, B, C…) | A. |
| `lower-roman` | 小文字のローマ数字 (i, ii, iii…) | i. |
| `upper-roman` | 大文字のローマ数字 (I, II, III…) | I. |
| `decimal-leading-zero` | 0から始まる数字 (01, 02, 03…) | 01. |どうですか、たくさんありますよね！実際に試してみるのが一番分かりやすいので、コードを見てみましょう。
list-style-typeの例
リストマーカーの種類を変えてみよう！
順序なしリストの例
- 牛乳
- 食パン
- 卵
- コーヒー豆
- 紅茶
- 緑茶
- りんご
- みかん
- バナナ
- 水
- ジュース
- 炭酸水
順序ありリストの例
- フタを開ける
- お湯を注ぐ
- 3分待つ
- 準備体操
- ウォーミングアップ
- 本番
- 第一章
- 第二章
- 第三章
- 初級編
- 中級編
- 上級編
/ CSSファイル (style.cssなど) /
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}h1, h2 {
color: #333;
}ul, ol {
margin-bottom: 30px; / 各リストの下にスペースを空ける /
padding-left: 40px; / マーカーとテキストの間に余裕を持たせる /
}li {
margin-bottom: 5px; / リスト項目間のスペース /
}/ 順序なしリストのスタイリング /
.disc-list {
list-style-type: disc; / デフォルトの黒丸 /
}.circle-list {
list-style-type: circle; / 白抜きの丸 /
}.square-list {
list-style-type: square; / 四角 /
}.no-marker-list {
list-style-type: none; / マーカーなし /
}/ 順序ありリストのスタイリング /
.decimal-list {
list-style-type: decimal; / デフォルトの数字 /
}.alpha-list {
list-style-type: lower-alpha; / 小文字アルファベット /
}.roman-list {
list-style-type: upper-roman; / 大文字ローマ数字 /
}.leading-zero-list {
list-style-type: decimal-leading-zero; / 0から始まる数字 /
}このコードをHTMLファイルとCSSファイルにそれぞれ保存して、ブラウザで開いてみてください。リストのマーカーが指定した通りに変化する様子が見えるはずです！
特に`list-style-type: none;`はよく使います。マーカーを完全に非表示にして、後から自分だけのアイコンやデザインを適用したい時に便利ですよ。
—
マーカーの位置を調整してみよう！ `list-style-position`
`list-style-type`でマーカーの種類を変えましたが、もう一つ、地味だけど結構大事なプロパティがあります。それが`list-style-position`です。
これは「マーカーがリストのテキストに対して、どこに位置するか」を指定するプロパティです。値は主に2つ。
- `outside` (デフォルト): マーカーがリスト項目のボックスの外側に表示されます。テキストが複数行になった場合、マーカーの横から回り込むように表示されます。
- `inside`: マーカーがリスト項目のボックスの内側に表示されます。テキストが複数行になった場合、マーカーの下にもテキストが回り込んで表示されます。
言葉だけだと分かりにくいですよね。実際に見てみましょう。
マーカーの位置の例
outside (デフォルト)
- これは長いテキストのリスト項目です。マーカーが外側に表示され、テキストはマーカーの横からきれいに回り込みます。
- もう一つの長いテキストのリスト項目です。マーカーが外側に表示され、テキストはマーカーの横からきれいに回り込みます。
inside
- これは長いテキストのリスト項目です。マーカーが内側に表示され、テキストはマーカーの下にも回り込みます。
- もう一つの長いテキストのリスト項目です。マーカーが内側に表示され、テキストはマーカーの下にも回り込みます。
/ CSSファイル (一部抜粋) /
.position-outside {
list-style-position: outside; / マーカーがテキストの外側 /
border: 1px solid lightgray; / 違いを分かりやすくするために枠線を追加 /
padding: 10px;
}.position-inside {
list-style-position: inside; / マーカーがテキストの内側 /
border: 1px solid lightgray; / 違いを分かりやすくするために枠線を追加 /
padding: 10px;
}ブラウザで確認すると、テキストの回り込み方が違うのが分かりますよね。特にテキストが長くなるリストでは、この違いがデザインに大きく影響することがあります。
—
究極のショートハンド！ `list-style`プロパティ
ここまで、`list-style-type`と`list-style-position`の2つのプロパティを見てきました。さらに、リストのマーカーに画像を適用する`list-style-image`というプロパティもあるのですが、これは後ほど触れますね。
実はこれらのプロパティは、`list-style`という一つのプロパティでまとめて指定することができます。お料理で例えるなら、材料（type）、調理法（position）、盛り付け（image）を一つのお皿にまとめて出すようなもの。
書くCSSの量が減るので、コードがスッキリします。記述順序は自由ですが、一般的には以下の順で書くことが多いです。
`list-style:
;` 例えば、「白丸で、マーカーはテキストの外側に配置する」リストを作りたいなら、こう書けます。
ul.my-list {
list-style: circle outside;
/ list-style-type: circle; と
list-style-position: outside; をまとめて指定している /
}これだけでOK！便利ですよね。
—
「ちょん」を画像にしちゃう！？ `list-style-image`
「黒丸や四角じゃなくて、もっとオリジナリティのあるマーカーにしたい！」と思ったことはありませんか？そんな時に使えるのが、`list-style-image`プロパティです。これを使えば、マーカーに好きな画像を指定できます。
画像マーカーの例
- オリジナルマーカーで装飾
- かわいいアイコンも使えます
- あなたのアイデアを形に！
/ CSSファイル (一部抜粋) /
.image-marker-list {
/ 画像のURLを指定します。実際の画像パスに合わせて変更してください。 /
/ ここでは、星のアイコンの画像を例としています /
list-style-image: url(‘star.png’); / 好きな画像のパスを指定 /
list-style-position: inside; / 画像マーカーはinsideの方が綺麗に見えることが多い /
}これでリストのマーカーが星の画像に変わるはずです！
ちょっとした注意点と現場の知恵
実は、この`list-style-image`、あまり使われないかもしれません。なぜかって？
- サイズの調整が難しい: 指定した画像は、その原寸大で表示されてしまいます。CSSでマーカー画像のサイズを直接調整するプロパティがないため、画像自体をあらかじめ適切なサイズに加工しておく必要があります。これが結構面倒だったりします。
- テキストとの位置調整が難しい: 画像のサイズによっては、テキストとマーカーの位置がうまく合わずに、ちょっと不格好に見えてしまうことがあります。
- 解像度の問題: 高解像度ディスプレイで見た時に画像がぼやけてしまうことも。
「じゃあ、どうすればもっと自由にカスタムマーカーを作れるの？」という声が聞こえてきそうですね。ご安心ください！次のセクションで、まさにそのための強力な魔法をお教えします！
—
もっと自由自在に！ `::marker`擬似要素の登場！
さあ、ここが今日の記事のメインディッシュです！これまでの`list-style-type`や`list-style-image`ではできなかった「マーカーそのもの」に、もっと細かくCSSを適用できるようになったのが、`::marker`擬似要素です。
これは、リストの各項目のマーカー部分だけをCSSで直接触れるようにしてくれる、画期的な機能なんです！これが出た時は、Web制作の現場で「おぉ！これは使えるぞ！」とざわつきましたね。それまでは、もっと複雑なCSSやHTMLの構造で無理やりカスタムマーカーを実現していたんですから。
`::marker`を使うと、こんなことができるようになります。
- マーカーの色を変える
- マーカーのサイズを変える
- マーカーに影をつける
- マーカーを絵文字や任意の文字列にする
まるで、マーカー一つ一つを筆と絵の具で描くように、あなたの思い通りにデザインできるんですよ！
`::marker`を使ってみよう！
まずはシンプルな例から。リストのマーカーの色とサイズを変えてみましょう。
`::marker`擬似要素でカスタム！
- 特別なリスト項目１
- 特別なリスト項目２
- 特別なリスト項目３
- 第1ステップ
- 第2ステップ
- 第3ステップ
/ CSSファイル (一部抜粋) /
.custom-marker-list li::marker {
color: #e74c3c; / マーカーの色を赤っぽく /
font-size: 1.5em; / マーカーのサイズを大きく /
/ font-weight: bold; / / 太字にすることも可能 /
}.custom-order-marker-list li::marker {
color: #27ae60; / マーカーの色を緑っぽく /
font-size: 1.2em; / マーカーのサイズを少し大きく /
font-weight: bold; / 太字にする /
/ フォントファミリーも指定できます /
font-family: ‘Arial Black’, sans-serif;
}どうでしょう？これだけで、デフォルトのマーカーとは一味違う、個性的なリストになりましたよね！
`content`プロパティでマーカーを自由に変える！
`::marker`の真骨頂は、`content`プロパティと組み合わせた時に発揮されます。`content`プロパティを使うと、マーカーそのものを好きな文字列や絵文字に置き換えることができるんです。
例えば、リストの項目をキラキラした星の絵文字「✨」にしたり、「No. 」という文字列にしたりできます。
絵文字や文字列をマーカーに！
- 素敵なアイデア
- わくわくする体験
- 感動的な瞬間
- 最初の課題
- 次の課題
- 最後の課題
/ CSSファイル (一部抜粋) /
.emoji-marker-list li::marker {
content: “✨ “; / マーカーをキラキラの絵文字にする。後ろに半角スペースを入れると、テキストとの間に少し隙間ができて見やすくなります /
color: orange; / 絵文字の色を変える（対応している絵文字とブラウザの場合） /
font-size: 1.2em;
}.text-marker-list li::marker {
content: “No. ” counter(list-item) “. “; / “No. 1. “, “No. 2. ” のように表示 /
color: #3498db; / 青系の色に /
font-weight: bold;
font-size: 1.1em;
}/ counter(list-item) は、順序付きリストの現在の番号を自動で表示するためのCSS関数です。
これを使えば、自分で数字を打ち込まなくても、自動的に番号が振られます。便利ですよね！ /これで、あなたのリストは一気に特別な雰囲気をまとうはずです！絵文字を使うと、視覚的に楽しく、メッセージも伝えやすくなりますよね。
`::marker`をもっと活用するコツ
- Font Awesomeなどのアイコンフォントと組み合わせる:
絵文字だけでなく、Font Awesomeのようなアイコンフォントを使えば、さらに多種多様なアイコンをマーカーとして利用できます。例えば、チェックマークや矢印など、デザインの幅がぐっと広がります。
/ 例: Font Awesomeのチェックマークアイコンをマーカーに /
/ Font AwesomeのCSSを読み込む必要があります /
.fa-marker-list li::marker {
font-family: “Font Awesome 5 Free”; / Font Awesomeのフォントを指定 /
font-weight: 900; / Solidアイコンの場合 /
content: “\f00c”; / チェックマークアイコンのUnicode /
color: #28a745;
font-size: 1.2em;
}（※Font Awesomeを使うには、別途CDNなどでライブラリを読み込む必要があります。）
- アクセシビリティへの配慮:
`content`プロパティで追加した絵文字や文字列は、スクリーンリーダー（視覚障がいのある方がWebサイトを読み上げるソフト）によっては読み上げられない場合があります。もしマーカーがリストの重要な意味を持つ場合は、リスト項目自体にその情報を加えるなど、配慮も忘れないようにしましょう。
—
まとめと次のステップ
皆さん、お疲れ様でした！今日はリストの「ちょん」を操る魔法、`list-style-type`、`list-style-position`、そして強力な`::marker`擬似要素について、じっくりと学んできました。
- `list-style-type`で基本的なマーカーの種類を変える
- `list-style-position`でマーカーの位置を調整する
- `list-style-image`でマーカーを画像にする（ただし、ちょっと上級者向けかも？）
- そして何より、`::marker`擬似要素で、マーカーの色、サイズ、そして中身（絵文字や文字列）まで、自由自在にカスタマイズできるようになりましたね！
これらを使いこなせば、あなたのWebサイトのリストは、もう単なる情報の羅列ではなく、デザインの一部として、ユーザーに視覚的に訴えかける魅力的な要素になるはずです。
「Web制作って、こんな細かいところまで調整できるんだ！」と、ちょっと感動しませんでしたか？私も初めて`::marker`を知った時は、本当に目からウロコでした。「これで面倒なマークアップをせずに、スマートにリストが作れる！」と。
最初は「あれ？うまくいかないな…」と思うこともあるかもしれません。でも、それがプログラミングやWeb制作の醍醐味です。焦らず、一つ一つ試しながら、ご自身のペースで進めていきましょう。今日学んだことを活かして、あなたのWebサイトをさらに素敵なものにしてくださいね！
これからも、皆さんのWeb制作がもっと楽しく、もっと自由になるような情報をお届けしていきますので、どうぞお楽しみに！
- `タグで項目を並べます。
- `で作ったリスト、いつも同じ黒い丸や数字のマーカーで、「なんだかちょっと物足りないな…」なんて思ったこと、ありませんか？
安心してください！今日はそんなリストの「ちょん」、つまりマーカーを、あなたの思い通りにカスタマイズする魔法をお教えします。まるで白いキャンバスに絵を描くように、自由自在にマーカーをデザインできるようになりますよ。さあ、一緒にリストの世界をカラフルに彩ってみましょう！
—
まずは基本をおさらい！リストってどんな時に使うんだっけ？
そもそも、リストって何のために使うんでしょう？
順序なしリスト ` ` と ` `
買い物リストを想像してみてください。
このリスト、順序はあまり関係ありませんよね？牛乳から買っても、卵から買っても、最終的に全部買えればOKです。このように、順番に意味がないものを並べる時に使うのが「順序なしリスト（Unordered List）」です。HTMLでは`
- `タグの中に`
コメント