はじめに
みなさんは、CSSだけでカルーセルを作れるのは、ご存じですか？
今までは、ライブラリーを使ったりしても、アクセシビリティの担保ができてなかったり、
少し複雑なJSを書かなくちゃいけなかったりと、カルーセルを自作するのは大変でした。
しかし、Chrome 135 以降では、CSS Overflow Module Level 5 が適応され、CSSだけで、カルーセルが作れるようになりました。
カルーセルの作り方は、こちらの記事をご覧ください。
この記事では、Chrome 142 以降で使えるようになった、カルーセルのスライダーのデザインを変更できる:target-before・:target-after について紹介しようと思います。
:target-before・:target-after
:target-before は、カルーセルで表示されている要素を示すスライダーの前の要素のデザインを変更する擬似クラスです。
.carousel-item::scroll-marker:target-before {
background-color: rgb(0 255 0 / .5);
}
:target-after は、カルーセルで表示されている要素を示すスライダーの後ろの要素のデザインを変更する擬似クラスです。
.carousel-item::scroll-marker:target-after {
background-color: rgb(255 0 0 / .5);
}
サンプル
See the Pen Untitled by degudegu2510 | Qiita (@degudegu2510) on CodePen.
まとめ
この記事では、Chrome 142 以降で使えるようになった、カルーセルのスライダーのデザインを変更できる:target-before・:target-after について紹介しました。
ぜひ :target-before・:target-afterを使って、カルーセルのスライダーのデザインを変更してみてください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。