タブで画像ギャラリーを切り替える方法
タブで画像ギャラリーを切り替える方法を紹介します。このサンプルでは、複数のタブをクリックすると、選択したタブに対応する画像ギャラリーへ表示内容が切り替わります。カテゴリーごとに複数の画像をまとめて表示できるため、すべての画像を一度に並べず、内容を整理して見せたい場合に利用できます。
商品カテゴリーごとの写真、施設ごとの画像、制作実績、旅行先やイベント別の写真など、複数の画像グループを分けて掲載したい場面に適しています。選択中のタブは青色で表示され、現在どのギャラリーを見ているのか分かりやすくなっています。JavaScriptではクリックされたタブに対応するパネルだけを表示し、それ以外のギャラリーを非表示にします。
HTMLではタブ名や各ギャラリーに配置する画像を変更でき、CSSではタブの色、余白、角丸、画像同士の間隔、列数、画像の表示比率などを調整できます。画面幅640px以下では画像を1列表示へ切り替えるため、スマートフォン・タブレット・PCでも利用しやすく、複数の画像をカテゴリー別に見せたいWebページへ導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
タブをクリックすると、対応する画像ギャラリーへ切り替わります。
「自然」「山」「風景」のタブをクリックすると、それぞれに対応する3枚の画像ギャラリーへ切り替わります。
コードをコピーして使おう！
<!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="tab-image-gallery-switch_wrap">
<!-- タイトル -->
<div class="tab-image-gallery-switch_title">
画像ギャラリーをタブで切り替える
</div>
<!-- 説明文 -->
<p class="tab-image-gallery-switch_text">
タブをクリックすると、対応する画像ギャラリーへ切り替わります。
</p>
<!-- タブ一覧 -->
<div class="tab-image-gallery-switch_tabs" role="tablist" aria-label="画像ギャラリー切り替え">
<!-- ギャラリー1タブ -->
<button
class="tab-image-gallery-switch_tab is-active"
id="tab-image-gallery-switch-tab1"
type="button"
role="tab"
aria-controls="tab-image-gallery-switch-panel1"
aria-selected="true"
data-tab="gallery1">
ギャラリー1
</button>
<!-- ギャラリー2タブ -->
<button
class="tab-image-gallery-switch_tab"
id="tab-image-gallery-switch-tab2"
type="button"
role="tab"
aria-controls="tab-image-gallery-switch-panel2"
aria-selected="false"
data-tab="gallery2">
ギャラリー2
</button>
<!-- ギャラリー3タブ -->
<button
class="tab-image-gallery-switch_tab"
id="tab-image-gallery-switch-tab3"
type="button"
role="tab"
aria-controls="tab-image-gallery-switch-panel3"
aria-selected="false"
data-tab="gallery3">
ギャラリー3
</button>
</div>
<!-- ギャラリー1 -->
<div
class="tab-image-gallery-switch_panel is-active"
id="tab-image-gallery-switch-panel1"
role="tabpanel"
aria-labelledby="tab-image-gallery-switch-tab1"
data-panel="gallery1">
<!-- 画像1 -->
<img
class="tab-image-gallery-switch_image"
src="images/image1.png"
alt="ギャラリー1の画像1">
<!-- 画像2 -->
<img
class="tab-image-gallery-switch_image"
src="images/image2.png"
alt="ギャラリー1の画像2">
<!-- 画像3 -->
<img
class="tab-image-gallery-switch_image"
src="images/image3.png"
alt="ギャラリー1の画像3">
</div>
<!-- ギャラリー2 -->
<div
class="tab-image-gallery-switch_panel"
id="tab-image-gallery-switch-panel2"
role="tabpanel"
aria-labelledby="tab-image-gallery-switch-tab2"
data-panel="gallery2">
<!-- 画像4 -->
<img
class="tab-image-gallery-switch_image"
src="images/image4.png"
alt="ギャラリー2の画像1">
<!-- 画像5 -->
<img
class="tab-image-gallery-switch_image"
src="images/image5.png"
alt="ギャラリー2の画像2">
<!-- 画像6 -->
<img
class="tab-image-gallery-switch_image"
src="images/image6.png"
alt="ギャラリー2の画像3">
</div>
<!-- ギャラリー3 -->
<div
class="tab-image-gallery-switch_panel"
id="tab-image-gallery-switch-panel3"
role="tabpanel"
aria-labelledby="tab-image-gallery-switch-tab3"
data-panel="gallery3">
<!-- 画像7 -->
<img
class="tab-image-gallery-switch_image"
src="images/image7.png"
alt="ギャラリー3の画像1">
<!-- 画像8 -->
<img
class="tab-image-gallery-switch_image"
src="images/image8.png"
alt="ギャラリー3の画像2">
<!-- 画像9 -->
<img
class="tab-image-gallery-switch_image"
src="images/image9.png"
alt="ギャラリー3の画像3">
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、表示する画像を保存するimagesフォルダで構成されています。HTMLでは3つのタブと、それぞれのタブに対応する画像ギャラリーを作成します。CSSではタブやギャラリーのレイアウトを整え、JavaScriptではクリックしたタブに合わせて表示する画像ギャラリーを切り替えます。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
├── image3.png
├── image4.png
├── image5.png
├── image6.png
├── image7.png
├── image8.png
└── image9.png
各ファイルの役割
index.htmlはタブと画像ギャラリーの構成を作るファイルです。「ギャラリー1」「ギャラリー2」「ギャラリー3」のタブ名や、各ギャラリーに表示する画像を変更できます。画像はimages/image1.pngからimages/image9.pngまでを指定しています。
style.cssはタブと画像ギャラリーのデザインを設定するファイルです。全体の横幅や余白、タブの色や角丸、画像の列数、画像同士の間隔、画像の表示比率などを変更できます。
script.jsはタブをクリックしたときの切り替え処理を行うファイルです。クリックされたタブを選択状態に変更し、そのタブのdata-tabと対応するdata-panelを持つ画像ギャラリーだけを表示します。
imagesフォルダにはギャラリーで使用する画像を配置します。このサンプルではimage1.pngからimage9.pngまでの9枚を使用します。画像ファイル自体は利用者側で用意してください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にimagesフォルダを作成します。使用する9枚の画像をimage1.pngからimage9.pngのファイル名でimagesフォルダへ配置してください。
配置後にsample/index.htmlをブラウザで開くと、最初は「ギャラリー1」が選択された状態でimage1.png・image2.png・image3.pngが表示されます。「ギャラリー2」をクリックするとimage4.png〜image6.png、「ギャラリー3」をクリックするとimage7.png〜image9.pngへ切り替わります。
カスタマイズできる内容
index.htmlではタブに表示する「ギャラリー1」「ギャラリー2」「ギャラリー3」の文字を変更できます。また、各img要素のsrcを書き換えることで、表示する画像を変更できます。画像の説明に合わせてaltも変更してください。
style.cssでは選択中のタブの背景色と文字色、タブの高さや余白、全体の最大横幅、画像同士の間隔、画像の角丸などを変更できます。grid-template-columns:repeat(3,1fr);では、選択中のギャラリーを3列で表示しています。
数値調整
style.css
max-width:760px;
画像ギャラリー切り替え全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
min-height:52px;
タブの最小高さです。値を大きくするとタブが高くなります。
padding:14px;
タブの内側余白です。値を大きくすると文字と枠線の間隔が広がります。
border-radius:12px 12px 0 0;
タブ上部の角丸です。12pxを大きくすると上側の丸みが強くなります。
transition:0.3s;
タブの背景色と文字色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
margin-left:6px;
タブ同士の間隔です。値を大きくするとタブ同士が離れ、小さくすると近くなります。
padding:12px;
画像ギャラリー内側の余白です。値を大きくすると画像と外枠の間隔が広がります。
grid-template-columns:repeat(3,1fr);
画像ギャラリーの列数です。このサンプルでは3列で表示します。
gap:8px;
ギャラリー画像同士の間隔です。値を大きくすると画像同士の間隔が広がります。
aspect-ratio:4/3;
ギャラリー画像の表示比率です。このサンプルでは横4・縦3の比率で表示します。
border-radius:8px;
各画像の角丸です。値を大きくすると画像の丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxにより、画面幅に合わせて全体が縮小されます。通常は画像を3列で表示し、画面幅640px以下ではgrid-template-columns:1fr;へ変更して画像を1列で表示します。あわせて全体の余白やタブの高さ、文字サイズ、タブ同士の間隔も小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント