CSSだけで画像クリック時に拡大表示する方法【JavaScript不要】

画像をクリックすると拡大表示し，画像の外側または「×」をクリックすると閉じるポップアップを，JavaScript・jQueryを使わず HTML と CSS だけで実装する．

このページでは，そのまま試せる完成サンプルと，コピペ用のHTML＋CSSを先に載せる．PCだけでなくスマホでも画像全体を確認しやすいようにしている．

完成サンプル

次の画像をクリックしてみてほしい．拡大後は，黒い背景の部分をクリックするか，右上の「×」をクリックすると閉じる．画像の上をクリックしても閉じない．

レイヤー表示

×

横浜赤レンガ倉庫のクリスマスツリー

×

コピペですぐ使える完成コード

画像のURLとalt属性を自分のものに替えれば動く．CSSはページ内に1回だけ置き，画像ごとに <form class="image-popup"> の部分を複製する．

<style>
.image-popup,
.image-popup * {
  box-sizing: border-box;
}
.image-popup {
  margin: 0;
  text-align: center;
}
.image-popup__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.image-popup__thumb {
  display: inline-block;
  max-width: 100%;
  cursor: zoom-in;
}
.image-popup__thumb img {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
}
.image-popup__toggle:focus + .image-popup__thumb {
  outline: 3px solid #0b57d0;
  outline-offset: 3px;
}
.image-popup__modal {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.image-popup__toggle:checked ~ .image-popup__modal {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.image-popup__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}
.image-popup__panel {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: min(calc(80% + 20px), 1200px);
  max-height: calc(100% - 24px);
  overflow: auto;
  padding: 4px 10px;
  background: #fff;
  border-radius: 5px;
}
.image-popup--portrait .image-popup__panel {
  max-width: min(calc(95% + 20px), 740px);
}
.image-popup__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 6px 8px 6px 12px;
  background: rgba(255, 255, 255, 0.96);
}
.image-popup__title {
  font-size: 15px;
}
.image-popup__close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font: bold 32px/1 sans-serif;
  cursor: pointer;
}
.image-popup__large {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
}
</style>

<form class="image-popup">
  <input class="image-popup__toggle" type="checkbox" id="image-popup-toggle-1" aria-controls="image-popup-dialog-1" aria-haspopup="dialog" aria-label="画像を拡大表示" />
  <label class="image-popup__thumb" for="image-popup-toggle-1">
    <img src="small.jpg" alt="拡大する画像の説明" width="320" height="150" />
  </label>
  <div class="image-popup__modal">
    <label class="image-popup__backdrop" for="image-popup-toggle-1" aria-label="拡大画像を閉じる"></label>
    <div class="image-popup__panel" id="image-popup-dialog-1" role="dialog" aria-labelledby="image-popup-title-1">
      <div class="image-popup__bar">
        <div class="image-popup__title" id="image-popup-title-1">画像のタイトル</div>
        <button class="image-popup__close" type="reset" aria-label="拡大画像を閉じる">&times;</button>
      </div>
      <img class="image-popup__large" src="large.jpg" alt="拡大する画像の説明" width="1600" height="752" />
    </div>
  </div>
</form>

背景をクリックすると閉じる仕組み

input type="checkbox" がチェックされた時だけ，兄弟要素の .image-popup__modal を表示する．チェックボックス自体は画面から見えないが，display: none にはしていないため，キーボードでもフォーカスして操作できる．

背景はチェックボックスに結び付けた <label> で，クリックするとチェックが外れてモーダルが閉じる．「×」は同じ <form> の type="reset" ボタンで，キーボード操作でも閉じられる．背景と内容枠は兄弟要素で，内容枠は背景より前面にある．そのため画像やタイトルをクリックしても閉じない．

スマホで表示するときの注意点

スマホでは画像が画面より大きくなりやすいので，モーダルの高さを画面内に収め，画像には 100vh と 100dvh による上限を付けている．100dvh はブラウザのアドレスバーを考慮した画面高で，対応していないブラウザでは直前の 100vh が使われる．

上部の操作バーはスクロールしても残るため，縦長の画像でも閉じるボタンを押せる．元の記事のようにスマホでポップアップを非表示にする指定は入れていない．

複数画像をポップアップにする方法

CSSは1回だけ書き，<form class="image-popup"> の部分を画像ごとに追加する．次の3つのIDは，画像ごとに重複しない名前へ替える．

• image-popup-toggle-1
• image-popup-dialog-1
• image-popup-title-1

例えば2枚目では末尾を -2 にする．CSSセレクタはIDに依存していないので，IDを増やしてもCSSの追加は必要ない．

CSSだけで画像を拡大表示する方法FAQ