【超簡単！CSSのみ】簡易的なスライダ―の実装方法を解説します。
【超簡単！CSSのみ】簡易的なスライダ―の実装方法を解説します。

【超簡単！CSSのみ】簡易的なスライダ―の実装方法を解説します。

  1. TOP >
  2. Web制作 >
  3. CSS >

CSS HTML Web制作 アニメーション

【超簡単！CSSのみ】簡易的なスライダ―の実装方法を解説します。

2024年4月15日

※本記事は広告が含まれる場合があります。

なやむくん手軽で簡単なスライダ―を実装したい。 なやむさんHTMLとCSSのみで簡単に実装したい。

などの疑問や悩みを解決してまいります。

複数の画像やコンテンツのスライド切り替えを行い、ユーザーに対して複数の情報や視覚的なコンテンツをコンパクトにすることができるスライダーですが、jsを使わないと実装できないと思っていませんか？

しかし、簡易的なスライダ―であればHTMLとCSSのみで実装することが可能です。

今回はHTMLとCSSのみでスライダ―の実装方法を解説します。

本記事の目次

  • 1 HTMLとCSSのみ！シンプルなスライダ―
    • 1.1 HTML解説
    • 1.2 CSS解説
  • 2 HTMLとCSSのみ！ボタンに連動したスライダ―
    • 2.1 HTML解説
    • 2.2 CSS解説
  • 3 HTMLとCSSのみ！自動スライドを実装したスライダ―
    • 3.1 CSS解説
  • 4 本記事のまとめ

HTMLとCSSのみ！シンプルなスライダ―

まずは完成例を見てください。

手動でコンテンツをスライドさせるシンプルなスライダ―です。

See the Pen Untitled by koutarou mori (@koutarou-mori) on CodePen.

いかがでしょうか。シンプルですがHTMLとCSSのみで実装できています。

こちらの作成方法について解説していきます。

HTML解説

HTMLのコードは以下のようになっています。

<body> <div class="slider"> <div class="slide"> <img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/nayamukun.jpg" alt="なやむくん"> <p>なやむくん</p> </div> <div class="slide"> <img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/nayamusan.jpg" alt="なやむさん"> <p>なやむさん</p> </div> <div class="slide"> <img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/yorokobikun.png.jpg" alt="よろこびくん"> <p>よろこびくん</p> </div> <div class="slide"> <img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/moerukun.jpg" alt="よろこびくん"> <p>もえるくん</p> </div> </div> </body>

構造としては、sliderクラスのコンテンツの中に画像とテキストが入るslideクラスのコンテンツを入れています。

slideクラスにはそれぞれ「なやむくん」「なやむさん」「よろこびくん」「もえるくん」の内容が入っています。

CSSを使用して、sliderクラスのコンテンツから1枚だけを見えるように幅指定をして、その幅からはみ出たslideクラスのコンテンツは見えないようにして、sliderクラスのコンテンツ内でslideクラスのコンテンツを横スクロールして閲覧できるようにしています。

なやむさんなんとなく構造は理解できましたが、まだちょっと難しいです。 みつたどのようなCSSを記述しているか、このあとのCSSの解説を読んだ後ならわかると思います！ CSS解説

CSSのコードは以下のようになっています。

/* スライダ―のCSS */ .slider { width: 300px; height: 350px; display: flex; gap: 15px; overflow-x: auto; border: 5px solid #c0c0c0; } .slide { width: 300px; } p { margin-top: 0; text-align: center; } よろこびくん記述量が少ない！簡単そうです...！ みつた簡易的ではありますが、これぐらいのスライダーであればCSSもこれぐらいの記述で作れちゃいます。

まずはsliderクラスに対して画像を見せる幅を指定します。

使用している画像はそれぞれ300pxなので、合わせてwidth: 300px;としています。

そして300pxの枠からはみだしている部分を見えなくして、枠内でスクロールしてコンテンツを閲覧できるようにするためoverflow-x: auto;を指定します。

overflow-x - CSS: カスケーディングスタイルシート | MDN

これらを指定することで、幅指定したslideクラスの枠内でslideクラスのコンテンツが横スクロールで閲覧することができます。

注意ポイント

今回使用している画像はすべて300px×300pxです。

今回は画像のサイズが統一されていますが、サイズがバラバラの場合はslideクラスやimgタグにCSSでサイズの指定が必要になる可能性があります。

HTMLとCSSのみ！ボタンに連動したスライダ―

まずは完成例を見てください。

先程のスライダーにリンクボタンを追加して、ボタンをクリックしたらそのボタンと同じ画像に切り替わる機能を実装しています。

See the Pen CSSのみでスライダ―（ボタン） by koutarou mori (@koutarou-mori) on CodePen.

よろこびくんワンクリックで見たい内容に切り替わるので便利ですね！ みつた同様にスライドもできるので、最初に紹介したスライダーのレベルアップVerですね。 HTML解説

HTMLのコードは以下のようになっています。

<body> <div class="content"> <div class="slider"> <div class="slide" id="slide-1"> <img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/nayamukun.jpg" alt="なやむくん"> <p>なやむくん</p> </div> <div class="slide" id="slide-2"> <img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/nayamusan.jpg" alt="なやむさん"> <p>なやむさん</p> </div> <div class="slide" id="slide-3"> <img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/yorokobikun.png.jpg" alt="よろこびくん"> <p>よろこびくん</p> </div> <div class="slide" id="slide-4"> <img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/moerukun.jpg" alt="よろこびくん"> <p>もえるくん</p> </div> </div> <div class="btn"> <ul> <li><a href="#slide-1"><img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/nayamukun.jpg" alt="なやむくん"></a></li> <li><a href="#slide-2"><img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/nayamusan.jpg" alt="なやむさん"></a></li> <li><a href="#slide-3"><img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/yorokobikun.png.jpg" alt="よろこびくん"></a></li> <li><a href="#slide-4"><img src="https://mitsutano-oshiro.com/wp-content/uploads/2023/07/moerukun.jpg" alt="よろこびくん"></a></li> </ul> </div><!-- /.btn --> </div><!-- /.content --> </body>

最初のスライドのHTMLコードと違う箇所でのポイントはまず、slideクラスそれぞれにid属性が指定されています。

aタグのhref属性に#id名を指定することで、そのaタグをクリックするとそのid属性の箇所まで移動してくれる性能があります。

なので今回でいうと画像ボタンのhref属性の#に続く値と、スライダー内画像のid属性の値を同じにすることで連動して同じ画像に切り替えてくれます。

そして切り替えるためのボタン、btnクラスのコンテンツを追加しています。

CSS解説

コードは以下のようになっています。

.content { display: flex; gap: 10px; } /* スライダ―のCSS */ .slider { width: 300px; height: 350px; display: flex; gap: 15px; overflow-x: auto; border: 5px solid #c0c0c0; } .slide { width: 300px; } p { margin-top: 0; text-align: center; } /* ボタンのCSS */ ul { margin: 0; padding: 0; } ul li { list-style: none; } ul li a { border-radius: 50%; } ul li a img { border-radius: 50%; width: 40px; }

CSSは見た目を整えるだけで特別重要なコードはありません。

みつたこのスライダーでの重要箇所はHTMLのid属性とリンクの連動だけなので、比較的簡単に実装することができます。

HTMLとCSSのみ！自動スライドを実装したスライダ―

まずは完成例を見てください。

@keyframeとanimetionプロパティを使用して自動で流れるスライドアニメーションを実装しています。

See the Pen CSSのみでスライダ―（アニメーション） by koutarou mori (@koutarou-mori) on CodePen.

もえるくんHTMLとCSSだけで実装できるのすごいですね！ みつた@keyframeとanimetionプロパティだけで簡単に実装できますよ！

@keyframeとanimetionプロパティの詳しい内容は以下記事で解説しています。

おすすめ！ 【CSSアニメーション】@keyframesとanimationプロパティについて解説します。

続きを見る

HTMLは最初に説明したスライダーのHTMLコードと同じなので解説は割愛します。

CSS解説

CSSのコードは以下のようになっています。

/* スライダ―のCSS */ .slider { width: 300px; height: 350px; display: flex; gap: 15px; overflow-x: hidden; border: 5px solid #c0c0c0; } .slide { width: 300px; /*アニメーション設定*/ animation-name: slide; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes slide { 0% { transform: translateX(0px); } 100% { transform: translateX(-940px); } } p { margin-top: 0; text-align: center; }

最初に紹介したスライダーのCSSに@keyframeとanimationプロパティを追加しています。

@keyframe内のtransform: translateX(-940px);の記述は、スライド画像と画像間の余白を含めた長さに合わせて調整してください。

animationプロパティのそれぞれの詳細については以下で解説しています。

おすすめ！ 【CSSアニメーション】@keyframesとanimationプロパティについて解説します。

続きを見る

本記事のまとめ

いかがでしたでしょうか。

解説させていただいたスライダ―であればHTMLとCSSで実装することができてしまいます。

さらに高機能なスライダ―、となるとまだjsを使用することにはなってしまいますが、サイトの内容に合わせて簡易的なスライダ―を実装したい場合などはぜひ参考にしていただけたら嬉しいです。

ここまで記事を読んでいただきありがとうございました。

  • Pocket
  • Hatena
  • Pinterest
  • LINE

-CSS, HTML, Web制作, アニメーション

📎📎📎📎📎📎📎📎📎📎
BOT