問題
9CSSで自動切替スライダー
CSSでスライダーを作りたいけれど、JavaScriptは難しく感じていませんか？
実はCSSだけでも、画像や要素を自動で切り替えるスライダーは実装可能です。
この問題では、シンプルな構造で動くスライダーを通して、基本的な動きの仕組みを理解しながら実装力を身につけていきましょう。
CSSアニメーションの問題に挑戦しよう！
問題
「CSSで自動切替スライダー」
CSSでスライダーを作成し、要素が自動で切り替わる動きを実装してみましょう。
シンプルな構造の中で、左右にスライドする基本的な動きの仕組みを理解する問題です。
あらかじめエディタに書くコード
<div class="slider">
<div class="content">1</div>
<div class="content">2</div>
</div>
¥HTML¥
.slider{
width: 300px;
height: 100px;
position: relative;
overflow: hidden;
}
.content{
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
line-height: 100px;
text-align: center;
font-size: 3em;
}
.content:first-of-type{
background-color: cadetblue;
}
.content:last-of-type{
background-color: aqua;
}
¥CSS¥
期待する画面
解答と解説（CSSで自動切替スライダー）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
この問題では、CSSのアニメーションを使ってスライダーを自動で切り替える仕組みを実装しています。
ポイントは、要素の位置を時間の経過に応じて変化させることで、横にスライドしているように見せている点です。
まず、.contentに対してanimationを設定し、一定時間ごとに左右へ移動する動きを繰り返しています。
@keyframesでは、0%から100%までの間でleftの値を変化させることで、画面外→中央→画面外へと移動する流れを作っています。
これにより、右から現れて表示され、左へ流れていくスライドの動きが表現できます。
また、2つ目の要素にはanimation-delayを設定することで、1つ目のスライドの後に表示されるようにしています。
これにより、複数の要素が順番に表示される「スライダー」の動きが完成します。
さらに、親要素にoverflow: hidden;を指定しているため、表示範囲外にはみ出した要素は見えなくなり、自然なスライド演出になります。
このようにCSSだけでも、位置と時間をコントロールすることでシンプルなスライダーを実装できます。
まずは基本の動きを理解し、スライド数を増やしたり速度を調整するなど、応用にも挑戦してみましょう。
補足
CSSだけでスライダーを作る方法は、JavaScriptを使わずにアニメーションを実装したい場面でよく使われます。animation-delayを活用することで、複数の要素を時間差で動かし、自然な切り替えを表現できます。
関連問題もあわせて挑戦して理解を深めましょう。
・CSSアニメーション初級：吹き出しアニメーションを作ろう
・問題集一覧：CSSアニメーション問題集トップ
・CSSの基礎から学びたい方：CSS入門講座
ポイント
CSSスライダーを作る基本の考え方
CSSでスライダーを作る場合、動きの設計を理解することが重要です。
今回のようなCSSスライダーは、要素を一定のタイミングで表示・切り替えることで実現されています。
JavaScriptを使わずにシンプルな構造で動きを作れる点が特徴で、基本を理解すれば画像スライダーやバナー表示など実務でも応用できるようになります。
