V-003 Media medium

How to create a image gallery 画像ギャラリーの作り方

Grid layout image gallery. Images scale up on hover with overlay reveal. グリッドレイアウトの画像ギャラリー。ホバー時に拡大表示やオーバーレイを表示できます。

gallery image grid hover

ライブデモ Live Demo

Gallery 1

Image Title

Gallery 2

Image Title

Gallery 3

Image Title

Gallery 4

Image Title

1.05x

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Grid layout image gallery. Images scale up on hover with overlay reveal.

グリッドレイアウトの画像ギャラリー。ホバー時に拡大表示やオーバーレイを表示できます。

どこで使うかWhere to use

content gallery, video player, media library, portfolio showcase

ポートフォリオ、写真ギャラリー、プロダクト画像、イベントフォト

特徴Key features

Image gallery with lightbox modal for full-size view. CSS Grid thumbnail layout. Smooth open/close animation. Keyboard navigable (arrow keys, Escape). Lazy loads images. Touch swipe support for mobile.

フルサイズ表示のためのライトボックスモーダル付き画像ギャラリー。CSS Gridサムネイルレイアウト。スムーズなオープン/クローズアニメーション。キーボードナビゲーション（矢印キー、Escape）。画像の遅延ロード。モバイル向けタッチスワイプサポート。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--gallery-gap—gap between images
--hover-scale—scale ratio on hover
--overlay-opacity—overlay opacity
grid columns—responsive grid column count

実装コード Implementation Code 

// react/V-003.jsx
import "./V-003.css";

export default function ImageGallery({ images }) {
  return (
    <div className="gallery-grid">
      {images.map((image) => (
        <div key={image.id} className="gallery-item">
          <img src={image.url} alt={image.title} />
          <div className="gallery-overlay">
            <h4>{image.title}</h4>
          </div>
        </div>
      ))}
    </div>
  );
}
/* react/V-003.css */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gallery-item:hover img {
  transform: scale(1.05);
}
import "./V-003.css";

export default function ImageGallery({ images = [] }) {
  const defaultImages = [
    { id: 1, url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=400&q=60", title: "Image 1" },
    { id: 2, url: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=400&q=60", title: "Image 2" },
    { id: 3, url: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=400&q=60", title: "Image 3" },
    { id: 4, url: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?auto=format&fit=crop&w=400&q=60", title: "Image 4" }
  ];

  const displayImages = images.length > 0 ? images : defaultImages;

  return (
    <div className="gallery-grid">
      {displayImages.map((image) => (
        <div key={image.id} className="gallery-item">
          <img src={image.url} alt={image.title} loading="lazy" />
          <div className="gallery-overlay">
            <h4>{image.title}</h4>
          </div>
        </div>
      ))}
    </div>
  );
}
/* Gallery styles are now in global.css */

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Thumbnail images are displayed in a CSS Grid. Clicking a thumbnail opens a modal overlay with the full-size image centered. Arrow key handlers and prev/next buttons call loadImage(index ± 1). The modal uses the same accessible dialog pattern (focus trap, Escape to close, aria-modal). Images are preloaded on adjacent index hover.

サムネイル画像がCSS Gridに表示されます。サムネイルのクリックで中央にフルサイズ画像のあるモーダルオーバーレイが開きます。矢印キーハンドラーと前/次ボタンがloadImage(index ± 1)を呼び出し。モーダルは同じアクセシブルダイアログパターン（フォーカストラップ、Escapeで閉じる、aria-modal）を使用。隣接インデックスのホバーで画像をプリロード。

カスタマイズ方法Customization

Add a caption below the full-size image using an alt text or data-caption attribute. Implement a zoom-on-click within the lightbox for ultra-detailed inspection. Add a filmstrip row of thumbnails at the bottom of the lightbox for quick navigation.

alt textまたはdata-caption属性を使用してフルサイズ画像の下にキャプションを追加。超詳細な検査のためにライトボックス内のクリックでズームを実装。素早いナビゲーションのためにライトボックスの下部にサムネイルのフィルムストリップ行を追加。

注意点Caveats

Provide alt text on all thumbnail and full-size images. In the lightbox, announce the current image position (e.g., "Image 3 of 12") via aria-live. Return focus to the trigger thumbnail when the lightbox closes.

全てのサムネイルとフルサイズ画像にalt textを提供してください。ライトボックスでは現在の画像位置（例："12枚中3枚目"）をaria-liveでアナウンスしてください。ライトボックスが閉じるときにトリガーサムネイルにフォーカスを戻してください。

よくある質問 Frequently Asked Questions

How to customize the image gallery? Image Galleryをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the image gallery in React? ReactでImage Galleryを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of image gallery? Image Galleryのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.