などの疑問や悩みを解決してまいります。
複数の画像やコンテンツのスライド切り替えを行い、ユーザーに対して複数の情報や視覚的なコンテンツをコンパクトにすることができるスライダーですが、jsを使わないと実装できないと思っていませんか？
しかし、簡易的なスライダ―であればHTMLとCSSのみで実装することが可能です。
今回はHTMLとCSSのみでスライダ―の実装方法を解説します。
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 */
.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;
}
まずは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.
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とCSSのみ！自動スライドを実装したスライダ―
まずは完成例を見てください。
@keyframeとanimetionプロパティを使用して自動で流れるスライドアニメーションを実装しています。
See the Pen CSSのみでスライダ―（アニメーション） by koutarou mori (@koutarou-mori) on CodePen.
@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を使用することにはなってしまいますが、サイトの内容に合わせて簡易的なスライダ―を実装したい場合などはぜひ参考にしていただけたら嬉しいです。
ここまで記事を読んでいただきありがとうございました。
