js不要!cssのみでカルーセルの作り方

Webサイト制作
サイト制作
2022.03.25


Webサイトで使用するカルーセルスライダーは、JavaScriptライブラリで簡単に実装できますが、挙動がおかしくなったりバグがあったりと思うような調整が難しいことがあります。

また、JavaScriptはCSS等に比べると重くなってしまうので、サイト表示速度を上げたい場合はなるべく軽いデータを使用したいところです。

そこで今回は、CSSの記述のみで動作するカルーセルスライダーの作り方を解説していきます。

CSSだけでカルーセルスライダーを作るメリット

CSSだけでカルーセルスライダーを作るメリットは、以下のとおりです。

  • JSを使用しないので非常に軽い
  • 管理がしやすい
  • カスタマイズがしやすい

JSを使用しないので非常に軽い

CSSだけでカルーセルスライダーをつくる最大のメリットは、動作が軽いことにあります。
JavaScriptは複雑なコードを読み込んで実行し、記述量も多くなりがちなので動作が重くなってしまうことがあります。
しかしCSSの場合はJavaScriptよりも記述が少なく、コード自体も複雑ではないので、CSSだけでカルーセルスライダーをつくると動作が軽くなるのです。

管理がしやすい

CSSはJavaScriptと比べて関数がほぼ使われておらず、HTMLのクラスごとにプロパティがまとめられています。そのため管理がしやすく、Webサイトの仕様を変更するときも、クラス名の変更orプロパティの一部変更だけで対応できるという特徴があります。
また、CSSでカルーセルスライダーを作成する場合、画像を改行せずに横並びにする・画像サイズを調整する・animationプロパティで動作させるといった少ない作業で済むので、コーディング時間が短縮できるというメリットもあります。

カスタマイズがしやすい

CSSでカルーセルスライダーをつくると、動作もCSSだけで完結させられるので、カスタマイズがしやすいという特徴があります。
例えば画像枚数を増減させたいときは、アニメーションを適用させているキーフレーム内の数を調整することで、実現可能です。
カルーセルをループさせるorカーソルをホバーさせて動かすなどのさまざまな動きが可能な上、それらをJavaScriptを使用するよりも短い時間で作成できるという点がメリットにあたります。

CSSの記述のみでカルーセルスライダーを作る方法

ここからは、CSSの記述のみでカルーセルスライダーをつくる方法を解説します。
CSSのみでカルーセルスライダーをつくる方法はいくつかありますが、今回は特にシンプルなスライダーをつくる方法について解説します。

  • スライド画像を横に並べる
  • ボタンを配置する
  • 画像全体をoverflow:hidden;で囲む
  • 左端の画像のmargin-leftを負の値にする
  • animationを設定する

 スライド画像を横に並べる

カルーセルスライダーで使用する画像を横に並べます。右端に配置する画像は左端のものと同じにし、ページの端で改行させないようにします。

<div class="slide_cont">
<img src="〇〇.jpg">
<img src="〇〇.jpg">
<img src="〇〇.jpg">
<img src="〇〇.jpg">
</div>
.slide_cont{
 white-space:nowrap;
}

画像全体をoverflow:hidden;で囲む

続いて画像全体をoverflow:hidden;で囲み、画像が1枚だけ表示されているようにします。全体のサイズと画像そのもののサイズも指定します。

.slide_cont{
 white-space: nowrap;
 width: 400px;
 height: 600px;
 overflow: hidden; 
}
.slide_cont img{
 margin: 0;
 padding: 0;
 width: inherit;
 height: auto;
 border: none;
}

左端の画像のmargin-leftを負の値にする

今回のカルーセルスライダーは3枚なので、4つのキーフレームを作成します。
margin-leftを負の値に設定し、100%ずつずらします。

@keyframes slide_cont4 {
 0% { margin-left: 0; }
 33% { margin-left: -100%; }
 66% { margin-left: -200%; }
 100% { margin-left: -300%; }
}

animationを設定する

最後に左端の画像にanimationを適用させます。

.slide_cont &gt; :first-child {
 animation-name: slide_cont4; /* キーフレーム使用 */
 animation-duration: 5s; /* アニメーション時間を5秒に設定 */
 animation-delay: 0s; /* アニメーション開始までの時間を0秒に設定 */
 animation-iteration-count: infinite; /* アニメーションをずっと続ける */
}


完成したものがこちらになります。
デモページへ 
※ブラウザ幅830px未満でご確認ください。

まとめ

CSSのみでカルーセルスライダーを実装することで、作業時間の短縮や容量の軽量化ができます。
複雑なアニメーションでない場合のカルーセルスライダーの実装方法として、CSSによる実装方法を覚えておくと、サイトを軽くするときなどに役立つでしょう。
今回ご紹介した方法を参考にしていただけますと幸いです。

SEOやWEB制作に関する情報を検索する

コラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)