SEO対策なら株式会社ペコプラ > Webサイト制作 > サイト制作 > js不要！cssのみでカルーセルの作り方

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

Webサイト制作

サイト制作

2022.03.04

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

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

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

1 CSSだけでカルーセルスライダーを作るメリット
2 CSSの記述のみでカルーセルスライダーを作る方法
3 まとめ

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; /* アニメーションをずっと続ける */
}