【JS&CSS】画像をクリックしたら拡大表示する方法(モーダルウィンドウ)

【アイキャッチ画像】JavaScriptとCSSを使って、モーダルウィンドウを利用した画像拡大を実装する方法

画像をクリック または タップすると、画面中央に原寸大の画像をフワッと表示する方法を紹介します。(右のレインボーの画像をクリック または タップしてみてください。)

画像を原寸大* で画面中央に表示するコードです。
オリジナルの画像自体が小さい場合は、拡大されません。

※表示画面より大きいサイズの場合、適正サイズまで縮小

クリック or タップで拡大します。
もう一度クリック or タップで閉じます。

目次

HTML / CSS / JavaScript コード

<img src="xxx.jpg" class="clickable-image">

src 属性には、拡大表示したい画像ファイルのURLを指定してください。

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s;
}

.modal img {
  max-width: 90%;  /* 画像の最大幅を親要素(modal)の90%に制限し、画面内に収まるようにする */
  max-height: 100vh;  /* 画像の最大高さをビューポートの高さ(100vh)に制限し、画面内に収まるようにする  */
  object-fit: contain;  /* 画像の比率を保持しつつ、指定された高さと幅に収める */
}

.clickable-image:hover {
  cursor: zoom-in;  /* ホバー時にカーソルをズームインのアイコンに変更 */
}

.modal img:hover {
  cursor: zoom-out;  /* モーダル内の画像にホバー時にカーソルをズームアウトのアイコンに変更 */
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
// 画像をクリックしたときに画面中央にモーダルウィンドウを表示し、オリジナルの画像サイズで表示

// 画像をクリックしたときのイベント
document.querySelectorAll('.clickable-image').forEach(image => {
    image.addEventListener('click', function() {
      openModal(this.src);
  });
});

function openModal(src) {
  // モーダル要素を作成
  const modal = document.createElement('div');
  modal.innerHTML = `<img src="${src}">`;
  modal.classList.add('modal');

  // モーダルの表示
  document.body.appendChild(modal);
  modal.style.display = 'flex';

  // モーダルのクリックイベント(モーダルを閉じる)
  modal.addEventListener('click', () => {
    closeModal(modal);
  });
}

function closeModal(modal) {
  // フェードアウトアニメーションを適用
  modal.style.animation = 'modalFadeOut 0.3s forwards';

  // アニメーションが終了したらモーダルを削除
  modal.addEventListener('animationend', () => {
    modal.style.display = 'none';
    document.body.removeChild(modal);
  });
}

実装のポイント

モーダルウィンドウについて

インタラクティブなポップアップ画面で、ユーザーが特定の操作を完了するまでメインのコンテンツを使用できなくするUI要素として実装されます。通常、情報の表示、データ入力、またはユーザーの確認を求めるために使用されます。今回の実装では、「情報(画像)の表示」を目的として利用しています。

画像表示以外にも、「お知らせ」や「アラート」など特定のメッセージを表示するためにも使われます。実装方法など詳細は以下記事で紹介しています。

フワッと表示させるkeyframesについて

画像をクリックしたときのアニメーション(少し時間をかけてフワッと表示)には、CSSプロパティの@keyframesを使っています。
以下のように記述することで、特定の要素に多様なアニメーションがつけられます。

div {
  animation: 1s xxx;
}

@keyframes xxx {   /* xxxは好きな名前でOK */
  0% {
    /* 変化前の状態 */
  }
  50% {
    /* 変化中の状態。%の値は自由に決められ、複数用意してもOK。 */
  }
  100% {
    /* 変化後の状態 */
  }
}

上の例のように、@keyframeで変化の内容を記述し、変化をつけたいスタイルにアニメーション名と変化時間を記載します。これでdiv要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。

シンプルなアニメーションについてはこちら

マウスホバーやボタンクリック(タップ)に反応するような、シンプルなアニメーションには「transform」や「transition」を使います。以下のような実装に向いています。

その他の目を惹くアニメーション

当サイトでは、関連するアニメーションとして以下のような実装方法も紹介しています。


当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次