画像ギャラリーをアコーディオンで表示する方法
画像ギャラリーをアコーディオンで表示する方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、見出しをクリックすると複数の画像をまとめて表示できるアコーディオンを作成します。初期状態では画像を非表示にしておき、「ギャラリーを表示」をクリックしたときだけ画像一覧を開くため、画像数が多いページでも表示領域をすっきり整理できます。
商品写真、制作実績、施工事例、イベント写真、作品紹介など、複数の画像をまとめて掲載したい場面に利用できます。アコーディオンを開くと6枚の画像がグリッド形式で表示され、もう一度ボタンをクリックすると閉じます。開閉状態に合わせて右側の記号も「＋」と「－」へ切り替わるため、現在の状態を視覚的に確認できます。
画像部分にはCSS Gridを使用しており、表示領域の幅に合わせて列数が自動的に調整されます。スマートフォン・タブレット・PCでも利用しやすく、画像ファイルを差し替えることで自分のWebサイトに合わせたギャラリーへ変更できます。記事内のデモでは動作確認用のサンプル画像を使用し、実際に利用する場合は自分で用意した画像へ置き換えて使用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しをクリックすると、画像ギャラリーを表示できます。
「ギャラリーを表示」をクリックすると6枚のサンプル画像が表示され、もう一度クリックすると閉じます。
コードをコピーして使おう！
<!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-accordion_wrap">
<!-- タイトル -->
<div class="image-gallery-accordion_title">
画像ギャラリーをアコーディオンで表示
</div>
<!-- 説明文 -->
<p class="image-gallery-accordion_text">
見出しをクリックすると、画像ギャラリーを表示できます。
</p>
<!-- アコーディオン項目 -->
<div class="image-gallery-accordion_item">
<!-- 開閉ボタン -->
<button class="image-gallery-accordion_button" type="button">
ギャラリーを表示
</button>
<!-- 開閉するコンテンツ -->
<div class="image-gallery-accordion_content">
<!-- 画像一覧 -->
<div class="image-gallery-accordion_grid">
<!-- imagesフォルダ内の画像を表示 -->
<img src="images/image1.png" alt="画像1">
<img src="images/image2.png" alt="画像2">
<img src="images/image3.png" alt="画像3">
<img src="images/image4.png" alt="画像4">
<img src="images/image5.png" alt="画像5">
<img src="images/image6.png" alt="画像6">
</div>
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、表示する画像を保存するimagesフォルダで構成されています。HTMLではアコーディオンの見出しや画像一覧を作成し、CSSではレイアウトや画像サイズ、開閉時の表示を設定します。JavaScriptでは「ギャラリーを表示」ボタンをクリックしたときに、画像一覧を開閉する処理を行います。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
├── image3.png
├── image4.png
├── image5.png
└── image6.png
各ファイルの役割
index.htmlは画像ギャラリー全体を構成するファイルです。タイトル、説明文、「ギャラリーを表示」のボタン、画像一覧を記述しています。表示する画像を変更する場合は、各img要素のsrc属性とalt属性を編集します。
style.cssはアコーディオンと画像ギャラリーのデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸、画像同士の間隔、画像の表示比率などを変更できます。
script.jsはアコーディオンを開閉するためのファイルです。「ギャラリーを表示」ボタンをクリックすると、親要素へis-openクラスを追加または削除し、画像一覧の表示状態を切り替えます。
imagesフォルダには、ギャラリーで表示する画像を保存します。このサンプルではimage1.pngからimage6.pngまでの6枚を使用します。画像ファイル自体は利用者が用意してください。
設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsを保存し、同じ階層へimagesフォルダを作成します。imagesフォルダの中へ、表示したい画像をimage1.png、image2.png、image3.png、image4.png、image5.png、image6.pngというファイル名で配置してください。
すべてのファイルを配置したあと、sample/index.htmlをブラウザで開きます。「ギャラリーを表示」をクリックするとimagesフォルダ内の6枚の画像が表示され、もう一度クリックすると閉じます。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、開閉ボタンの文章、表示する画像、画像の代替テキストを変更できます。画像ファイル名を変更する場合は、imagesフォルダ内のファイル名とimg要素のsrc属性を一致させてください。画像の枚数を増減する場合は、image-gallery-accordion_grid内のimg要素を追加または削除します。
style.cssでは、ギャラリー全体の最大横幅、内側余白、背景色、枠線、角丸、開閉ボタンの余白、画像同士の間隔、画像の縦横比、画像の角丸などを変更できます。
数値調整
style.css
max-width:700px;
ギャラリー全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
ギャラリー全体の上下余白です。40pxを大きくすると上下の間隔が広がります。
padding:32px;
ギャラリー全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
ギャラリー全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
padding:16px 18px;
開閉ボタンの内側余白です。上下の16pxを大きくするとボタンが高くなり、左右の18pxを大きくすると文字と端の間隔が広がります。
padding:18px;
開いた画像一覧部分の内側余白です。値を大きくすると画像と外枠の間隔が広がります。
minmax(180px,1fr)
画像1列あたりの最小幅です。180pxを大きくすると1枚あたりの画像が大きくなり、1行に並ぶ枚数が少なくなります。
gap:12px;
画像同士の間隔です。値を大きくすると画像の間隔が広がります。
aspect-ratio:4/3;
画像の表示比率です。このサンプルでは横4・縦3の比率で統一しています。
border-radius:10px;
各画像の角丸です。値を大きくすると画像の丸みが強くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてギャラリー全体が縮小されます。また、画像一覧にはgrid-template-columns:repeat(auto-fit,minmax(180px,1fr));を使用しているため、表示できる横幅に応じて画像の列数が自動的に変化します。640px以下では全体の内側余白を24px 18pxへ変更し、画像を1列表示に切り替えるため、スマートフォン・タブレット・PCで利用できます。
コメント