HTML/CSS/JSでLightBox風のアプリその3（ラスト）

デザインプログラミング

2026-05-07

HTML/CSS/JSでLightBox風のアプリその3（ラスト）

大体出来たな・・・。コードが結構長くなってしまった。試すのはこれでラストかな。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Original LightBox</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css">
    <style>
      body {
        padding: 10px;
        transition: all 1.2s;
      }

      body.active {
        background-color: rgba(0, 0, 0, 0.8);
      }

      .popup_html {
        width: 1000px;
        height: 600px;
        position: absolute;
        top: 100px;
        left: 400px;
        background-color: #ccc;
        transform: scale(0);
        transform-origin: center;
        opacity: 0;
        z-index: 9998;
      }

      .popup_html.active {
        animation: popup 3s ease;
        transform: scale(1);
        opacity: 1;
      }

      .popup_html_overlay {
        width: 1000px;
        height: 600px;
        position: absolute;
        top: 100px;
        left: 400px;
        background-color: #ccc;
        transform: scale(0);
        transform-origin: center;
        opacity: 1;
        z-index: 9999;
      }

      .popup_html_overlay.active {
        animation: popup_overlay 3s ease;
        transform: scale(0);
        opacity: 0;
      }

      @keyframes popup {
        0% {
          transform: scale(0, 0);
          opacity: 0;
        }

        30% {
          transform: scale(0.1, 0);
          opacity: 1;
        }

        60% {
          transform: scale(0.1, 1);
          opacity: 1;
        }

        100% {
          transform: scale(1, 1);
          opacity: 1;
        }
      }

      @keyframes popup_overlay {
        0% {
          transform: scale(0, 0);
          opacity: 1;
        }

        30% {
          transform: scale(0.1, 0);
          opacity: 1;
        }

        60% {
          transform: scale(0.1, 1);
          opacity: 1;
        }

        100% {
          transform: scale(1, 1);
          opacity: 0;
        }
      }

      .popup_html img {
        width: 100%;
        height: 90%;
        opacity: 0;
        transition: all 6s;
      }

      .popup_html img.active {
        opacity: 1;  
      }

      .image-text {
        padding: 10px;
      }
    </style>
    <script>
      function lightbox_window() {
        let popup_html = document.querySelector('div.popup_html');
        let body = document.querySelector('body');
        let img = document.querySelector('div.popup_html img');
        let popup_html_overlay = document.querySelector('div.popup_html_overlay');
        popup_html.classList.toggle('active');
        body.classList.toggle('active');
        img.classList.toggle('active');
        popup_html_overlay.classList.toggle('active');
      }
    </script>
  </head>
  <body>
    <a href="#monsan" onclick="lightbox_window();">monsan.jpg</a>
    <div class="popup_html">
      <img src="./images/monsan.jpg" />
      <div class="image-text">
        <p>monsan.jpg</p>
      </div>
    </div>
    <div class="popup_html_overlay">
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Original LightBox</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css">
    <style>
      body {
        padding: 10px;
        transition: all 1.2s;
      }

      body.active {
        background-color: rgba(0, 0, 0, 0.8);
      }

      .popup_html {
        width: 1000px;
        height: 600px;
        position: absolute;
        top: 100px;
        left: 400px;
        background-color: #ccc;
        transform: scale(0);
        transform-origin: center;
        opacity: 0;
        z-index: 9998;
      }

      .popup_html.active {
        animation: popup 3s ease;
        transform: scale(1);
        opacity: 1;
      }

      .popup_html_overlay {
        width: 1000px;
        height: 600px;
        position: absolute;
        top: 100px;
        left: 400px;
        background-color: #ccc;
        transform: scale(0);
        transform-origin: center;
        opacity: 1;
        z-index: 9999;
      }

      .popup_html_overlay.active {
        animation: popup_overlay 3s ease;
        transform: scale(0);
        opacity: 0;
      }

      @keyframes popup {
        0% {
          transform: scale(0, 0);
          opacity: 0;
        }

        30% {
          transform: scale(0.1, 0);
          opacity: 1;
        }

        60% {
          transform: scale(0.1, 1);
          opacity: 1;
        }

        100% {
          transform: scale(1, 1);
          opacity: 1;
        }
      }

      @keyframes popup_overlay {
        0% {
          transform: scale(0, 0);
          opacity: 1;
        }

        30% {
          transform: scale(0.1, 0);
          opacity: 1;
        }

        60% {
          transform: scale(0.1, 1);
          opacity: 1;
        }

        100% {
          transform: scale(1, 1);
          opacity: 0;
        }
      }

      .popup_html img {
        width: 100%;
        height: 90%;
        opacity: 0;
        transition: all 6s;
      }

      .popup_html img.active {
        opacity: 1;  
      }

      .image-text {
        padding: 10px;
      }
    </style>
    <script>
      function lightbox_window() {
        let popup_html = document.querySelector('div.popup_html');
        let body = document.querySelector('body');
        let img = document.querySelector('div.popup_html img');
        let popup_html_overlay = document.querySelector('div.popup_html_overlay');
        popup_html.classList.toggle('active');
        body.classList.toggle('active');
        img.classList.toggle('active');
        popup_html_overlay.classList.toggle('active');
      }
    </script>
  </head>
  <body>
    <a href="#monsan" onclick="lightbox_window();">monsan.jpg</a>
    <div class="popup_html">
      <img src="./images/monsan.jpg" />
      <div class="image-text">
        <p>monsan.jpg</p>
      </div>
    </div>
    <div class="popup_html_overlay">
    </div>
  </body>
</html>