【初心者向け】CSSだけでシンプルな画像スライダーを実装する方法

この記事を書いてる人

オジー

  • WordPress歴8年
  • 副業でデザイン/開発を受託→法人化
  • WordPressで会社HPをオリジナルテーマで作成
  • 主軸はデザイン、たまにフロントエンドのコードも書きます
  • 事業会社/受託会社 両方経験あり

今回はCSSのみで画像スライダーを実装していきたいと思います。画像スライダーというとjQueryのプラグインやJavascriptを書いて実装するケースが多いと思いますが、実はCSSだけでも実装できます。

では、CSSのみで画像スライダーを実装していきたいと思います。

目次

デモ

https://codepen.io/keisuke1989/embed/ZEWaYqo?height=265&theme-id=dark&default-tab=css,result

HTML

<div id="css-slider">
	<div class="slider-wrapper">
		<div class="slide-item"></div>
		<div class="slide-item"></div>
		<div class="slide-item"></div>
	</div>
</div>

なんのへんてつもないHTMLです。これがわからないという方はHTMLの基礎を勉強してから戻ってきてください。
今回はスライド画像3枚を想定してスライダーを作成していますが、枚数が変わる場合CSSの値も少し変わってきますのでそこは適宜変更お願いします。

CSS

#css-slider {
	width: 300px;
	height: 200px;
	overflow: hidden;
}

.slide-item {
	width: 300px;
	height: 200px;
	float: left;
	position: relative;
}


.slider-wrapper {
	width: 300%;
	position: relative;
	left: 0;
	will-change: transform;
	animation: slider 10s infinite;
}

@keyframes slider {
  0% { transform: translateX(0); }
  33% { transform: translateX(-300px); }
  66% { transform: translateX(-600px); }
  100% { transform: translateX(0); }
}

上記がスライダー用のCSSになります。

#css-sliderには、

width:スライド一枚の横幅
height:スライド一枚の縦幅
overflow:hidden はみ出した要素を隠す

という至って単純なスタイルになります。

.slide-itemには、

width:スライド一枚の横幅
height:スライド一枚の縦幅
float: left 横並びにするため
position: relative

こちらもよく使用するプロパティしか使用していません。

.slider-wrapperには、

width: 300%
これはスライド画像を横並びにするのに十分な横幅が必要になります。そうしないとfloatした画像が下に回り込んでしまうので。
今回の場合はスライド画像3枚分を横並びにしたいので300%を指定しています。親の#css-sliderに300pxが指定されているので実際は900pxがwidthになります。

left : 0
今回はrelativeが指定されているので相対的な値、つまりもともとあるはずだった場所からleft:0の場所に配置します。

will-change:transform

これはあまり使用することがなかったかもしれませんが、ブラウザにこれを使用しますよというためのプロパティです。今回はtransformを指定しています。

animation: slider 10s infinite

CSSアニメーションで「slider」という名前のアニメーションを10秒かけて実行(infiniteで無限ループにしています)という指定です。

@keyframes slider
こちらで実際のアニメーションの動きを指定します。指定する値は何%でもかまいませんが、今回はスライドが3枚ですので33%ずつ区切っています。

transform:translateX

実際に要素をX軸に沿って移動させます。33%のとき(今回は10sを指定しているのでおよそ3秒)に、-300px(スライド一枚分の横幅)移動します。 66%のときにスライド2枚分 = -600px移動、100%のときに始点の0に戻ります。

やっていることとしては画像を横並びにしてCSSアニメーションで横に移動しているだけです。本当の画像スライダーのように戻らずにずっと横にスクロールしたい場合はJS or jQueryでの実装が必要になってきます。

プログラミングのスキルを学ぶのにおすすめの方法

HTML/CSSの基本的な知識があるとWordPressやその他でも流用できておすすめです。今だと書籍で学んでも良いし、スクールに通っても良いし、オンライン講座で勉強しても身に着けることはできます。

料金としてはググる < 書籍 < オンライン講座 < スクールなので、まずは手出しの少ない書籍から始めてみて物足りないようだったら徐々に右に行くのが良いかと思います。いきなりスクールでも良いのですが、教えられること・時間に限りがあるのでどちらにせよ書籍は買って勉強すると思います。

ググっても知識自体は手に入るのですが、断片的に入手するのでどうしても体型的に学ぶことは難しいです。(記事を書いている自分が言うのもなんですが、、、)

オジー

エンジニアのスキルを学ぶ方法でおすすめの書籍やスクールなど紹介しますね!

おすすめ書籍

著:Mana
¥1,980 (2024/06/23 17:10時点 | Amazon調べ)
著:Mana
¥2,237 (2024/06/24 18:19時点 | Amazon調べ)
SBクリエイティブ
¥2,794 (2024/06/19 12:42時点 | Amazon調べ)
著:草野あけみ
¥3,031 (2023/05/09 17:34時点 | Amazon調べ)

おすすめのスクール

就職、転職までサポートの「SAMURAI ENGINEER」

日本で初めてマンツーマンでのプログラミング指導を導入したプログラミング塾「SAMURAI ENGINEER」ですが、専属のインストラクターとのWeb面談のレッスンを通じてプログラミングやWebデザインのスキルを身につけてられ、就職や転職、案件の獲得の方法などをマンツーマンでサポートする体制も整っています。

  • 転職成功率98%
  • レッスン満足度No.1
  • 累計指導実績35,000名以上
  • 挫折率8%
侍エンジニア塾

現役エンジニアによるマンツーマンサポート「DMM WEBCAMP 学習コース」

DMMが運営している「DMM WEBCAMP 学習コース」ですがプログラミングの他に、Webデザインや動画編集、AI・データサイエンスに特化したコースも豊富にあり、学習中・就職のサポート体制も万全です。(さすが大手ですね)

  • 通過率わずか10%の選考を突破した現役エンジニアがサポート
  • チャットにていつでも質問可能
  • 週に2回のメンタリング
  • カナダで開発・実践されてきたICEモデルに基づきカリキュラムを独自開発
  • 希望に応じて転職や副業のサポートを無料で受けることができる
DMM WEBCAMP SKILLS

おすすめオンラインコース

Udemy

オンラインコースで有名どころののUdemyですが、プログラミング、マーケティング、データサイエンスなど、213,000以上のコースを5,700万人の受講生が学んでいます。

  • オンラインですべて完結
  • 豊富なジャンル
  • 一つを買い切り型(一気にお金を払う必要はない)
  • セールも頻繁に開催される
  • Q&A機能で講師に質問可能
  • 動画のお試し視聴

Amazon Kindleのように購入前に評価が見れたり、講座を購入する前に動画のお試し視聴が可能だったりと失敗しないようなサービス設計になっているのがポイント高めです。

Udemyを試してみる

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次