コピペで完結！タブ切替 #10【サムネで大画面切替できるタブ】

html/css/js
2025.10.05

サムネで大画面切替できるタブ

サムネイルをタブのように使い、クリックすると大きな表示画像が切り替わるギャラリーUIです。 サムネとメイン画像が連動するので、プレビューやギャラリー表示に最適です。 キーボード操作やARIA属性にも対応しており、直感的かつアクセシブルに利用できます。

コードについて 本記事のコードは AI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

コードをコピーして使おう！

/* =========================
   ギャラリーUI用CSS（HTML id="gallery-demo" に対応）
   ========================= */

/* ギャラリー全体のレイアウト */
#gallery-demo {
  display: flex;            /* 要素をフレックスボックス化 */
  flex-direction: column;   /* 縦方向に並べる（上：大画像、下：サムネ） */
  gap: 12px;                /* 大画像とサムネ群の間に余白 */
}

/* 大きな表示エリア */
#gallery-demo .display {
  border: 1px solid #e5e7eb; /* 薄いグレーの枠線 */
  border-radius: 10px;       /* 角を丸くする */
  overflow: hidden;          /* 画像がはみ出した場合は隠す */
  text-align: center;        /* 画像を中央寄せ */
  background: #f8fafc;       /* 薄い背景色（グレー） */
  padding: 10px;             /* 内側に余白をつける */
}

/* 表示エリア内の画像 */
#gallery-demo .display img {
  max-width: 100%;           /* 親要素の横幅にフィットさせる */
  height: auto;              /* 縦横比を保持 */
  display: block;            /* インライン要素からブロック要素に */
  margin: 0 auto;            /* 左右中央寄せ */
}

/* サムネイルボタン群（タブリスト部分） */
#gallery-demo .thumbs {
  display: flex;             /* 横並びに配置 */
  gap: 8px;                  /* サムネ同士の間隔 */
}

/* 各サムネイルボタン */
#gallery-demo .thumbs button {
  border: 2px solid transparent; /* 通常時は透明枠 */
  border-radius: 8px;            /* 角丸 */
  overflow: hidden;              /* 画像のはみ出しを隠す */
  padding: 0;                    /* ボタン内余白をなくす */
  cursor: pointer;               /* ホバー時に指カーソルにする */
  background: #fff;              /* 背景は白 */
}

/* サムネイル画像 */
#gallery-demo .thumbs img {
  display: block;            /* 画像をブロック要素化 */
  width: 80px;               /* サムネイル横幅固定 */
  height: 60px;              /* サムネイル高さ固定 */
  object-fit: cover;         /* アスペクト比を保ちつつ埋める（中央トリミング） */
}

/* 選択状態のタブ（アクティブなサムネイル） */
#gallery-demo .thumbs button[aria-selected="true"] {
  border-color: #0b6bff;     /* アクティブ時は青枠で強調 */
}

/* キーボードフォーカス時（アクセシビリティ対応） */
#gallery-demo .thumbs button:focus-visible {
  outline: 2px solid #0b6bff; /* キーボード操作時に青枠を出す */
  outline-offset: 2px;        /* 枠線をボタンから少し外に出す */
}

コメント