MENU
AI活用法 ✕ WEB制作 ✕ マーケティング
  1. ホーム
  2. プログラミング
  3. 画像ギャラリーのUIを実装しよう！モーダル付き拡大表示をコピペで作れる完全ガイド【HTML/CSS/JS】

画像ギャラリーのUIを実装しよう！モーダル付き拡大表示をコピペで作れる完全ガイド【HTML/CSS/JS】

プログラミング

「画像をきれいに並べたい」
「クリックで拡大できるギャラリーを自分でも作ってみたい」
そんなふうに感じたことはありませんか？

とくにポートフォリオや商品紹介のページでは、
視覚的に魅せるギャラリーがあるかどうかで第一印象が大きく変わります。

でも、画像をグリッドで並べて、拡大表示するUIを作るのって、
「JavaScriptが難しそう」「ライブラリを使わないと無理じゃない？」と思いがちですよね。

そんな方に向けて、この記事では
HTML＋CSS＋JavaScriptだけで作れる画像ギャラリーUIの作り方をやさしく解説しています。

しかも、コピペでOKのテンプレート付き！

目次

完成イメージ

以下のようなギャラリーが実現できます。

  • 複数の画像を整列表示（グリッド形式）
  • クリックで拡大モーダルを表示
  • 背景を暗くし、画像を中央に大きく表示
  • スマホでも使いやすいレスポンシブ対応

ファイル構成（実用的な分離型）

gallery-lightbox/
├─ index.html       ← HTML本体（画像一覧＋モーダル）
├─ css/
│   └─ style.css    ← 見た目のレイアウト・モーダルの装飾
└─ js/
    └─ script.js    ← モーダル表示・非表示の制御処理

このあとは、STEP1としてHTMLで画像一覧とモーダル構造を作成していきます。

STEP1｜HTML構造を作ろう

まずは、画像ギャラリーの基礎となる HTML を書いていきます。
このSTEPでは、画像をグリッド状に並べて表示し、クリックした画像を拡大表示するためのモーダル構造も準備していきます。

🧩 今回作るHTMLの構成はこんな感じです：

  • 複数の画像を並べる .gallery セクション
  • 拡大表示用の .modal（画像モーダル）の仕込み

✅ index.html のコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>画像ギャラリー</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>

  <!-- ギャラリー画像一覧 -->
  <section class="gallery">
    <img src="img/photo1.jpg" alt="写真1" class="thumb" />
    <img src="img/photo2.jpg" alt="写真2" class="thumb" />
    <img src="img/photo3.jpg" alt="写真3" class="thumb" />
    <img src="img/photo4.jpg" alt="写真4" class="thumb" />
  </section>

  <!-- モーダル（拡大表示） -->
  <div class="modal" id="modal">
    <span class="close" id="closeBtn">&times;</span>
    <img class="modal-content" id="modalImg" alt="拡大画像" />
  </div>

  <script src="js/script.js"></script>
</body>
</html>

🔍 解説ポイント

画像を並べて表示するには、まず .gallery セクションに複数の <img> タグを入れておきます。
この <img> タグはサムネイル画像として並び、クリックすると .modal という別領域で拡大表示される仕組みです。

拡大表示のための .modal は最初は非表示になっていて、クリックされたときだけ表示されるように後からJavaScriptで制御します。

また、モーダル内には #modalImg という拡大表示用の <img> を設置し、そこにクリックされた画像の src を流し込む形になります。
#closeBtn でモーダルを閉じられるように、×ボタンも用意しています。

✅ 要点まとめ

  • .gallery：画像一覧のグリッド表示用ラッパー
  • .thumb：クリック可能なサムネイル画像に付けるクラス
  • .modal：画面上に重ねて表示する拡大ビューの領域
  • .modal-content：拡大表示する画像本体
  • .close：モーダルを閉じるための×ボタン

このように、HTMLだけでも拡大ギャラリーの土台はシンプルに作れます。

次のSTEPで、CSSを使って「グリッド配置」や「モーダルの見た目」を整えていきましょう！

STEP2｜CSSで見た目を整えよう

HTMLで構造ができたら、次は見た目を整えていきましょう。

このSTEPでは、以下のようなスタイルを CSS に適用していきます。

  • ギャラリーをグリッド形式にレイアウト
  • モーダルを画面中央に大きく表示
  • 背景を暗くして、画像を引き立てる
  • スマホでも快適に見えるようレスポンシブ対応

CSSは css/style.css に記述します。

✅ style.css のコード

/* 共通スタイル */
body {
  font-family: sans-serif;
  background: #f4f4f4;
  margin: 0;
  padding: 2rem;
  text-align: center;
}

/* ギャラリー画像のスタイル */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.gallery img.thumb {
  width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery img.thumb:hover {
  transform: scale(1.05);
}

/* モーダル（拡大画像）のスタイル */
.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

/* 拡大画像 */
.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin-top: 5%;
  border-radius: 6px;
}

/* 閉じるボタン */
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

🔍 解説ポイント

  • .gallery には CSSグリッド を使って画像を自動で並べています。
  • .thumb:hover に transform: scale() を指定することで、ホバー時にふわっと拡大する効果をつけています。
  • .modal は画面いっぱいに広がる オーバーレイ背景。クリック時に表示される仕組みは JavaScript で制御します。
  • .modal-content で拡大画像を中央に大きく表示し、max-width／max-height で画面からはみ出さないようにします。
  • .close は画面右上に配置された「×」ボタン。ユーザーが明確に閉じる操作ができるよう配慮しています。

このスタイルを適用することで、使いやすく・美しく・視覚的に心地よいギャラリーが完成します。

次のSTEPでは、JavaScriptで「クリックされた画像をモーダルに表示 → 閉じる動作」を実装していきましょう！

STEP3｜JavaScriptで拡大・閉じる動きを実装しよう

HTMLとCSSで見た目の準備ができたら、次はクリックで画像を拡大表示する動きを JavaScript で実装していきます。

このSTEPでは、以下の動作をつけていきます。

  • サムネイルをクリックすると、その画像がモーダルで拡大表示される
  • モーダルの「×」ボタンを押すと閉じる
  • モーダル外（背景）をクリックしても閉じる

この先の実装こそが本番です！

記事の後半では、画像をクリックしたときにモーダルで拡大表示する仕組みをJavaScriptで実装していきます。

さらに、モバイルにも対応したスタイルや、UXを高める閉じる動作の実装など、実案件で使える品質のコードに仕上げていきます！

記事の続きはこちら（¥100〜）

この記事でできるようになること

  • ライブラリ不要で画像ギャラリーが作れるようになる
  • HTML・CSS・JavaScriptの連携が理解できる
  • 拡大表示・閉じる処理などのUI実装ができる
  • コードの再利用性が高く、案件でもそのまま活用できる！
記事の続きはこちら（¥100〜）

このスキルは「実務」に直結します！

「ギャラリーをもっと見やすくして」「スマホでもきれいに見せたい」
そんな依頼は、Web制作の現場でよくあります。

このUIをマスターしておくと、
ポートフォリオ・ECサイト・商品一覧ページなど、幅広いジャンルの制作に対応できます。

また、コードを構造的に理解することができれば、
デザイン変更や機能拡張も自信を持って対応できるようになります！

ChatGPTのプロンプト付きで効率化もバッチリ！

記事の最後には、
ChatGPTにこのUIを一瞬で書かせるための「プロンプト集」も掲載しています。

「コードは覚えられないけど、生成はできる！」という方でも、
効率よく学びながら、自分のスキルとして定着させられる構成です。

記事の続きはこちら（¥100〜）

次回予告

次回の記事では、CSVを使った「メール配信スタンド」を作成予定です！

PHPでフォームを作り、CSVをインポートして一括送信する機能など、
実案件でそのまま活用できる「データ活用＋送信処理」の基礎を身につけられる内容になります。

定期購読のご案内（noteメンバーシップ）

noteメンバーシップでは、以下のような特典をご用意しています！

  • コードの添削サポート（HTML／CSS／JavaScript／PHP）
  • 月1回のZoom相談
  • 実務にも使えるテンプレートの先行配布
  • ChatGPT活用ノウハウ・プロンプト共有

「ひとりで学ぶのが不安…」
「もっと実務で使えるコードがほしい」
そんな方は、ぜひメンバー登録をご検討ください！

👉 あなたの「できた！」を、これからも一緒にサポートします。

プログラミング
CSS HTML JavaScript コーディング プログラミング
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

じゅんじゅんのアバター じゅんじゅん

愛知県を拠点に、AIを活用した業務改善支援、WEB制作、マーケティング戦略サポートを行っています。

営業、マーケティング、WEB開発など多分野で20年以上実務経験を積み、現場視点を持った提案と問題解決を強みとしています。

「誰でも気軽にAIを活用できる世界をつくる」をモットーに、中小企業や個人事業主向けに、成果につながる実践的なノウハウを提供。
ブログやYouTubeを通じて、わかりやすく実用的な情報発信にも力を入れています。

AI活用・業務効率化・マーケティング（集客）でお困りの際は、ぜひご相談ください。

関連記事

目次