CSSとJavaScriptで作るモーダル画像ギャラリーの実装方法をわかりやすく解説

CSSとJavaScriptだけを使えば、外部ライブラリに頼らずにシンプルで使いやすいモーダル画像ギャラリー（ライトボックス）を実装できます。サムネイル画像をクリックすると画面全体が半透明の黒で覆われ、中央に拡大画像が表示され、右上の「×」ボタンをクリックすると元の画面に戻る――Webサイトでよく見かけるあのUIです。

実装のポイント

サムネイル（.ImgThumbnail）：角丸・カーソルポインター・トランジションを設定し、「クリックできる」ことを視覚的に伝えます。
モーダル本体（.modal）：position: fixed で画面全体を覆い、rgba(0, 0, 0, 0.9) の半透明黒背景を敷きます。普段は display: none で非表示にしておきます。
閉じるボタン（.close）：右上に固定配置し、ホバー時に色が変わるようにして操作性を高めます。
JavaScript：各サムネイルにクリックイベントを登録し、クリックされた画像の src をモーダル内の img 要素に渡して表示します。
レスポンシブ対応：メディアクエリを使い、画面幅700px以下では拡大画像を全幅表示に切り替えます。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
h1 {
  text-align: center;
}
.ImgThumbnail {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  height: 250px;
  width: 250px;
}
.ImgThumbnail:nth-of-type(1) {
  margin-left: 20%;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}
.modalImage {
  margin: auto;
  display: block;
  width: 50%;
  max-width: 700px;
}
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: rgb(255, 0, 0);
  cursor: pointer;
}
@media only screen and (max-width: 700px) {
  .modalImage {
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>Image Modal Gallery Example</h1>

<img class="ImgThumbnail" src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">
<img class="ImgThumbnail" src="https://i.picsum.photos/id/237/536/354.jpg">
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500">

<!-- モーダル -->
<div class="modal">
  <span class="close">&times;</span>
  <img class="modalImage" id="img01">
</div>

<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");

Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
  item.addEventListener("click", event => {
    modalEle.style.display = "block";
    modalImage.src = event.target.src;
  });
});

document.querySelector(".close").addEventListener("click", () => {
  modalEle.style.display = "none";
});
</script>
</body>
</html>

コードの解説

1. サムネイルのスタイリング

.ImgThumbnail クラスで、画像に角丸（border-radius）とカーソル変更（cursor: pointer）、滑らかな変化をつける transition を指定しています。これにより、ユーザーは「この画像はクリックできる」と直感的に理解できます。

2. モーダルの構造とデザイン

.modal は position: fixed でビューポート全体に広がり、半透明の黒背景（rgba(0, 0, 0, 0.9)）が奥のコンテンツをぼんやりと透けさせます。z-index を設定することで、他の要素より手前に表示されます。中には閉じるボタン（× 記号）と拡大表示用の img 要素が入っています。

3. JavaScriptによる動作の仕組み

querySelectorAll(".ImgThumbnail") で取得したすべてのサムネイルに対して、forEach でクリックイベントを一括登録しています。画像がクリックされると、モーダルの display を block に切り替えて表示し、クリックされた画像の src をモーダル内の画像に代入することで拡大表示を実現しています。閉じるボタンのクリックで display を none に戻せば、モーダルは非表示になります。

出力結果

このコードをブラウザで開くと、3枚のサムネイル画像がページ上に表示されます。

いずれかの画像をクリックすると、画面全体が暗転し、クリックした画像が中央に大きく拡大表示されます。右上の赤く変化する「×」ボタンをクリックすると、モーダルが閉じて元の一覧画面に戻ります。画面幅が700px以下のスマートフォンなどでは、拡大画像が自動的に全幅表示になるため、小さな画面でも見やすいギャラリーになります。

CSSとJavaScriptでタブUIを実装する方法【初心者向け解説】

CSSとJavaScriptで作る！レスポンシブ対応モーダル画像の実装方法を解説

CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説
CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。アコーディオンの実装例以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini
CSSとJavaScriptを使ってレスポンシブ対応のスライドショーギャラリーを作成する方法
Webサイトに画像を魅力的に表示したいとき、レスポンシブ対応のスライドショーギャラリーは非常に効果的です。本記事では、CSSとJavaScriptだけを使って、前後移動ボタン・キャプション表示・サムネイルナビゲーションを備えたスライドショーギャラリーを作成する方法を詳しく解説します。外部ライブラリ不要なので、軽量かつ自由にカスタマイズできるのが大きな魅力です。実装例：完全なコード以下が、CSSとJavaScriptで作成するスライドショーギャラリーの完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta