カルーセルはもうCSSだけで実装できる！ 疑似要素::scroll-button()と::scroll-marker()の使い方を解説

Chrome 135でサポートされた::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。さらに::scroll-marker()疑似要素は、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセットを作成できます。 これらを使用すると、これまでJavaScriptなしでは実装できなかったカルーセルをCSSだけで実装できるようになります。その実装方法、CSSで実装したさまざまなカルーセルを紹介します。 Carousels with CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに ::scroll-button()と::scroll-marker()の新しい疑似

[coliss]

CSSでカルーセルを実装する方法、CSSで実装したさまざまなカルーセル

[kenzy_n]

全く関係の無いことだが、カールセルと聞くとカールセル麻紀が思い浮かぶことがある。

[poliphilus]

カルーセルとカルーセル麻紀のカルーセルは同じものなので特に間違いではない。かつて勤めていたゲイバー「カルーゼル」からとったものらしい。ちなみにカルーセルとはいわゆるメリーゴーラウンドのこと

[w_bonbon]

あとはループという概念がCSSだけで出来たら最高だなぁ

[watatane]

カルーセル麻紀さんが若い頃、地元の札幌が嫌で家出した時、途中で親族に捕まったのが近隣の滝川市（黒柳徹子さんのお母さんの出身地）というカルーセル豆知識

[jintrick]

素晴らしい。ユーザースタイルで簡単に無意味化できる！！

[u_sho]

お願いだからマークアップ言語をチューリング完全にしないでください（もうなってるかもだが） > あとはループ

[PikaCycling]

「カルーセル（carousel） とは？ 1 回転木馬。 2 コンピューターなどの表示画面の方式」とあるからカルーセルもカルーセル麻紀も一緒で間違いないですね。

[Finding]

CSS進化しているなあ

[zkq]

カルーセルに他の意味あったんだな

[yoshi-na]

んー、CSSになんでもやらせ過ぎなんよ

[ugo_uozumi]

ブコメ欄がカルーセル麻紀の豆知識スレっぽくなってて草

[aox]

Firefoxだとダメでした

[suekunhello]

もう何年このネタ扱ってるんだろう。CSSの対応を追うのも時代遅れなのかも。

[hogeaegxa]

サポート状況的にまだ使うのは難しそうだが、使えるようになれば楽できそうだ

[sekreto]

フィルムスライドを入れるカルーセルとカルーセル麻紀さんの二つ想起したぞぃ

[AzuLitchi]

たしかにループしないとカルーセル（回転木馬）とは言えないよなあ。　これじゃフライングパイレーツだ

[tamanecoplus]

情報を詰め込みたいのは分かるが、縦スクロールの途中にカルーセルを入れるUIはやめて頂戴

[KoshianX]

ほう、こんなものが使えるようになってたのか

[inamem9999]

麻紀勢が結構見られて安心

[ultimatebreak]

Safariの対応が遅すぎてモヤモヤしてる

[tanakamak]

カルーセルの巻

[anonruru]

今までCSSで出来るものはCSSで作りたい派だったけど、anchor使ってなかなか複雑なもの作った時ははたして本当に全部CSSでやるべきなのか悩んだことがある。

[iiko_1115]

CSSどんどん複雑になってくな