モーダル付き制作実績ギャラリー
実績カードをクリックすると詳細モーダルが開く、制作実績ギャラリーです。グリッドは repeat(auto-fill,minmax(180px,1fr)) で、カードは aspect-ratio:4/3 により縦横比を保ったまま整列します。
このパーツの使いどころと実装ポイント
実績カードをクリックすると詳細モーダルが開く、制作実績ギャラリーです。グリッドは repeat(auto-fill,minmax(180px,1fr)) で、カードは aspect-ratio:4/3 により縦横比を保ったまま整列します。モーダルは role="dialog" と aria-modal="true" を持ち、初期状態は hidden。閉じるボタンには aria-label を付け、キーボード操作にも配慮した設計です。サムネイルは object-fit 前提の画像枠に収まります。
向いている場面
制作会社やデザイナーのポートフォリオ、施工事例の紹介、商品ラインナップの一覧など、一覧で俯瞰させつつ気になったものだけ詳しく見せたい場面に適します。一覧をすっきり保ったまま、詳細情報をモーダルへ逃がせるのが利点です。
カスタマイズと注意点
- カードはJSでグリッドへ生成される構成のため、実績データ（画像・名称・説明）を配列で持たせて差し替えると管理しやすくなります。
- モーダルは
hidden属性で開閉を制御します。背景のスクロール固定や Esc キーでの閉じ操作を加えると、より使い勝手が良くなります。 - ダイアログ表示中はフォーカスをモーダル内に保つ（フォーカストラップ）と、キーボード利用者が背後の要素へ迷い込みません。閉じる際は元のカードへフォーカスを戻すのが理想です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
モーダルはキーボードだけでも操作できますか？
閉じるボタンにaria-labelが付き、モーダルはrole=dialogとaria-modalで役割が明示されているため基本のアクセシビリティは確保されています。さらにEscキーでの閉じ操作や、表示中にフォーカスをモーダル内へ留める処理を加えると、キーボード操作の完成度が高まります。
実績の数を増やすにはどうすればいいですか？
カードはJavaScriptでグリッドへ生成される構成なので、画像・名称・説明をまとめた実績データの配列に項目を追加するのが簡単です。グリッドはauto-fillで自動的に列を埋めるため、件数が変わってもレイアウトは整然と保たれます。