リストの「点」を動かしたい！CSSアニメーションの意外な落とし穴と解決策
Webサイトを作っていると、リストの「・（中黒）」や「数字」を少しオシャレに動かしたくなること、ありますよね。マウスを乗せた瞬間に、マーカーがスッと横にスライドしたり、色がふわっと変わったりしたら素敵だと思いませんか？
実はこれ、CSSを触り始めたばかりの人が最初にぶつかる「ちょっと悔しい壁」なんです。今日は、そんな「リストマーカーのアニメーション」という、一見簡単そうで奥深い世界を一緒に覗いてみましょう。
—
そもそも、なぜ「::marker」は動かないの？
CSSには `::marker` という、リストの点や数字を直接指定できる便利な擬似要素があります。これを使えば「`li::marker { color: red; }`」のように色を変えるのは簡単です。
しかし、いざ「アニメーションを付けよう！」と `transition` や `animation` プロパティを書いても、なぜか動いてくれない……。そんな経験はありませんか？
実は、`::marker` 擬似要素に適用できるプロパティには厳しい制限があるんです。色やフォントサイズを変えることはできても、残念ながら「位置を移動させる（transform）」や「不透明度を変える（opacity）」といった、アニメーションの主役となるプロパティの多くが、現時点では `::marker` に対応していないのです。
「ええっ、じゃあどうすればいいの？」と焦らなくても大丈夫。プロの世界では、別の賢い方法でこの問題を華麗に回避しているんですよ。
—
代替案その1：`list-style` を「なし」にして、疑似要素で描き直す
これが一番の王道です。標準のリストマーカーをあえて消してしまい、`::before` 擬似要素を使って「自分でマーカーを描いてしまう」という方法です。
「マーカーを自分で描くなんて大変そう！」と思うかもしれませんが、実はとってもシンプル。お弁当の仕切りを自分で作るような感覚で、リストの横に小さな「飾り」を置くだけなんです。
サンプルコード
/ 元々のリストマーカーを消す /
ul {
list-style: none;
padding-left: 0;
}
li {
position: relative;
padding-left: 20px; / 飾りを置くための余白 /
}
/ 擬似要素で自分だけのマーカーを作る /
li::before {
content: “”; / ここに何か文字を入れることもできます /
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background-color: #ff7e5f;
border-radius: 50%;
/ 準備OK！ここからアニメーションの設定 /
transition: transform 0.3s ease;
}
/ マウスを乗せたら右に動く！ /
li:hover::before {
transform: translateX(5px);
}
この方法なら、`transform` も `opacity` も自由自在。動かしたい放題です！
—
代替案その2：背景画像としてマーカーを置く
もし、ただの丸ではなく「アイコン」や「可愛いイラスト」をマーカーにしたい場合は、`background-image` を使うのがおすすめです。
お買い物袋に好きなシールを貼るようなイメージですね。リストの左側に背景画像として配置し、その画像の位置をアニメーションで動かすことで、まるでマーカーが踊っているような表現が可能です。
サンプルコード
li {
list-style: none;
padding-left: 25px;
/ アイコンを背景に設定 /
background-image: url(‘star.svg’);
background-repeat: no-repeat;
background-position: 0 center;
background-size: 16px;
/ 位置が変わるのを滑らかにする /
transition: background-position 0.3s ease;
}
li:hover {
/ マウスを乗せるとアイコンが少し右へ /
background-position: 5px center;
}
—
大切なのは「できないこと」を深追いしないこと
プロの現場でも、仕様上の制限にぶつかることは日常茶飯事です。「なんで動かないんだ！」と悩み続けるよりも、「別の手段で同じ見た目を作れないかな？」と視点を切り替えることが、上達への一番の近道です。
- `::marker` は「色や文字」を変えるためのもの
- 「動き」を付けたいなら、擬似要素（::before）や背景画像を活用する
この2つを覚えておくだけで、あなたの作るWebサイトの表現力はグンと広がります。
最初は難しく感じるかもしれませんが、こうやって少しずつ「引き出し」を増やしていけば大丈夫ですよ。今日紹介したコードを、ぜひあなたのエディタにコピペして、自分好みにいじってみてくださいね。
皆さんの楽しいコーディングライフを応援しています！
コメント