HTML/CSSだけでスライダーを作る方法
HTML/CSSだけでスライダーを作る方法を紹介します。このサンプルではJavaScriptを使用せず、複数の画像を横方向へ並べ、スクロール操作で画像を1枚ずつ切り替えられる画像スライダーを作成します。表示領域には原則として1枚の画像を大きく表示するため、複数の項目を同時に見せるカルーセルとは異なり、写真やメインビジュアルを順番に見せたい場合に利用できます。
CSSの横スクロールとscroll-snapを利用しているため、マウスやトラックパッドで横方向へスクロールしたり、スマートフォンでスワイプしたりすると、次の画像の位置で止まりやすくなります。Webサイトの商品画像、作品写真、店舗や施設の写真、サービス紹介など、複数の画像を1枚ずつ確認してもらいたい場面に適しています。JavaScriptによる切り替え処理を追加する必要がなく、HTMLとCSSだけで導入できます。
表示する画像はHTMLから自由に差し替えることができ、CSSでは画像の縦横比、角丸、スライダー全体の余白などを調整できます。画像には横幅100%と16:9の表示比率を設定し、設置した場所の横幅に合わせて縮小される構成です。画面幅640px以下では外側の余白を小さくしているため、PCだけでなくスマートフォンやタブレットでも横スクロールで画像を切り替えられます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
スライダー部分を横方向へスクロールすると、画像を1枚ずつ切り替えられます。JavaScriptは使用していません。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>HTML/CSSだけの画像スライダー</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 横スクロールする画像スライダー -->
<div class="css-slider_list">
<!--
【画像の設定方法】
スライダーで使用する画像はZIPに含まれていません。
sampleフォルダ内にimagesフォルダを作成し、
image1.png〜image5.pngを配置してください。
-->
<!-- 1枚目の画像 -->
<div class="css-slider_item">
<img
class="css-slider_image"
src="images/image1.png"
alt="1枚目の画像">
</div>
<!-- 2枚目の画像 -->
<div class="css-slider_item">
<img
class="css-slider_image"
src="images/image2.png"
alt="2枚目の画像">
</div>
<!-- 3枚目の画像 -->
<div class="css-slider_item">
<img
class="css-slider_image"
src="images/image3.png"
alt="3枚目の画像">
</div>
<!-- 4枚目の画像 -->
<div class="css-slider_item">
<img
class="css-slider_image"
src="images/image4.png"
alt="4枚目の画像">
</div>
<!-- 5枚目の画像 -->
<div class="css-slider_item">
<img
class="css-slider_image"
src="images/image5.png"
alt="5枚目の画像">
</div>
</div>
</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSSと5枚のPNG画像で構成されています。HTMLでは5枚の画像を横方向へ並べ、CSSでは横スクロールとスクロールスナップを設定して、画像を1枚ずつ切り替えられるスライダーを作成します。JavaScriptは使用していないため、マウス、トラックパッド、タッチ操作などによるブラウザの横スクロールだけで画像を切り替えられます。画像は利用者自身で用意し、sampleフォルダ内のimagesフォルダへ配置します。
sample/
├── index.html
├── style.css
└── images/
├── image1.png
├── image2.png
├── image3.png
├── image4.png
└── image5.png
各ファイルの役割
index.htmlは画像スライダーを構成するファイルです。5つのcss-slider_itemを配置し、それぞれに画像を1枚ずつ指定しています。画像はimages/image1.png、images/image2.png、images/image3.png、images/image4.png、images/image5.pngを参照します。
style.cssはスライダーの表示と横スクロールを設定するファイルです。5枚の画像を横方向へ並べ、各項目を表示領域と同じ横幅にし、overflow-x:auto;で横スクロールできるようにしています。scroll-snap-type:x mandatory;とscroll-snap-align:start;により、横方向へスクロールしたあとに各画像の先頭位置へ揃う構成です。
imagesフォルダにはスライダーで使用する画像を配置します。このサンプルではimage1.pngからimage5.pngまでの5枚のPNG画像を使用します。画像ファイルは利用者自身で用意してください。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、同じsampleフォルダ内へimagesフォルダを作成します。利用者自身で用意した5枚のPNG画像をimage1.png、image2.png、image3.png、image4.png、image5.pngというファイル名でimagesフォルダへ配置してください。
すべてのファイルと画像を配置したあと、sample/index.htmlをブラウザで開きます。index.htmlから同じ階層のstyle.cssを読み込み、imagesフォルダ内の画像を表示します。マウス、トラックパッド、タッチ操作などで横方向へスクロールすると次の画像へ移動し、スクロールスナップによって画像ごとの位置へ揃います。
カスタマイズできる内容
index.htmlでは各img要素のsrcとaltを変更できます。別の画像を使用する場合はimagesフォルダ内のPNG画像を差し替えるか、srcを使用する画像のファイル名に合わせて変更してください。画像の枚数を変更する場合は、css-slider_itemを必要な数だけ追加または削除します。
style.cssではページ端の余白、スクロールバーと画像の間隔、1枚のスライドが占める横幅、画像の角丸、画像表示領域の縦横比などを変更できます。スライダー本体にはwidth:100%;を指定しているため、設置する場所の横幅に合わせて表示されます。表示幅そのものを変更したい場合は、スライダーを配置する親要素側の横幅を調整します。
数値調整
style.css
padding:40px 20px;
ページ全体の余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
padding-bottom:12px;
スライダー下側の余白です。スクロールバーと画像の間隔を確保しています。値を大きくすると下側の余白が広がり、小さくすると狭くなります。
flex:0 0 100%;
各スライドの横幅を表示領域と同じ100%にしています。この100%によって、表示領域へ画像を1枚ずつ表示する構成になります。値を小さくすると、1つの表示領域内に次の画像の一部や複数の画像が見える構成へ変更できます。
border-radius:16px;
各画像の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
aspect-ratio:16 / 9;
画像表示領域の縦横比です。16:9の横長表示にしています。この比率を変更すると、画像表示領域の横幅と高さの比率が変わります。
@media (max-width:640px)
スマートフォン向けの表示へ切り替える基準となる画面幅です。640px以下になると、ページ全体の余白を小さくします。
padding:24px 12px;
画面幅640px以下で使用するページ全体の余白です。24pxは上下、12pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると画像を表示できる横幅が広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの.css-slider_listと.css-slider_imageへwidth:100%;を指定しているため、スライダーと画像は設置した場所の横幅に合わせて伸縮します。各スライドにはflex:0 0 100%;を指定しているため、表示領域の横幅が変化しても画像を1枚ずつ表示する構成を維持します。
画面幅640px以下ではメディアクエリを使用し、ページ全体の余白をpadding:24px 12px;へ変更します。左右の余白を小さくして画像を表示できる横幅を確保しながら、横スクロールとスクロールスナップの操作方法はそのまま維持するため、スマートフォン・タブレット・PCで利用できる構成になっています。
コメント