JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

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

Webサイトやブログに画像を掲載する際、小さなサムネイル画像をクリックすると拡大画像が画面中央に表示される「モーダル画像（ライトボックス）」は、ユーザー体験を大きく向上させる定番のUIパターンです。この記事では、外部ライブラリに頼らず、CSSとJavaScriptだけでレスポンシブ対応のモーダル画像を実装する方法を詳しく解説します。

モーダル画像の仕組み

今回作成するモーダル画像は、次の3つの要素で構成されています。

  • サムネイル画像（ImgThumbnail）：クリックの起点となる表示用の小さな画像
  • モーダル領域（modal）：画面全体を覆う半透明の黒いオーバーレイ
  • 閉じるボタン（close）：右上に配置された「×」ボタン

サムネイルがクリックされるとJavaScriptがモーダルを表示し、クリックされた画像のsrc属性を拡大表示用のimgタグへコピーします。閉じるボタンを押せばモーダルが非表示になり、元のページに戻るというシンプルな仕組みです。

完全なコード例

HTML・CSS・JavaScriptをすべて含んだサンプルコードは以下の通りです。そのままコピーしてブラウザで開けば、すぐに動作を確認できます。

<!DOCTYPE html>
<html lang="jp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
h1 {
  text-align: center;
}
.ImgThumbnail {
  margin-left: 38%;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  height: 250px;
  width: 250px;
}
.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%;
  height: 60%;
  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 Example</h1>
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
  alt="Snow" style="width:100%;max-width:300px">
<div class="modal">
<span class="close">&times;</span>
<img class="modalImage" id="img01">
<div id="caption">Image 1</div>
</div>
<script>
var modalEle = document.querySelector('.modal');
var modalImage = document.querySelector('.modalImage');

document.querySelector('.ImgThumbnail').addEventListener('click', (event) => {
  modalEle.style.display = 'block';
  modalImage.src = event.target.src;
});

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

CSSのポイント解説

1. モーダルの基本スタイル（.modal）

position: fixed で画面全体に固定し、width と height を100%にすることで全画面のオーバーレイを作ります。背景色には rgba(0,0,0,0.9) のような半透明の黒を指定し、背後のページがうっすら透けて見える演出にするのがポイントです。また、z-index を設定することで他の要素よりも前面に表示されます。

2. 拡大画像とキャプション（.modalImage / #caption）

margin: auto と display: block を組み合わせることで、拡大画像とキャプションをモーダル内の上下中央に配置できます。max-width を指定しているため、大きな画面でも画像が必要以上に巨大化することはありません。

3. レスポンシブ対応（メディアクエリ）

@media only screen and (max-width: 700px) のメディアクエリにより、画面幅が700px以下のモバイル端末ではモーダル画像の幅を100%に切り替えます。これにより、スマートフォンでも画像が画面に収まり、快適に閲覧できるレスポンシブな挙動を実現しています。

4. 閉じるボタン（.close）

position: absolute で画面右上に配置し、hover や focus の際に色が変化するよう transition を設定しています。これにより、ユーザーに対して視覚的なフィードバックを与えられます。

JavaScriptのポイント解説

JavaScriptの処理は非常にシンプルで、主に次の2つです。

  • 表示処理：サムネイルの click イベント内で display プロパティに 'block' を設定してモーダルを開きます。同時に event.target.src でクリックされた画像のURLを取得し、モーダル内の img 要素の src に代入することで、同じ画像を拡大表示できます。
  • 非表示処理：閉じるボタンの click イベントで display プロパティに 'none' を設定し、モーダルを閉じます。

動作結果

上記のコードをブラウザで開くと、まず250px四方の丸みを帯びたサムネイル画像がページ中央付近に表示されます。

この画像をクリックすると、画面全体が暗転し、中央に拡大画像とキャプションが表示されたモーダルが開きます。右上の「×」ボタンにマウスを乗せると色が変わり、クリックするとモーダルが閉じて元のページに戻ります。画面幅を700px以下に狭くすると、拡大画像が自動的に横幅いっぱいに広がり、モバイルフレンドリーな表示に切り替わることも確認できます。

まとめ

CSSとJavaScriptだけで数十行のコードにより、レスポンシブ対応のモーダル画像を実装できることを紹介しました。Lightbox系のライブラリを使わず自前で実装することで、余計な依存関係を増やすことなく、デザインも自由にカスタマイズできます。複数画像への対応やフェードインアニメーションの追加、モーダル背景クリックでの閉じる動作など、ぜひ自分のプロジェクトに合わせて応用してみてください。

  1. CSSとJavaScriptを使ってレスポンシブ対応のスライドショーギャラリーを作成する方法

    Webサイトに画像を魅力的に表示したいとき、レスポンシブ対応のスライドショーギャラリーは非常に効果的です。本記事では、CSSとJavaScriptだけを使って、前後移動ボタン・キャプション表示・サムネイルナビゲーションを備えたスライドショーギャラリーを作成する方法を詳しく解説します。外部ライブラリ不要なので、軽量かつ自由にカスタマイズできるのが大きな魅力です。 実装例：完全なコード 以下が、CSSとJavaScriptで作成するスライドショーギャラリーの完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta

  2. CSSとJavaScriptで作る！レスポンシブスライドショーの実装方法を徹底解説

    CSSとJavaScriptを組み合わせることで、画像を切り替えて表示できるレスポンシブなスライドショーを簡単に実装できます。本記事では、「前へ・次へ」のナビゲーションボタンとドットインジケーター付きのスライドショーを、実際のコード例とともにわかりやすく解説します。 実装例：完全なコード 以下は、CSSとJavaScriptを使用してレスポンシブスライドショーを作成するサンプルコードです。そのままHTMLファイルに保存すれば、すぐに動作を確認できます。 <!DOCTYPE html> <html> <head> <meta name="v