横にスクロールするスライドをCSSだけで｜scroll-snapでピタッと止める、コピペで使える4種類と使う・使わないの判断

お知らせや制作実績を、横にスクロールして1枚ずつ見せるスライド。JavaScriptのスライダーを入れなくても、CSSだけで「スクロールすると、1枚ずつピタッと止まる」形が作れます。使うのは scroll-snap（スクロール・スナップ：スクロールを決まった位置で止める仕組み）です。

使いどころ

スマホで、同じ種類のものを「見たい人だけ横に見てもらう」場所に使う。全員に必ず読んでほしい情報は、横に隠さず縦に並べる。

今回は、1枚ずつ止まる基本の形、真ん中で止まる形、小さいカードを流し見る形、飛ばさず1枚ずつ見せる形の4種類を、コピペ用のコードつきで紹介します。自動で切り替わる機能や、矢印ボタンは付けていません。その理由も、あとで書きます。

連載「WEBの技術」の16回目です。
今回は「横にスクロールするスライド」。CSSだけで、どこまでできるかを見ていきます。

完成見本：横にスクロールすると、1枚ずつ止まる

下の見本は、記事の中だけ短いJavaScriptで自動で横に送っています。スマホなら指で、パソコンならトラックパッドの横スクロールや、Shift キーを押しながらのホイールで動かせます。途中で手を離しても、スライドの左端がそろう位置で止まります。

MANDATORY1. 1枚ずつ止まるスライドお知らせ・写真の横スライド

※ 見本は見た目を見せるためのもので、読み上げソフトでは読まれないようにしています。端末の「動きを減らす」設定がオンのときは、自動では送りません。触っている間も止まります。

コピペ用のコード

4種類とも、最初にスライド1枚の見た目（共通のCSS）を入れ、そのうえで並べ方のCSSを足します。共通のCSSは、各見本のコードの先頭にも入れてあります。CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-snp は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

スライドの中の kd-snp-img は、写真の代わりに置いた色の箱です。実際に使うときは、ここを画像（<img>）に差し替えます。コピペ用のHTMLには、キーボードでも動かせるように tabindex="0" と名前（aria-label）を付けています。理由は「見る人への配慮」で説明します。

1. 1枚ずつ止まるスライド

いちばん基本の形です。横にスクロールすると、スライドの左端が箱の左端にそろう位置で、ピタッと止まります。1枚の幅を80%にして、次のスライドを少しだけ見せているのがポイントです。「横に続きがある」と、触る前に分かります。

HTML

<div class="kd-snp-start" tabindex="0" role="region" aria-label="お知らせのスライド">
  <div class="kd-snp-slide">
    <div class="kd-snp-img">1</div>
    <p class="kd-snp-title">新しいお知らせ</p>
  </div>
  <div class="kd-snp-slide">
    <div class="kd-snp-img">2</div>
    <p class="kd-snp-title">制作実績のご紹介</p>
  </div>
  <!-- 同じ形のスライドをくり返す -->
</div>

CSS

/* 4種類に共通：スライド1枚の見た目 */
.kd-snp-slide {
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  overflow: hidden;
}
.kd-snp-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: #BAE6FD;
  color: #0369A1;
  font-size: 28px;
  font-weight: 800;
}
.kd-snp-slide:nth-child(3n+2) .kd-snp-img { background: #E0F2FE; }
.kd-snp-slide:nth-child(3n) .kd-snp-img { background: #D8E6F0; }
.kd-snp-title {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}
.kd-snp-start {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* 横方向に、必ずどこかで止める */
  scroll-snap-type: x mandatory;
}
.kd-snp-start > .kd-snp-slide {
  /* 1枚を箱の80%の幅にして、次を少し見せる */
  flex: 0 0 80%;
  /* スライドの左端で止める */
  scroll-snap-align: start;
}

2. 真ん中で止まるスライド

止まる位置を「スライドの真ん中」にした形です。1の start を center に変え、幅を70%にしました。止まったスライドが中央にきて、左右に前後のスライドがのぞきます。写真を1枚ずつ主役として見せたい場所に向いています。

HTML

<div class="kd-snp-center" tabindex="0" role="region" aria-label="制作実績のスライド">
  <div class="kd-snp-slide">
    <div class="kd-snp-img">1</div>
    <p class="kd-snp-title">新しいお知らせ</p>
  </div>
  <div class="kd-snp-slide">
    <div class="kd-snp-img">2</div>
    <p class="kd-snp-title">制作実績のご紹介</p>
  </div>
  <!-- 同じ形のスライドをくり返す -->
</div>

CSS

/* 4種類に共通：スライド1枚の見た目 */
.kd-snp-slide {
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  overflow: hidden;
}
.kd-snp-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: #BAE6FD;
  color: #0369A1;
  font-size: 28px;
  font-weight: 800;
}
.kd-snp-slide:nth-child(3n+2) .kd-snp-img { background: #E0F2FE; }
.kd-snp-slide:nth-child(3n) .kd-snp-img { background: #D8E6F0; }
.kd-snp-title {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}
.kd-snp-center {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.kd-snp-center > .kd-snp-slide {
  flex: 0 0 70%;
  /* スライドの真ん中を、箱の真ん中にそろえて止める */
  scroll-snap-align: center;
}

3. 小さいカードを流し見る

小さいカードをたくさん並べて、指で流して見てもらう形です。止め方を proximity（プロキシミティ：近く）にすると、止まる位置の近くでスクロールを終えたときだけ止まり、それ以外は自由な位置で止まります。scroll-padding で、止まる位置を箱の端から16px内側にしています。

HTML

<div class="kd-snp-near" tabindex="0" role="region" aria-label="関連記事の一覧">
  <div class="kd-snp-slide">
    <div class="kd-snp-img">1</div>
    <p class="kd-snp-title">新しいお知らせ</p>
  </div>
  <div class="kd-snp-slide">
    <div class="kd-snp-img">2</div>
    <p class="kd-snp-title">制作実績のご紹介</p>
  </div>
  <!-- 同じ形のスライドをくり返す -->
</div>

CSS

/* 4種類に共通：スライド1枚の見た目 */
.kd-snp-slide {
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  overflow: hidden;
}
.kd-snp-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: #BAE6FD;
  color: #0369A1;
  font-size: 28px;
  font-weight: 800;
}
.kd-snp-slide:nth-child(3n+2) .kd-snp-img { background: #E0F2FE; }
.kd-snp-slide:nth-child(3n) .kd-snp-img { background: #D8E6F0; }
.kd-snp-title {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}
.kd-snp-near {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 16px;
  /* 止まる位置の近くのときだけ止める */
  scroll-snap-type: x proximity;
  /* 止まる位置を、箱の左端から16px内側にする */
  scroll-padding: 0 16px;
}
.kd-snp-near > .kd-snp-slide {
  flex: 0 0 140px;
  scroll-snap-align: start;
}

4. 飛ばさず1枚ずつ見せる

1枚を箱の幅いっぱいにして、勢いよくスクロールしても途中のスライドを飛ばさないようにした形です。scroll-snap-stop: always を付けると、1回のスクロールで次の1枚までしか進みません。順番に見てほしい手順や、ビフォーアフターに使います。

HTML

<div class="kd-snp-one" tabindex="0" role="region" aria-label="手順のスライド">
  <div class="kd-snp-slide">
    <div class="kd-snp-img">1</div>
    <p class="kd-snp-title">手順 1</p>
  </div>
  <div class="kd-snp-slide">
    <div class="kd-snp-img">2</div>
    <p class="kd-snp-title">手順 2</p>
  </div>
  <!-- 同じ形のスライドをくり返す -->
</div>

CSS

/* 4種類に共通：スライド1枚の見た目 */
.kd-snp-slide {
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  overflow: hidden;
}
.kd-snp-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: #BAE6FD;
  color: #0369A1;
  font-size: 28px;
  font-weight: 800;
}
.kd-snp-slide:nth-child(3n+2) .kd-snp-img { background: #E0F2FE; }
.kd-snp-slide:nth-child(3n) .kd-snp-img { background: #D8E6F0; }
.kd-snp-title {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #10283A;
}
.kd-snp-one {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.kd-snp-one > .kd-snp-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* 勢いよく動かしても、この1枚で必ず止める */
  scroll-snap-stop: always;
}

仕組み：2か所に指定を書くだけ

スライドを止めているのは、外の箱とスライド1枚の、2か所の指定です。

/* 外の箱：横にスクロールさせて、止め方を決める */
overflow-x: auto;
scroll-snap-type: x mandatory;

/* スライド1枚：どこで止めるかを決める */
scroll-snap-align: start;

1. 外の箱を、横にスクロールできるようにする

display: flex で中身を横一列に並べ、flex: 0 0 80% で1枚の幅を「箱の80%で、縮めない」に固定します。並べた合計が箱より広くなるので、overflow-x: auto（横にはみ出した分はスクロールで見せる）で、箱の中だけが横に動くようになります。ページ全体は横に動きません。

2. scroll-snap-type：止める方向と、止め方

scroll-snap-type は、スクロールする箱に付けます。x は横方向で止めるという意味です。後ろの言葉で止め方が変わります。

書き方	止まり方	向いている場所
mandatory（マンダトリー：必ず）	スクロールを終えると、必ずどこかの止まる位置へ寄る	1枚ずつ見せるスライド（1・2・4の見本）
proximity（プロキシミティ：近く）	止まる位置の近くで終えたときだけ寄る。離れていればその場で止まる	小さいカードを流し見る一覧（3の見本）

3. scroll-snap-align：スライドのどこで止めるか

こちらはスライド1枚ずつに付けます。start はスライドの左端を箱の左端に、center はスライドの真ん中を箱の真ん中にそろえて止めます。2の見本は center です。ただし最初の1枚は、それより左へはスクロールできないので、左に寄ったまま始まります。

4. scroll-snap-stop と scroll-padding

scroll-snap-stop: always は、止まる位置を飛ばさずに、必ずそこで止める指定です。指で勢いよくはじいても、次の1枚で止まります。scroll-padding は、止まる位置を箱の端から内側へずらす指定で、3の見本では左に16pxのすき間を残して止めています。

MDNでは、scroll-snap-type は2022年4月から、scroll-snap-stop は2022年7月から、主要なブラウザでそろって使える「Baseline」の広く使える段階と表示されています。今のブラウザなら、特別な対策なしで使えます。

数値を変えるとどうなるか

スライド1枚の幅（1の見本）

flex の幅だけを変えて、同じスライドを並べました。

幅 100%：次があると分からない

幅 80%（見本）：次が少し見える

幅 60%：一度に見える量が多い

幅を100%にすると、箱の中にスライドが1枚だけ見え、右に続きがあることが分かりません。スマホなどでは、触るまでスクロールバーが表示されないことも多く、「これで全部」と受け取られやすくなります。80%前後にすると、右に次の1枚が少しのぞき、触らなくても横に続くと分かります。60%まで狭くすると一度に見える量は増えますが、1枚の写真が小さくなります。

変えるところ	小さくすると	大きくすると
1枚の幅（flex の 80%）	一度に見える枚数が増え、1枚が小さくなる	100%に近いほど、次があると気づきにくい
すき間（gap の 12px）	スライドが続いた1つの帯に見える	1枚ずつが独立して見える
止める位置（scroll-padding）	0 なら箱の端ぴったりで止まる	端に余白を残して止まり、前の1枚も少し見える

スマホと、見る人への配慮

キーボードでも動かせるようにする

指やマウスを使わず、キーボードでページを見ている人もいます。横にスクロールする箱は、Tab キーで選べないと、矢印キーで動かせず、右に隠れたスライドへたどり着けません。コピペ用のHTMLで外の箱に tabindex="0" を付けているのはこのためで、Tab キーで箱を選んでから、左右の矢印キーで動かせます。選べる箱には、読み上げソフトが「何の箱か」を伝えられるよう、role="region" と aria-label（見えない名前）も付けています。

横に続きがあることを、見た目で伝える

スクロールバーを隠すCSSもありますが、隠すと「横に動く」という手がかりがさらに減ります。スクロールバーは残し、1枚の幅を80%前後にして、次のスライドをのぞかせるのが確実です。

自動で切り替えない

この記事の見本は説明のために自動で送っていますが、コピペ用のコードには自動で切り替える機能を入れていません。読んでいる途中で勝手に次へ進むと、読み終わらないうちに文字が消えます。動きが苦手な人にとっても負担になります。スライドを自動で動かすなら、止めるボタンを付けたうえで、端末の「動きを減らす」設定（prefers-reduced-motion）がオンのときは動かさない作りが必要です。

やりすぎ注意

横スライドは、2つ目以降を見てもらえるとは限りません。スクロールしない人には、最初の1枚しか届きません。ページの中に横スライドをいくつも置くと、縦に読み進めたい人の邪魔にもなります。1ページに1〜2か所までにして、大事な情報は1枚目に置きます。

横スライドは「場所をとらずにたくさん見せられる」ぶん、「見てもらえないこともある」入れ物だと考えています。
何を最初の1枚にするかで、効き方が変わります。

AIに頼むなら

この横スライドは、Claudeなどの生成AIに頼んでもすぐ作ってもらえます。そのときは「CSSだけで」「止め方」「1枚の幅」「キーボードでの扱い」まで、まとめて伝えると、手直しが少なく済みます。

制作実績の写真を、横にスクロールして1枚ずつ見せるスライドをHTMLとCSSで作って。JavaScriptは使わない。
scroll-snap-type: x mandatory で、1枚は箱の80%の幅にして次の1枚を少し見せる。自動で切り替えない。
外の箱は tabindex="0" と aria-label を付けて、キーボードの矢印キーでも動かせるように。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

ページ全体が横に動いていないか。スマホの幅で、スライド以外の場所を横にスワイプしてみます。箱の外まで横に動くなら、どこかの幅が画面からはみ出しています
スクロールバーを消していないか。見た目を整えるために、スクロールバーを隠す指定を足してくることがあります。横に続く手がかりが減るので、外します
Tab キーで箱に入り、矢印キーで動くか。キーボードだけで最後の1枚まで行けるかを、実際に試します

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

スマホでの制作実績・商品の写真。縦に並べると長くなりすぎる写真を、横にまとめます。見たい人だけが横に見る、という場所に合っています
関連記事・おすすめの一覧。3の見本のように小さいカードを流し見てもらう形で、記事の最後などに置きます
JavaScriptのスライダーを入れるほどではない場所。CSSだけなので、読み込むファイルが増えず、ほかのプラグインとぶつかる心配も少なくなります

使わない場面

全員に読んでほしい情報。料金、お知らせの重要なもの、申し込みの条件などは、横に隠さず縦に並べます。2枚目以降は見てもらえないこともあるからです
パソコンで広く見せられる一覧。画面に余裕があるなら、前回のグリッドで並べたほうが、一度に全部見えて比べやすくなります
トップページのメイン画像を自動で切り替える用途。自動で動かす、止めるボタン、今何枚目かの表示まで必要になり、CSSだけの範囲を超えます。そもそも何枚も切り替えるより、1枚に絞るほうが伝わると考えています

「たくさん載せたいから横スライド」ではなく、「見たい人だけ見ればいいものだから横スライド」。
この順番で考えると、使う場所を間違えにくくなります。

まとめ

横スライドは、外の箱に overflow-x: auto と scroll-snap-type: x mandatory、スライドに scroll-snap-align: start の2か所で作れる
mandatory は必ず止まる、proximity は近いときだけ止まる。1枚ずつ見せるなら mandatory
center で真ん中に止める、scroll-snap-stop: always で飛ばさず止める、scroll-padding で止まる位置をずらす
1枚の幅は80%前後にして、次のスライドを少しのぞかせる。スクロールバーは隠さない
外の箱に tabindex=”0″ と aria-label を付けて、キーボードでも動かせるようにする
自動では切り替えない。全員に読んでほしい情報は、横に隠さず縦に並べる

まずは1の「1枚ずつ止まるスライド」のコードをコピーして、スマホで指を動かしてみてください。途中で離しても、きれいな位置で止まるのが分かります。

参考にした資料

いずれも2026年10月21日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「scroll-snap-type」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-type
※スクロールする箱に付けて、止める方向と止め方（mandatory／proximity）を決める指定。2022年4月から主要なブラウザでそろって使えること
MDN「scroll-snap-align」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-align
※中身のどこ（start／center／end）で止めるかの指定
MDN「scroll-snap-stop」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-snap-stop
※always にすると、止まる位置を飛ばさずに必ず止まること。2022年7月から主要なブラウザでそろって使えること
MDN「scroll-padding」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-padding
※止まる位置を、箱の端から内側にずらす指定
MDN「CSS scroll snap」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap
※スクロールを止める仕組み全体の解説
MDN「tabindex」（英語）
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex
※tabindex=”0″ で、Tab キーで選べるようになること