Lightboxの効果をCSSだけで実装する方法

Lightboxの効果をCSSだけで実装する方法 HTML/CSS

こんにちは、mickです。

前回、Lightboxの効果をプラグイン「Responsive Lightbox & Gallery」で使えるようにしました。

これ、CSSだけで実装できないだろうかとネットを調べてみたらあったので紹介していきます。

LightboxをCSSで実装する方法

CSSでなんちゃってLightboxを実装していきます。

Lightboxを実装しようとすると、JQueryを使ったJavaScriptで実装するのが一般的。
プログラミングの知識不要がいい場合、WordPressならプラグインを使えばOK。

やり方はコチラのWebページを参考にさせてもらいました。

⇒ UNICO LABO「Lightbox ぽいモーダルウィンドウをCSSだけで」

Lightboxのデモ

CSSを使ったLightboxのデモはこちら。
画像をクリックすると確認ができます。
戻ってくるときは、画面のどこかを押せばOK。

HTMLのコーディング

<div id="sample">
  <a href="#figure"><img src="//picsum.photos/id/237/200" alt=""></a>
  <figure id="figure">
    <a id="overlay" href="#overlay">
      <img src="//picsum.photos/id/237/600" alt="">
      <figcaption>どこかをクリックすると画面をを閉じます</figcaption>
    </a>
  </figure>
</div>

小さな画像をクリックすると、アンカーリンクのターゲットが #figure に移動して大きな画像を表示します。
大きな画像がでているときに、画面をクリックするともう一度アンカーリンクのターゲットが #overlay に移動して、大きな画像が消えて元に戻ります。

CSSのコーディング

#sample figure{
  margin: 0;     /* マージンの初期化 */
  display: none; /* 最初に画像を隠しておく */
}
#sample figure:target{
  display: block;  /* 画像を表示する */
  position: fixed; /* スクロールしても画像を動かさない */
  top: 0;          /* 画面全体に対して画像を中央に設置する */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;    /* 画像を一番前に表示する */
}
#sample figure:target #overlay{
  position: absolute;        /* 画像が重なるように */
  top: 0;                    /* 4つを0にして画面全体に広げる */
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;     /* フレックスアイテムの並びを縦にする */
  justify-content: center;    /* 左右中央に設置 */
  align-items: center;        /* 上下中央に設置 */
  background: rgba(255, 255, 255, 0.7); /* 画像を見やすくするため透過の黒背景 */
  text-decoration: none;      /* リンクなので文字に下線など装飾が付かないようにする */
  color: #fff;
}
#sample figure:target img{
  animation: fadein .3s;   /* 0.3秒かけたフェードイン効果 */
}
@keyframes fadein{         /* フェードイン効果の中身 */
  0%{
    transform: scale(0.2);
    opacity: 0.2;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}

大きくした画像を最初に display:none にしておく。
リンクをクリックしたらターゲット状態になる(:target)ので、 figure:target の内容が適用。
これで、画面に大きな画像が表示されるようになります。

大きな画像を表示するようになったときは、display: block;position: fixed; で画面をスクロールしても画像は動かないようにします。
まえにやった、CSSでパララックスを実装したのと同じテクニックですね。

大きな画像を見やすくするため、absolute, flextop:0;right:0;left:0;bottom:0; で画面全体に透過背景を設置してます。
flex-direction: column; justify-content: center; align-items: center; を使って、大きな画像が中央に来るようにしてます。

img要素には、それっぽくなるように animetion でフェードインの効果を付けてます。

:target擬似クラスを使ったこのやり方。すごい。

まとめ。

Lightboxの効果をCSSだけで実装する方法を紹介しました。
JavaScriptを使わないので、軽量で便利。

使うたびにIDを使ったアンカーリンクを使うので、同じページでたくさん使うには不便。
例えばWordPressなら固定ページといった決まったレイアウトに使うのがいいですね。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/01/14

タイトルとURLをコピーしました