はじめに
Chromeのバージョン135以降でCSSのみでカルーセルを実装できるようになったので、実際に試してみました。このようなことが、Javascript無しで実装可能です！
実装方法
STEP1：カードのレイアウトを整え、横並びにする
HTML
<div class="container">
<div class="carousel">
<!-- カード1 -->
<div class="card">
<a href="/media/entry/36126">
<img src="/media/wp/wp-content/uploads/2021/09/icatch_tableau-768x402.png" alt="記事1">
<div class="info">
<span class="material-icons">schedule</span>
<span>2025.03.19</span>
</div>
<h3>Tableau抽出の増分更新の設定を検証！</h3>
</a>
</div>
<!-- カード2 -->
<div class="card"> <a href="/media/entry/35935">
<img src="/media/wp/wp-content/uploads/2022/01/icatch_ai_img-768x402.png" alt="記事2">
<div class="info">
<span class="material-icons">schedule</span>
<span>2025.03.18</span>
</div>
<h3>AI TRiSMは何を指しているのか</h3>
</a>
</div>
<!-- (省略) -->
</div>
</div>
CSS
※装飾のスタイルは省略しています
.carousel {
display: grid;
grid-auto-flow: column;
gap: 1rem;
}
.card {
width: 100%;
max-width: 260px;
min-width: 250px;
padding: 16px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.card a {
display: block;
text-decoration: none;
}
.card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
STEP2：スクロール領域を指定してスナップさせる
スクロールしたときに表示領域の中央にピタッと停止するようにscroll-snap-typeとscroll-snap-alignを指定します。
CSS
.carousel {
overflow-x: auto;/*carousel内の横スクロールを有効にする*/
scroll-snap-type: x mandatory;/*表示領域のスクロールの位置を調整*/
scroll-behavior: smooth;/*スクロールを滑らかにする*/
}
.card {
scroll-snap-align: center;/*スクロールの停止する位置を指定*/
}scroll-snap-alignはコンテナ（carousel）の子要素に指定します
横スクロールをマウスホイールのみで動かしたい場合、Javascriptが必要です。デモでは、SHIFTキーを押しながらマウスホイールを動かしています
STEP3：スクロールボタンを追加
Chromeのバージョン135で追加された、擬似要素::scroll-button()を使用し、スクロールボタンを左右に配置します。押すとスクロール領域の85%分がスクロールされ、次のカードへスムーズに移動できます。
CSS
.carousel::scroll-button(*) {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border: 0;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
font-size: 1.5rem;
cursor: pointer;
z-index: 10;
}
.carousel::scroll-button(*):disabled {
color: rgb(0 0 0 / 0.2);
cursor: unset;
}
.carousel::scroll-button(left) {
content: "←";
left: 0.5rem;
}
.carousel::scroll-button(right) {
content: "→";
right: 0.5rem;
}
STEP4：スクロールマーカーを追加
Chromeのバージョン135で追加された、scroll-marker-groupを使用し、スクロールマーカー（インジケーター）を追加します。
CSS
.carousel {
scroll-marker-group: after;/*インジケータをcarouselの後に配置する*/
}
.carousel::scroll-marker-group {
display: flex;
justify-content: center;
margin-top: 1rem;
gap: 0.5rem;
}
.carousel>.card::scroll-marker {
content: "";
width: 12px;
height: 12px;
border: 2px solid #999;
border-radius: 50%;
}
/*現在地*/
.carousel>.card::scroll-marker:target-current {
background: #333;
border-color: #333;
}
STEP5：スクロールバーを非表示にする
scrollbar-widthを使用しスクロールを非表示にし、paddingで余白を整えたら完成です。※scrollbar-width:noneにしても、スクロール自体は可能です。
CSS
.carousel {
padding: 1rem;
scrollbar-width: none;
}
まとめ
現時点（2025年5月）では主要ブラウザでの対応は限定的ですが、構文自体はシンプルで、手軽にカルーセルが構築できました！Chrome公式のギャラリーでは、さまざまなパターンの使い方が紹介されています。今後はこちらも参考にして応用してみたいです。
参考サイト
こちらのサイトを参考にさせていただきました。
