サイズや比率が違う画像を同じ大きさで表示するスライダーを作る方法
サイズや縦横比が違う画像を同じ大きさで表示するスライダーをHTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、16:9・4:3・1:1・1:2など異なる比率の画像を使用しても、スライダーの表示エリアを16:9に統一したまま画像を切り替えられます。画像ごとに表示領域の高さが変わらないため、サイズや比率の異なる画像をまとめて使用する場合でもレイアウトを揃えられます。
画像は縦横比を維持したまま16:9の表示エリア全体を覆うように配置し、表示エリアからはみ出す部分を中央を基準に切り取ります。そのため、元画像を16:9へ変形したり、あらかじめ同じサイズへ加工したりする必要がありません。商品写真、作品紹介、写真ギャラリーなど、さまざまな比率の画像を同じ大きさで見せたい場合に利用できます。
画像の下には「前へ」と「次へ」のボタンを配置し、クリックすると前後の画像へ1枚ずつ切り替えられます。HTMLでは4枚の画像と操作ボタンを配置し、CSSでは16:9の表示エリアと画像のトリミングを設定します。JavaScriptでは現在表示している画像番号を管理して前後の画像へ切り替えます。画面幅に合わせて表示エリアも縮小するため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
上の一覧は実際に使用している4種類の元画像です。16:9・4:3・1:1・1:2と比率が異なりますが、スライダーではすべて同じ幅と高さで表示されます。画像の縦横比は変えずに16:9の表示エリアいっぱいに表示し、枠からはみ出す部分を中央を基準に切り取っています。そのため、元画像を16:9へ加工しなくても表示サイズを揃えられます。「前へ」「次へ」をクリックして、それぞれの画像がどのように表示されるか確認してください。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>サイズや比率が違う画像を同じ大きさで表示するスライダー</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- スライダー全体 -->
<div class="same-size-slider_wrap">
<!-- 画像表示エリア -->
<div class="same-size-slider_view">
<!-- 画像を横並びにするトラック -->
<div class="same-size-slider_track">
<!-- 16:9の画像 -->
<div class="same-size-slider_slide">
<img
src="images/image1.png"
alt="16:9の画像">
</div>
<!-- 4:3の画像 -->
<div class="same-size-slider_slide">
<img
src="images/image2.png"
alt="4:3の画像">
</div>
<!-- 1:1の画像 -->
<div class="same-size-slider_slide">
<img
src="images/image3.png"
alt="1:1の画像">
</div>
<!-- 1:2の画像 -->
<div class="same-size-slider_slide">
<img
src="images/image4.png"
alt="1:2の画像">
</div>
</div>
</div>
<!-- 前へ・次へボタン -->
<div class="same-size-slider_controls">
<!-- 1枚前へ移動するボタン -->
<button
class="same-size-slider_button same-size-slider_prev"
type="button">
前へ
</button>
<!-- 1枚次へ移動するボタン -->
<button
class="same-size-slider_button same-size-slider_next"
type="button">
次へ
</button>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは4枚の画像と「前へ」「次へ」の操作ボタンを配置し、CSSではサイズや縦横比が異なる画像を16:9の表示エリアへ同じ大きさで表示します。JavaScriptでは現在表示している画像を管理し、ボタンをクリックすると前後の画像へ1枚ずつ切り替えます。スライダーで使用するimagesフォルダと画像ファイルはZIPには含まれていないため、利用者自身で用意して配置してください。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
├── image3.png
└── image4.png
各ファイルの役割
index.htmlはスライダー本体を構成するファイルです。4枚の画像をimages/image1.pngからimages/image4.pngまで読み込み、画像表示エリアと「前へ」「次へ」の操作ボタンを配置します。表示する画像を追加・変更する場合は、このファイルの画像部分を編集します。
style.cssはスライダーの表示を設定するファイルです。スライダーの最大横幅、16:9の表示エリア、画像の切り取り位置、角丸、画像切り替えの速度、ボタンのサイズ・色・余白などを変更できます。object-fit:cover;によって元画像の縦横比を維持したまま表示エリア全体を覆い、object-position:center;によって中央を基準にはみ出した部分を切り取ります。
script.jsは画像を切り替えるファイルです。現在表示している画像番号を管理し、「前へ」をクリックすると1枚前、「次へ」をクリックすると1枚次の画像へ移動します。1枚目では「前へ」、4枚目では「次へ」が操作できない状態になります。
imagesフォルダにはスライダーで使用する画像を配置します。image1.png・image2.png・image3.png・image4.pngはZIPには含まれていないため、利用者自身で画像を用意してください。元画像のサイズや縦横比を揃える必要はなく、16:9・4:3・1:1・1:2など異なる比率の画像を使用できます。
設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。次にsampleフォルダ内へimagesフォルダを作成し、使用する4枚の画像をimage1.png・image2.png・image3.png・image4.pngというファイル名で配置してください。index.htmlからstyle.cssとscript.jsを読み込み、4枚の画像はimagesフォルダから読み込む構成です。
必要なファイルを配置したあと、sample/index.htmlをブラウザで開いてください。最初はimage1.pngが表示されます。「次へ」をクリックするとimage2.png、image3.png、image4.pngの順番で切り替わり、「前へ」をクリックすると逆方向へ戻ります。最初と最後では移動できない方向のボタンが無効になります。
カスタマイズできる内容
index.htmlでは表示する画像、画像の順番、alt属性を変更できます。別の画像を使用する場合はimagesフォルダ内の画像を差し替えるか、index.htmlのsrcを使用するファイル名へ変更してください。画像ごとに元サイズや縦横比が異なっていても、style.cssのobject-fit:cover;によって同じ16:9の表示エリアへ揃えて表示できます。
style.cssではスライダーの横幅、表示エリアの比率、角丸、画像を切り取る基準位置、ボタンの色・大きさ・余白、画像切り替えの速度を変更できます。現在はobject-position:center;のため画像中央を基準に切り取ります。被写体の位置に合わせて切り取り位置を変更したい場合は、この値を調整できます。
数値調整
style.css
padding:40px 20px;
ページ全体の上下・左右余白です。40pxを大きくすると上下の間隔が広がり、20pxを大きくすると左右の画面端との間隔が広がります。
max-width:696px;
スライダー全体の最大横幅です。値を大きくするとPCで横に広く表示され、小さくするとコンパクトになります。
margin:40px auto;
スライダー全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
aspect-ratio:16 / 9;
画像表示エリアの縦横比です。現在は16:9で統一しています。数値を変更すると、すべての画像を表示する枠の縦横比が変わります。
border-radius:18px;
画像表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
transition:transform .3s ease;
画像を切り替えるアニメーション時間です。0.3秒で移動します。値を大きくするとゆっくり、小さくすると速く切り替わります。
gap:16px;
「前へ」と「次へ」のボタン同士の間隔です。値を大きくするとボタン同士が離れ、小さくすると近くなります。
margin-top:20px;
画像表示エリアと操作ボタンの間隔です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。
min-width:120px;
ボタンの最小横幅です。値を大きくするとボタンが横に広がり、小さくするとコンパクトになります。
padding:12px 24px;
ボタンの内側余白です。12pxは上下、24pxは左右の余白です。値を大きくするとボタンが大きくなります。
border-radius:8px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
opacity:.7;
操作できないボタンの透明度です。値を小さくすると薄くなり、1に近づけると濃く表示されます。
max-width:640px
スマートフォン向けの表示へ切り替える基準となる画面幅です。640px以下になると、スライダーの上下余白とボタンのサイズ・間隔を小さくします。
margin:24px auto;
640px以下で使用するスライダーの上下余白です。24pxを大きくすると上下の間隔が広がります。
gap:10px;
640px以下で使用するボタン同士の間隔です。値を大きくするとボタン同士が離れます。
margin-top:18px;
640px以下で使用する画像とボタンの間隔です。値を大きくすると上下の間隔が広がります。
min-width:100px;
640px以下で使用するボタンの最小横幅です。値を大きくするとボタンが横に広がります。
padding:11px 20px;
640px以下で使用するボタンの内側余白です。11pxは上下、20pxは左右の余白です。
font-size:15px;
640px以下で使用するボタンの文字サイズです。値を大きくすると文字が大きくなります。
script.js
let sameSizeSliderIndex=0;
最初に表示する画像番号です。0は1枚目を表します。1へ変更すると2枚目、2へ変更すると3枚目から表示を開始できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:696pxにより、画面幅が狭くなるとスライダー全体も縮小します。画像表示エリアにはaspect-ratio:16 / 9;を指定しているため、横幅が変化しても16:9の比率を維持します。画像にはwidth:100%・height:100%・object-fit:cover;を指定しているため、元画像のサイズや比率が異なっていても同じ表示エリアへ揃えられます。
画面幅640px以下ではmedia queryによってスライダーの上下余白を24px、ボタン同士の間隔を10px、ボタンの最小横幅を100px、文字サイズを15pxへ変更します。これにより、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント