こんにちは！フロントエンドの世界へようこそ。
HTMLでリストを作るとき、`
- `タグや`
- 黒い丸（ディスク）
- 数字（1, 2, 3…）
- `タグの中身がどんなテキストであっても、自動的に「一、」「二、」と番号を振ってくれるようになります。これは便利ですよね！
つまずきやすいポイント：ここだけ気をつけて！
ここまで読んで「よし、明日から全部変えるぞ！」と思った方に、少しだけ注意点をお伝えしますね。
1. ブラウザの対応状況： `@counter-style`は現代の主要なブラウザでしっかり使えますが、非常に古いブラウザでは表示がデフォルトに戻ってしまうことがあります。でも安心してください。「もし動かなくても、普通の黒丸に戻るだけ」なので、Webサイトが壊れることはありません。
2. ルールはCSSの先頭付近に： このルールはスタイルシートの上の方、他のスタイルを記述する前に書いておくのがお作法です。そうすることで、後から「このリストにはこのルールを当てる！」とスムーズに適用できます。最後に：遊び心を大切に
Web制作は、ルールを覚える作業ではなく「表現を楽しむ作業」です。
「このリスト、何にしようかな？ お肉のリストならお肉の絵文字（🥩）がいいかな？」
そんな風に、ちょっとした工夫でWebサイトに命が吹き込まれます。ぜひ、あなたのプロジェクトでもこの`@counter-style`を使って、世界に一つだけのリストを作ってみてくださいね。
もし分からないことがあっても大丈夫。まずは今日ご紹介したコードをエディタにコピペして、`”☕”`の部分を好きな絵文字に変えて遊んでみることから始めてみましょう。それが、フロントエンド・エンジニアへの第一歩です！
これからも、一緒に楽しくコーディングしていきましょうね。応援しています！
- `タグを使いますよね。でも、いざデザインを当てようとすると「この黒丸（●）や数字（1, 2, 3）以外のマークにはできないの？」と悩んだことはありませんか？
実は、CSSの新しい機能を使えば、自分の好きな絵文字や、特別な記号をリストのマーカーとして自由に使えるようになるんです。今日は、まるで魔法のようにリストをカスタマイズできる「@counter-style（アット・カウンター・スタイル）」というツールをご紹介します。
難しいことはありません。一緒に一つずつ解き明かしていきましょう！
—
リストの「お決まり」を卒業しよう
普段よく見るリストは、大抵こんな感じですよね。
これらはブラウザが「標準で用意している制服」のようなものです。でも、Webサイトの世界では「もっと自分らしい、世界観に合ったマークを使いたい！」と思うことがありますよね。
そんな時、これまでは画像を用意してCSSで背景に設定したり、無理やり``タグを並べたりと、ちょっと泥臭い工夫が必要でした。しかし、`@counter-style`を使えば、ブラウザに「こういうルールで数えてね！」と直接指示を出せるようになったのです。
@counter-styleで「自分だけのルール」を作る
カフェのメニューリストを想像してみてください。「1, 2, 3」と並べるよりも、コーヒー豆のアイコン（☕）が並んでいたほうが、なんだかワクワクしませんか？
まずは、この「コーヒー豆リスト」をCSSで作ってみましょう。
/ @counter-styleで「coffee-beans」という名前のルールを定義します /
@counter-style coffee-beans {
system: cyclic; / 同じ記号を繰り返すという指示です /
symbols: “☕”; / ここに好きな絵文字や記号を入れます /
suffix: ” “; / マークと文字の間のスペースを指定します /
}
/ 実際に使いたいリスト（olタグ）にこのルールを適用します /
.cafe-menu {
list-style-type: coffee-beans;
}
たったこれだけ！`system`や`symbols`といった用語が出てきますが、まずは「名前を付けて、何を表示するか決める場所」と捉えてください。これだけで、ブラウザが勝手にリストをコーヒー豆で飾ってくれます。
記号だけじゃない！「ナンバリング」も自由自在
「記号じゃなくて、独自の数え方をしたい！」という場合も大丈夫です。例えば、漢数字（一、二、三…）でリストを作りたいとき、これまではJavaScriptで頑張る必要がありました。でも、今はCSSだけで完結します。
@counter-style kanji-numbers {
system: numeric; / 数字として数えるという指示です /
symbols: “一” “二” “三” “四” “五”; / 順番に並べる記号を指定 /
suffix: “、”; / 数字の後に「、」を付けてみましょう /
}
.kanji-list {
list-style-type: kanji-numbers;
}
こうすると、`
コメント