クリック（タップ）で拡大表示機能

2021・05・06

＊クリック（タップ）でコンテンツが拡大表示される機能です＊

「クリック（タップ）で拡大」というエリアをクリック（スマホ等の場合はタップ）すると、そのコンテンツが拡大表示されます。もう一度クリック（タップ）すると元の表示に戻ります。いきなりパッと切り替わってしまうと違和感が出るため、フワッと表示されるようにCSSで調整しています。
使用機能：CSS・JavaScript（jQuery非使用）

クリック（タップ）で拡大

クリック（タップ）で元に戻る

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <style>
    html {
      font-family:"游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
    }
    .samplemotogazoubox {
      background-color: rgb(215, 215, 215);
      width:70vw;
      height:60vh;
      margin: 0 auto;
      overflow-y:scroll;
      scroll-behavior: smooth;
    }
    .samplemotogazouarea {
      height:1600px;
    }
    .samplemotogazou {
      display: flex;
      justify-content: center;
      align-items: center;
      width:150px;
      height:100px;
      margin: 20px auto;
      padding: 10px;
      position: relative;
      cursor: pointer;
    }
    .samplemotogazou1 {
      background-color: pink;
    }
    .samplemotogazou2 {
      background-color: lightblue;
    }
    .samplemotogazou3 {
      background-color: lightyellow;
    }
    .samplemotogazou4 {
      background-color: yellowgreen;
    }
    .samplemotogazou5 {
      background-color: rgb(215, 255, 212);
    }
    .samplemotogazou6 {
      background-color: rgb(255, 192, 157);
    }
    .samplekakudaigazouarea_hide {
      opacity: 0;
      visibility: hidden;
      transition: all .6s;
    }
    .samplekakudaigazouarea_open {
      opacity: 1;
      visibility: visible;
      transition: all .6s;
    }
    .samplekakudaigazoubox {
      position: fixed;
      z-index: 8;
      top: 0;
      left: 0;
      width:100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.44);
    }
    .samplekakudaigazou {
      cursor: pointer;
      width:80vw;
      height: 60vh;
      opacity: 1;
      position: fixed;
      z-index: 10;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .samplekakudaigazou::after {
      font-size: 2rem;
      content:'×';
      position: absolute;
      right: 15px;
      top:5px;
    }
    .samplekakudaigazou1 {
      background-color: pink;
    }
    .samplekakudaigazou2 {
      background-color: lightblue;
    }
    .samplekakudaigazou3 {
      background-color: lightyellow;
    }
    .samplekakudaigazou4 {
      background-color: yellowgreen;
    }
    .samplekakudaigazou5 {
      background-color: rgb(215, 255, 212);
    }
    .samplekakudaigazou6 {
      background-color: rgb(255, 192, 157);
    }
    </style>
  </head>
  <body>
      <div class="samplemotogazoubox">
        <div id="samplemotogazou1" class="samplemotogazou samplemotogazou1">
          <p>クリック（タップ）で拡大</p>
        </div>
        <hr>
        <div id="samplemotogazou2" class="samplemotogazou samplemotogazou2">
          <p>クリック（タップ）で拡大</p>
        </div>
        <hr>
        <div id="samplemotogazou3" class="samplemotogazou samplemotogazou3">
          <p>クリック（タップ）で拡大</p>
        </div>
        <hr>
        <div id="samplemotogazou4" class="samplemotogazou samplemotogazou4">
          <p>クリック（タップ）で拡大</p>
        </div>
        <hr>
        <div id="samplemotogazou5" class="samplemotogazou samplemotogazou5">
          <p>クリック（タップ）で拡大</p>
        </div>
        <hr>
        <div id="samplemotogazou6" class="samplemotogazou samplemotogazou6">
          <p>クリック（タップ）で拡大</p>
        </div>
      </div>
    <div id="samplekakudaigazouarea1" class="samplekakudaigazouarea samplekakudaigazouarea_hide">
      <div class="samplekakudaigazoubox">
        <div id="samplekakudaigazou1" class="samplekakudaigazou samplekakudaigazou1">
          <p>クリック（タップ）で元に戻る</p>
        </div>
      </div>
    </div>
    <div id="samplekakudaigazouarea2" class="samplekakudaigazouarea samplekakudaigazouarea_hide">
      <div class="samplekakudaigazoubox">
        <div id="samplekakudaigazou2" class="samplekakudaigazou samplekakudaigazou2">
          <p>クリック（タップ）で元に戻る</p>
        </div>
      </div>
    </div>
    <div id="samplekakudaigazouarea3" class="samplekakudaigazouarea samplekakudaigazouarea_hide">
      <div class="samplekakudaigazoubox">
        <div id="samplekakudaigazou3" class="samplekakudaigazou samplekakudaigazou3">
          <p>クリック（タップ）で元に戻る</p>
        </div>
      </div>
    </div>
    <div id="samplekakudaigazouarea4" class="samplekakudaigazouarea samplekakudaigazouarea_hide">
      <div class="samplekakudaigazoubox">
        <div id="samplekakudaigazou4" class="samplekakudaigazou samplekakudaigazou4">
          <p>クリック（タップ）で元に戻る</p>
        </div>
      </div>
    </div>
    <div id="samplekakudaigazouarea5" class="samplekakudaigazouarea samplekakudaigazouarea_hide">
      <div class="samplekakudaigazoubox">
        <div id="samplekakudaigazou5" class="samplekakudaigazou samplekakudaigazou5">
          <p>クリック（タップ）で元に戻る</p>
        </div>
      </div>
    </div>
    <div id="samplekakudaigazouarea6" class="samplekakudaigazouarea samplekakudaigazouarea_hide">
      <div class="samplekakudaigazoubox">
        <div id="samplekakudaigazou6" class="samplekakudaigazou samplekakudaigazou6">
          <p>クリック（タップ）で元に戻る</p>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      {
        const kakudaisample1 = document.getElementById('samplemotogazou1');
        const kakudaigazouarea1 = document.getElementById('samplekakudaigazouarea1');
        const kakudaisamplegazou1 = document.getElementById('samplekakudaigazou1');
        kakudaisample1.addEventListener('click',function(evevt) {
          kakudaigazouarea1.classList.remove('samplekakudaigazouarea_hide');
          kakudaigazouarea1.classList.add('samplekakudaigazouarea_open');
        });
        samplekakudaigazou1.addEventListener('click',function() {
          kakudaigazouarea1.classList.add('samplekakudaigazouarea_hide');
          kakudaigazouarea1.classList.remove('samplekakudaigazouarea_open');
        })
      }
      {
        const kakudaisample2 = document.getElementById('samplemotogazou2');
        const kakudaigazouarea2 = document.getElementById('samplekakudaigazouarea2');
        const kakudaisamplegazou2 = document.getElementById('samplekakudaigazou2');
        kakudaisample2.addEventListener('click',function(evevt) {
          kakudaigazouarea2.classList.remove('samplekakudaigazouarea_hide');
          kakudaigazouarea2.classList.add('samplekakudaigazouarea_open');
        });
        samplekakudaigazou2.addEventListener('click',function() {
          kakudaigazouarea2.classList.add('samplekakudaigazouarea_hide');
          kakudaigazouarea2.classList.remove('samplekakudaigazouarea_open');
        })
      }
      {
        const kakudaisample3 = document.getElementById('samplemotogazou3');
        const kakudaigazouarea3 = document.getElementById('samplekakudaigazouarea3');
        const kakudaisamplegazou3 = document.getElementById('samplekakudaigazou3');
        kakudaisample3.addEventListener('click',function(evevt) {
          kakudaigazouarea3.classList.remove('samplekakudaigazouarea_hide');
          kakudaigazouarea3.classList.add('samplekakudaigazouarea_open');
        });
        samplekakudaigazou3.addEventListener('click',function() {
          kakudaigazouarea3.classList.add('samplekakudaigazouarea_hide');
          kakudaigazouarea3.classList.remove('samplekakudaigazouarea_open');
        })
      }
      {
        const kakudaisample4 = document.getElementById('samplemotogazou4');
        const kakudaigazouarea4= document.getElementById('samplekakudaigazouarea4');
        const kakudaisamplegazou4 = document.getElementById('samplekakudaigazou4');
        kakudaisample4.addEventListener('click',function(evevt) {
          kakudaigazouarea4.classList.remove('samplekakudaigazouarea_hide');
          kakudaigazouarea4.classList.add('samplekakudaigazouarea_open');
        });
        samplekakudaigazou4.addEventListener('click',function() {
          kakudaigazouarea4.classList.add('samplekakudaigazouarea_hide');
          kakudaigazouarea4.classList.remove('samplekakudaigazouarea_open');
        })
      }
      {
        const kakudaisample5 = document.getElementById('samplemotogazou5');
        const kakudaigazouarea5 = document.getElementById('samplekakudaigazouarea5');
        const kakudaisamplegazou5 = document.getElementById('samplekakudaigazou5');
        kakudaisample5.addEventListener('click',function(evevt) {
          kakudaigazouarea5.classList.remove('samplekakudaigazouarea_hide');
          kakudaigazouarea5.classList.add('samplekakudaigazouarea_open');
        });
        samplekakudaigazou5.addEventListener('click',function() {
          kakudaigazouarea5.classList.add('samplekakudaigazouarea_hide');
          kakudaigazouarea5.classList.remove('samplekakudaigazouarea_open');
        })
      }
      {
        const kakudaisample6 = document.getElementById('samplemotogazou6');
        const kakudaigazouarea6 = document.getElementById('samplekakudaigazouarea6');
        const kakudaisamplegazou6 = document.getElementById('samplekakudaigazou6');
        kakudaisample6.addEventListener('click',function(evevt) {
          kakudaigazouarea6.classList.remove('samplekakudaigazouarea_hide');
          kakudaigazouarea6.classList.add('samplekakudaigazouarea_open');
        });
        samplekakudaigazou6.addEventListener('click',function() {
          kakudaigazouarea6.classList.add('samplekakudaigazouarea_hide');
          kakudaigazouarea6.classList.remove('samplekakudaigazouarea_open');
        })
      }
    </script>
  </body>
</html>

« 前の記事へ次の記事へ »