画像をアコーディオンで表示する方法
画像をアコーディオンで表示する方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、見出しをクリックすると1枚の画像を表示できるアコーディオンを作成します。初期状態では画像を非表示にしておき、「画像を表示」をクリックしたときだけ画像が表示されるため、必要な画像だけを開いて確認できる構成にできます。
商品の詳細画像、サービスの説明画像、施工事例、施設写真、操作方法の補足画像など、文章の途中へ必要に応じて画像を表示したい場面に利用できます。ボタンをクリックすると画像が表示され、もう一度クリックすると閉じます。開閉状態に合わせてボタン右側の記号も「＋」と「－」へ切り替わるため、画像が開いているか閉じているかを視覚的に確認できます。
表示する画像は自分で用意したファイルへ差し替えて使用できます。HTMLではタイトル、説明文、ボタンの文章、画像ファイル、代替テキストを変更でき、CSSでは全体の横幅、余白、背景色、枠線、角丸、画像サイズなどを調整できます。画面幅に合わせて全体と画像が縮小されるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しをクリックすると、画像を表示できます。
「画像を表示」をクリックすると1枚のサンプル画像が表示され、もう一度クリックすると閉じます。
コードをコピーして使おう！
<!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-accordion_wrap">
<!-- タイトル -->
<div class="image-accordion_title">
画像をアコーディオンで表示
</div>
<!-- 説明文 -->
<p class="image-accordion_text">
見出しをクリックすると、画像を表示できます。
</p>
<!-- アコーディオン項目 -->
<div class="image-accordion_item">
<!-- 開閉ボタン -->
<button class="image-accordion_button" type="button">
画像を表示
</button>
<!-- 開閉するコンテンツ -->
<div class="image-accordion_content">
<!-- imagesフォルダ内の画像を表示 -->
<img
class="image-accordion_image"
src="images/image1.png"
alt="画像">
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、表示する画像を保存するimagesフォルダで構成されています。HTMLでは画像アコーディオンのタイトル、説明文、開閉ボタン、表示する画像を記述します。CSSでは全体の横幅や余白、枠線、角丸、画像の表示サイズなどを設定し、JavaScriptではボタンをクリックしたときに画像を開閉する処理を行います。
sample/
├── index.html
├── style.css
├── script.js
└── images/
└── image1.png
各ファイルの役割
index.htmlは画像アコーディオン全体を構成するファイルです。タイトル、説明文、「画像を表示」のボタン、表示する画像を記述しています。画像を変更する場合は、img要素のsrc属性とalt属性を編集します。
style.cssは画像アコーディオンのデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、開閉ボタンのサイズ、画像周囲の余白、画像の角丸などを変更できます。
script.jsは画像を開閉するためのファイルです。「画像を表示」ボタンをクリックすると、ボタンの親要素へis-openクラスを追加または削除し、画像の表示状態を切り替えます。
imagesフォルダには、アコーディオンで表示する画像を保存します。このサンプルではimage1.pngを使用します。画像ファイル自体は利用者が用意してください。
設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsを保存し、同じ階層へimagesフォルダを作成します。imagesフォルダの中へ、表示したい画像をimage1.pngというファイル名で配置してください。
すべてのファイルを配置したあと、sample/index.htmlをブラウザで開きます。「画像を表示」をクリックするとimagesフォルダ内の画像が表示され、もう一度クリックすると閉じます。
カスタマイズできる内容
index.htmlでは、タイトル、説明文、開閉ボタンの文章、表示する画像、画像の代替テキストを変更できます。画像ファイル名を変更する場合は、imagesフォルダ内のファイル名とimg要素のsrc属性を一致させてください。
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を大きくすると文字と端の間隔が広がります。
border-radius:12px;
アコーディオン項目の角丸です。値を大きくすると外枠の丸みが強くなります。
padding:18px;
開いた画像部分の内側余白です。値を大きくすると画像と外枠の間隔が広がります。
border-radius:10px;
表示する画像の角丸です。値を大きくすると画像の丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて画像アコーディオン全体が縮小されます。画像にもwidth:100%とheight:autoを指定しているため、元の縦横比を保ちながら表示領域に合わせて縮小されます。また、640px以下では全体の内側余白を24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント