画像ギャラリーをドロワーメニューで表示する方法
画像ギャラリーをドロワーメニューで表示する方法を紹介します。このサンプルでは、ボタンをクリックすると画面右側からドロワーメニューが開き、その中に複数の画像をギャラリー形式で一覧表示します。通常時はギャラリーを画面外へ隠しておけるため、ページ内の表示スペースを使いすぎず、必要なときだけ画像を確認できる構成です。
商品画像や作品写真、施工事例、施設写真など、複数の画像をまとめて見せたい場面に利用できます。ECサイトの商品ページ、ポートフォリオ、サービス紹介ページ、観光・宿泊施設の案内ページなどにも取り入れやすく、メインコンテンツを表示したまま画像ギャラリーを確認できます。ドロワーを開くと背景には半透明のオーバーレイが表示され、ギャラリーへ視線を集めやすくしています。
HTMLではギャラリーに表示する画像やタイトルを変更でき、CSSではドロワーメニューの横幅、画像サイズ、画像同士の間隔、背景色、角丸などを調整できます。JavaScriptでは「画像ギャラリーを見る」ボタンと閉じるボタンによる開閉を行います。画面幅が狭い場合はドロワーの横幅が自動調整されるため、スマートフォン・タブレット・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="image-gallery-drawer-menu_wrap">
<!-- タイトル -->
<div class="image-gallery-drawer-menu_title">
画像ギャラリー
</div>
<!-- 説明文 -->
<p class="image-gallery-drawer-menu_text">
ボタンをクリックすると、画面右側に画像ギャラリーを表示します。
</p>
<!-- ドロワー表示ボタン -->
<button
class="image-gallery-drawer-menu_button"
id="gallery-open"
type="button">
画像ギャラリーを見る
</button>
</div>
<!-- 背景オーバーレイ -->
<div
class="image-gallery-drawer-menu_overlay"
id="gallery-overlay">
</div>
<!-- 画像ギャラリーを表示するドロワーメニュー -->
<div
class="image-gallery-drawer-menu_drawer"
id="gallery-drawer">
<!-- ドロワー上部 -->
<div class="image-gallery-drawer-menu_header">
<!-- ドロワータイトル -->
<div class="image-gallery-drawer-menu_drawer-title">
画像ギャラリー
</div>
<!-- 閉じるボタン -->
<button
class="image-gallery-drawer-menu_close"
id="gallery-close"
type="button"
aria-label="画像ギャラリーを閉じる">
×
</button>
</div>
<!-- 画像一覧 -->
<div class="image-gallery-drawer-menu_gallery">
<!-- 画像1 -->
<img
class="image-gallery-drawer-menu_image"
src="images/image1.png"
alt="ギャラリー画像1">
<!-- 画像2 -->
<img
class="image-gallery-drawer-menu_image"
src="images/image2.png"
alt="ギャラリー画像2">
<!-- 画像3 -->
<img
class="image-gallery-drawer-menu_image"
src="images/image3.png"
alt="ギャラリー画像3">
<!-- 画像4 -->
<img
class="image-gallery-drawer-menu_image"
src="images/image4.png"
alt="ギャラリー画像4">
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、ギャラリーに表示する4枚の画像で構成されています。HTMLでは画像ギャラリーを開くボタン、画面全体を暗くするオーバーレイ、画面右側から表示するドロワーメニュー、ギャラリー画像を配置します。CSSではドロワーの位置や横幅、画像の2列表示、開閉時のアニメーションなどを設定し、JavaScriptでボタンをクリックしたときの開閉処理を行います。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
├── image3.png
└── image4.png
各ファイルの役割
index.htmlは画像ギャラリー全体を構成するファイルです。「画像ギャラリー」のタイトル、説明文、「画像ギャラリーを見る」のボタン、ドロワー内のタイトル、閉じるボタン、4枚の画像を配置しています。画像のsrcやaltを変更すると、ギャラリーに表示する画像と代替テキストを変更できます。
style.cssは画像ギャラリーとドロワーメニューのデザインを設定するファイルです。通常時はドロワーを画面右側へ隠し、表示時には画面内へ移動させます。ドロワーの横幅、内側余白、背景色、影、画像の列数、画像同士の間隔、角丸などもこのファイルで設定しています。
script.jsはドロワーメニューを開閉するファイルです。「画像ギャラリーを見る」をクリックするとドロワーとオーバーレイへis-openクラスを追加し、×ボタンをクリックするとis-openクラスを削除します。
imagesフォルダにはギャラリーで使用する画像を配置します。このサンプルではimage1.pngからimage4.pngまでの4枚を使用します。画像ファイルは利用者側で用意してください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にimagesフォルダを作成します。ギャラリーで使用する4枚の画像をimage1.png、image2.png、image3.png、image4.pngのファイル名でimagesフォルダへ配置してください。別のファイル名を使用する場合は、index.htmlの各srcも実際のファイル名へ変更します。
配置が完了したらsample/index.htmlをブラウザで開きます。「画像ギャラリーを見る」をクリックすると画面右側からドロワーメニューが表示され、4枚の画像を一覧で確認できます。ドロワー右上の×ボタンをクリックすると閉じます。
カスタマイズできる内容
index.htmlでは「画像ギャラリー」のタイトル、「ボタンをクリックすると、画面右側に画像ギャラリーを表示します。」の説明文、「画像ギャラリーを見る」のボタン文字、ドロワー内のタイトルを変更できます。ギャラリー画像を変更する場合は、各img要素のsrcとaltを編集します。画像を追加したい場合は、image-gallery-drawer-menu_gallery内へ同じ形式のimg要素を追加できます。
style.cssでは表示エリアの横幅や余白、ボタンの色と角丸、オーバーレイの色、ドロワーメニューの横幅、背景色、影、画像の列数、画像同士の間隔、画像の縦横比や角丸を変更できます。JavaScriptでは開くボタンと閉じるボタンによるドロワーの開閉処理を行っています。
数値調整
style.css
max-width:760px;
最初に表示する画像ギャラリー案内エリアの最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
padding:40px 24px;
案内エリアの内側余白です。上下40px・左右24pxを変更すると、内容と外枠の間隔が変わります。
border-radius:18px;
案内エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
案内エリアとドロワー内で使用しているタイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 28px;
説明文の下側余白です。28pxを大きくするとボタンとの間隔が広がります。
padding:14px 24px;
「画像ギャラリーを見る」ボタンの内側余白です。上下14px・左右24pxを変更するとボタンの大きさが変わります。
border-radius:10px;
「画像ギャラリーを見る」ボタンの角丸です。値を大きくすると丸みが強くなります。
background:rgba(15,23,42,.45);
ドロワーを開いたときに表示するオーバーレイの色と透明度です。.45を変更すると背景の透け方が変わります。
transition:opacity .3s ease, visibility .3s ease;
オーバーレイが切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。
width:min(520px,90vw);
ドロワーメニューの横幅です。最大520pxで表示し、画面が狭い場合は画面幅の90%に収まるようにしています。
padding:28px;
ドロワーメニューの内側余白です。値を大きくすると画像やタイトルとドロワー端の間隔が広がります。
transition:transform .3s ease;
ドロワーメニューが画面右側から開閉する時間です。0.3秒で移動し、値を大きくするとゆっくり、小さくすると速くなります。
width:44px;・height:44px;
×ボタンの横幅と高さです。同じ値を指定することで円形の閉じるボタンとして表示しています。
grid-template-columns:repeat(2,1fr);
ギャラリー画像を2列で表示する設定です。各画像は利用できる横幅を均等に使用します。
gap:16px;
ギャラリー画像同士の間隔です。値を大きくすると画像同士の間隔が広がり、小さくすると狭くなります。
aspect-ratio:4 / 3;
ギャラリー画像を横4・縦3の比率で表示します。元画像の比率が異なる場合はobject-fit:cover;によって表示領域に合わせて切り抜かれます。
border-radius:12px;
ギャラリー画像の角丸です。値を大きくすると画像の丸みが強くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。ドロワーメニューにはwidth:min(520px,90vw);を指定しているため、画面幅が狭い場合は画面内に収まるように横幅が調整されます。案内エリアにもwidth:100%とmax-width:760pxを指定しています。
画面幅640px以下では、案内エリアやドロワーメニューの余白を小さくし、grid-template-columns:1fr;によってギャラリー画像を2列から1列へ変更します。そのため、スマートフォンでは画像を縦方向に確認でき、タブレット・PCでは横幅に余裕のある2列の画像ギャラリーとして利用できます。
コメント