画像をドロワーメニューに拡大表示する方法
画像をクリックすると、画面右側から開くドロワーメニュー内へ拡大表示する方法を紹介します。このサンプルでは、複数のサムネイル画像を並べ、選択した画像をドロワー内へ大きく表示します。ページを移動せずに画像を詳しく確認できるため、一覧表示と拡大表示を組み合わせたい場面に利用できます。
商品一覧、作品ギャラリー、写真一覧、管理画面の画像確認など、サムネイルから大きな画像を確認したい場合に適しています。画像をクリックすると右側からドロワーが開き、選択した画像へ切り替わります。ドロワーは×ボタンまたは背景部分をクリックすると閉じられるため、画像を確認したあと元の一覧へすぐ戻れます。
HTMLでは表示する画像や代替テキストを変更でき、CSSではサムネイルの列数、ドロワーの横幅、余白、角丸、背景色、影、開閉アニメーションなどを調整できます。JavaScriptではクリックした画像を取得してドロワー内へ表示し、開閉状態を制御します。画面幅640px以下では画像一覧を1列表示に変更するため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
画像をクリックすると、画面右側のドロワーメニューに拡大表示します。
画像をクリックすると右側からドロワーメニューが開き、選択した画像を大きく表示できます。×ボタンまたは背景部分をクリックすると閉じます。
コードをコピーして使おう！
<!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="drawer-image-zoom_wrap">
<!-- タイトル -->
<div class="drawer-image-zoom_title">
画像をドロワーで拡大表示
</div>
<!-- 説明文 -->
<p class="drawer-image-zoom_text">
画像をクリックすると、画面右側のドロワーメニューに拡大表示します。
</p>
<!-- サムネイル画像一覧 -->
<div class="drawer-image-zoom_gallery">
<!-- 画像1 -->
<button
class="drawer-image-zoom_button"
type="button"
data-image="images/image1.png"
aria-label="画像1を拡大表示">
<img
class="drawer-image-zoom_thumb"
src="images/image1.png"
alt="画像1">
</button>
<!-- 画像2 -->
<button
class="drawer-image-zoom_button"
type="button"
data-image="images/image2.png"
aria-label="画像2を拡大表示">
<img
class="drawer-image-zoom_thumb"
src="images/image2.png"
alt="画像2">
</button>
<!-- 画像3 -->
<button
class="drawer-image-zoom_button"
type="button"
data-image="images/image3.png"
aria-label="画像3を拡大表示">
<img
class="drawer-image-zoom_thumb"
src="images/image3.png"
alt="画像3">
</button>
</div>
</div>
<!-- 背景オーバーレイ -->
<div
class="drawer-image-zoom_overlay"
id="drawer-image-overlay"></div>
<!-- ドロワーメニュー -->
<div
class="drawer-image-zoom_drawer"
id="drawer-image-panel"
aria-hidden="true">
<!-- 閉じるボタン -->
<button
class="drawer-image-zoom_close"
id="drawer-image-close"
type="button"
aria-label="ドロワーを閉じる">
×
</button>
<!-- 拡大画像 -->
<img
class="drawer-image-zoom_large"
id="drawer-image-large"
src="images/image1.png"
alt="画像1">
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、拡大表示する3枚の画像で構成されています。HTMLではサムネイル画像、背景オーバーレイ、右側から表示するドロワーメニューを配置します。CSSでは画像一覧のレイアウトやドロワーの位置、開閉アニメーション、拡大画像の表示サイズなどを設定し、JavaScriptではクリックした画像をドロワー内へ表示する処理と開閉処理を行います。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
└── image3.png
各ファイルの役割
index.htmlは画像一覧とドロワーメニュー全体を構成するファイルです。タイトル、説明文、表示する画像、画像の代替テキストを変更できます。各ボタンのdata-imageにはドロワー内へ拡大表示する画像を指定し、img要素のsrcには一覧へ表示する画像を指定します。
style.cssは画像一覧とドロワーメニューのデザインを設定するファイルです。全体の横幅、サムネイルの列数、画像同士の間隔、角丸、ドロワーの横幅、背景オーバーレイの色、拡大画像のサイズ、影、開閉アニメーションなどを変更できます。
script.jsは画像の拡大表示とドロワーメニューの開閉を制御するファイルです。サムネイル画像をクリックすると、そのボタンのdata-imageから画像を取得してドロワー内へ設定し、ドロワーと背景オーバーレイを表示します。×ボタンまたは背景オーバーレイをクリックするとドロワーを閉じます。
imagesフォルダには一覧表示と拡大表示で使用する画像を配置します。このサンプルではimage1.png、image2.png、image3.pngの3枚を使用します。画像ファイルは利用者側で用意してください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にimagesフォルダを作成します。使用する3枚の画像をimage1.png、image2.png、image3.pngのファイル名でimagesフォルダへ配置してください。別のファイル名を使用する場合は、index.htmlのsrcとdata-imageを実際のファイル名へ変更します。
配置が完了したらsample/index.htmlをブラウザで開きます。3枚のサムネイル画像が表示され、画像をクリックすると画面右側からドロワーメニューが開きます。クリックした画像がドロワー内へ拡大表示され、×ボタンまたは暗く表示された背景部分をクリックすると閉じることができます。
カスタマイズできる内容
index.htmlでは「画像をドロワーで拡大表示」のタイトル、説明文、サムネイル画像、拡大画像、alt、aria-labelを変更できます。画像を変更する場合は、それぞれのボタンにあるdata-image="images/image1.png"と、画像要素のsrc="images/image1.png"を使用する画像に合わせて変更します。画像を追加する場合は、同じ構造のbutton要素を画像一覧へ追加できます。
style.cssでは画像一覧全体の最大横幅、内側余白、背景色、枠線、角丸、画像の列数、画像同士の間隔、サムネイルの縦横比、マウスを重ねたときの拡大率、背景オーバーレイの濃さ、ドロワーの横幅、拡大画像の最大高さ、角丸、影、開閉速度などを変更できます。
script.jsでは、サムネイルをクリックしたときにdata-imageで指定された画像をドロワーへ設定する処理、ドロワーを開く処理、×ボタンと背景オーバーレイから閉じる処理を行っています。
数値調整
style.css
max-width:760px;
画像一覧全体の最大横幅です。値を大きくすると全体が横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
画像一覧全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
画像一覧全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
画像一覧全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
grid-template-columns:repeat(3,1fr);
サムネイル画像を3列で表示する設定です。3の値を変更すると、1行に表示する画像の列数を変更できます。
gap:16px;
サムネイル画像同士の間隔です。値を大きくすると画像同士が離れ、小さくすると近くなります。
aspect-ratio:4 / 3;
サムネイル画像の表示比率です。横4・縦3の比率で表示します。
transition:transform .3s ease;
サムネイルへマウスを重ねたときの拡大アニメーション時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。
transform:scale(1.05);
サムネイルへマウスを重ねたときの拡大率です。1.05は元の大きさの1.05倍を表します。値を大きくすると拡大が強くなります。
background:rgba(15,23,42,.5);
ドロワー表示中の背景オーバーレイです。最後の.5を大きくすると背景が濃くなり、小さくすると薄くなります。
width:min(520px,90vw);
ドロワーメニューの横幅です。最大520pxで、画面が狭い場合は画面幅の90%以内に収まります。520pxを変更するとPC表示での最大横幅を調整できます。
height:100vh;
ドロワーメニューの高さです。100vhで画面の高さ全体を使用します。
padding:72px 24px 24px;
ドロワーメニューの内側余白です。上側を72px空けることで、右上の×ボタンと拡大画像が重ならないようにしています。
transition:transform .3s ease;
ドロワーメニューが右側から開閉する時間です。0.3秒で移動し、値を大きくするとゆっくり、小さくすると速くなります。
width:44px;・height:44px;
×ボタンの横幅と高さです。値を大きくするとボタンが大きくなります。
max-height:calc(100vh - 120px);
ドロワー内へ表示する拡大画像の最大高さです。画面の高さから120pxを引いた範囲へ画像を収めます。
border-radius:14px;
ドロワー内へ表示する拡大画像の角丸です。値を大きくすると画像の丸みが強くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは画像一覧全体にwidth:100%とmax-width:760pxを指定し、画面幅に合わせて縮小できるようにしています。ドロワーメニューもwidth:min(520px,90vw)によって画面からはみ出しにくい構成です。
画面幅640px以下ではgrid-template-columns:1fr;へ変更し、3列だったサムネイル画像を1列表示に切り替えます。また、全体の余白を24px 18px、ドロワーの横幅を90vwへ調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント