比較グリッド
タイル表示された画像をタップすると1枚だけ拡大され他が縮小する。再タップで元の均等グリッドに戻る。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 3案の比較でどれかに注目させる
- 施工例・カラーバリエーションの見比べ
- 少数の画像を省スペースで並べる
- 避ける場面
- 4枚以上（拡大しても差が小さい）
- 画像に長い説明が付く比較（表に）
- 拡大した1枚だけを読ませる用途
- 構成要素
- グリッド
- 画像タイル
- ラベル
- 操作ヒント
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab で各タイル（button）に到達・Enter/Space で拡大／再度押して戻る
- 支援技術
タイルは button でラベルが名前、選択中は aria-pressed=true。他を 45% に減光して示す。拡大は視覚効果のみで DOM 順は変わらない。reduce で即時
- 動き
拡大 350ms ease（scale 1.06）・他は 300ms で 0.93 に縮み減光。1枚に注目を集める。reduce では即時
デザインの要点
- 拡大は 1.06 倍に留め、他を 0.93 倍＋45% に落として相対差で目立たせる。大きく拡大すると隣に重なり切れる
- 格子の列幅は変えず transform だけで拡縮する。グリッドを組み替えるとタイルが跳ねて比較の位置関係が崩れる
- 選択中のタイルだけ z-index を上げる。拡大した縁が隣の減光したタイルの下に隠れる
- タイルは button にし aria-pressed で選択を伝える。div のままだと拡大がキーボードと読み上げに届かない
コード（コピーして使えます）
<div class="ig-root" id="igRoot">
<!-- <img src="..." alt="..."> を .ig-item 内に置き換えて使う -->
<button class="ig-item" type="button" aria-pressed="false" data-label="Scene A" style="background:linear-gradient(135deg,#2b50c7,#5a7bff)">
<span class="ig-label">Scene A</span>
</button>
<button class="ig-item" type="button" aria-pressed="false" data-label="Scene B" style="background:linear-gradient(135deg,#e86c4d,#f5a623)">
<span class="ig-label">Scene B</span>
</button>
<button class="ig-item" type="button" aria-pressed="false" data-label="Scene C" style="background:linear-gradient(135deg,#2dc793,#2b50c7)">
<span class="ig-label">Scene C</span>
</button>
</div>
<p class="ig-hint">タップで拡大 / 再タップで戻る</p>