コピペでできる！HTML／CSSだけでカルーセルをつくる方法！
最近カルーセルでの表示が流行っていますね。Googleの検索結果でもカルーセルを表示しているところもあります。
カルーセルのメリットは必要な情報のみユーザーがスクロール（スワイプ）することで表示できることだと思います。興味がなければ読み飛ばせるため、とても操作性のよいUIです。
この記事ではHTML／CSSだけで作るカルーセルの作り方を記載します。以前はJavaScriptがないと作れなかったのですが、今はCSSがこれに対応しています。コピペして必要に応じて修正して使ってください。
ソースコード＆プレビュー
いつも通りソースコードとプレビューからです。
今回は全画面にカルーセルを表示しています。横幅の半分以上スクロール（スワイプ）すると、次のセクションがスナップされてぴったりと表示されます。
ソースコードの解説
HTMLでスクロールする要素を作成する
カルーセルで表示する子要素を複数用意し、それを覆うように親要素を用意します。
ここでは、カルーセルに表示する子要素をsection要素で、親要素をdiv要素で作成していますが、なんでもよいです。
HTML
<div class="carousel">
<section>
<h1>Section 1</h1>
</section>
<section>
<h1>Section 2</h1>
</section>
<section>
<h1>Section 3</h1>
</section>
<section>
<h1>Section 4</h1>
</section>
<section>
<h1>Section 5</h1>
</section>
</div>
CSSでカルーセルの方向とスナップの位置を設定する
カルーセル表示にするには、親要素にscroll-snap-typeプロパティでカルーセルの方向を設定し、子要素にscroll-snap-alignプロパティでスナップ位置を指定します。
CSS
.carousel {
scroll-snap-type: x mandatory;
}
.carousel section {
scroll-snap-align: start;
}
たったこれだけです！！
scroll-snapは基本的にスクロールをスナップ（ピタッと止める）するだけなので、非常に簡単です。
ただ、上記は新しい仕様で現時点（2018年）ではCromeとSafariしかサポートしていません。それ以外の古いブラウザでも動くように、新しい仕様と古い仕様の両方を定義します。
古い仕様では、scroll-snap-pointsプロパティでスナップするサイズを指定します。今回は横方向のカルーセルなので、scroll-snap-points-yで100%の幅でスナップするように指定します。
どちらの仕様のブラウザでも動くようにすると以下のようになります。
CSS
.carousel {
scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: x mandatory;
}
.carousel section {
scroll-snap-align: start;
}
スクロールの方向を変更する場合
サンプルではスクロールは横方向だったためxを使用していましたが、縦方向へスナップさせる場合はyを使用します。
CSS
.carousel {
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100%);
scroll-snap-type: y mandatory;
}
スナップ位置を変更する場合
また、スナップの位置はscroll-snap-align: startとしている場合、子要素の上辺もしくは左辺になりますが、中央にスナップすることも、可変もしくは右辺にスナップすることもできます。
中央
.carousel section {
scroll-snap-align: center;
}
下辺または右辺
.carousel section {
scroll-snap-align: center;
}
表示する要素に合わせて調整する
サンプルのCSSにはscroll-snap以外の定義がいろいろありますが、それらはすべてh1をセンタリングして表示するなどの調整になります。
表示したい要素に合わせて調整してください。
最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。