iPentec.com  /  Doc  /  CSS  /  CSS Transition

目次

クリックでピックアップされてズーム表示される枠を作成する - CSS

CSS等を利用してクリックでピックアップされてズーム表示される枠を作成します。

概要

一つの枠(エリア)内に複数のコンテンツ枠があり、クリックをして選択するとズームされ枠全体に表示する動作を実現します。

完成イメージ

一つの枠に複数の枠(この例では4つ)が表示されています。


[B]の枠をクリックやタップで選択します。


選択した[B]の枠が拡大表示されます。

方針

クリックされたタイミングでクラスを変更します。枠の拡大はtransform: scaleを利用します。 transform: scaleを利用すると子要素も含めて枠全体を拡大できます。
拡大された状態でクリックされた場合はクラスを変更して元のサイズに戻します。

プログラム

コード

下記のコードを記述します。
zoom.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="zoom.css"/>
  <script type="text/javascript">
    function FrameClick(FrameName) {
      switch (FrameName){
        case 'A':
          var elem = document.getElementById("ContentFrameA");

          if (elem.classList.contains("CCFrameAZoom") == true) {
            elem.classList.remove("CCFrameAZoom");
          } else {
            elem.classList.add("CCFrameAZoom");
          }
          break;
        case 'B':
          var elem = document.getElementById("ContentFrameB");
          if (elem.classList.contains("CCFrameBZoom") == true) {
            elem.classList.remove("CCFrameBZoom");
          } else {
            elem.classList.add("CCFrameBZoom");
          }
          break;
        case 'C':
          var elem = document.getElementById("ContentFrameC");
          if (elem.classList.contains("CCFrameCZoom") == true) {
            elem.classList.remove("CCFrameCZoom");
          } else {
            elem.classList.add("CCFrameCZoom");
          }
          break;
        case 'D':
          var elem = document.getElementById("ContentFrameD");
          if (elem.classList.contains("CCFrameDZoom") == true) {
            elem.classList.remove("CCFrameDZoom");
          } else {
            elem.classList.add("CCFrameDZoom");
          }
          break;
      }
    }
  </script>
</head>
<body>
  <div>Transitionによるズームアニメーション</div>

  <div class="ContentsFrame">
    <div id="ContentFrameA" class="ContentFrame CCFrameA" onclick="FrameClick('A');">
      <img class="content-img" src="img1.png"/>
      <p>Aのコンテンツ枠です</p>
    </div>
    <div id="ContentFrameB" class="ContentFrame CCFrameB" onclick="FrameClick('B');">
      <img class="content-img" src="img2.png" />
      <p>Bのコンテンツ枠です</p>
    </div>
    <div id="ContentFrameC" class="ContentFrame CCFrameC" onclick="FrameClick('C');">
      <img class="content-img" src="img3.png" />
      <p>Cのコンテンツ枠です</p>
    </div>
    <div id="ContentFrameD" class="ContentFrame CCFrameD" onclick="FrameClick('D');">
      <img class="content-img" src="img4.png" />
      <p>Dのコンテンツ枠です</p>
    </div>
  </div>

  <p>テストページ</p>
</body>
</html>
zoom.css
.ContentsFrame {
  width: 400px;
  height: 200px;
  border: 1px solid #0094ff;
  position:relative;
}

.ContentFrame {
  width: 198px;
  height: 98px;
  border: 1px solid #388f14;
  background-color:#FFFFFF;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  position: absolute;
}

.CCFrameA {
  top: 0;
  left: 0;
  z-index: 0;
}

.CCFrameB {
  top: 0;
  left: 200px;
  z-index: 0;
}

.CCFrameC {
  top: 100px;
  left: 0;
  z-index: 0;
}

.CCFrameD {
  top: 100px;
  left: 200px;
  z-index: 0;
}

.CCFrameAZoom {
  z-index:10;
  top: 50px;
  left: 100px;
  transform: scale(2.0,2.0);
}

.CCFrameBZoom {
  z-index: 10;
  top: 50px;
  left: 100px;
  transform: scale(2.0,2.0);
}

.CCFrameCZoom {
  z-index: 10;
  top: 50px;
  left: 100px;
  transform: scale(2.0,2.0);
}

.CCFrameDZoom {
  z-index: 10;
  top: 50px;
  left: 100px;
  transform: scale(2.0,2.0);
}

.content-img {
  width:64px;
  height:64px;
}

.ContentFrame p {
  margin-top:0;
  margin-bottom:0;
}

解説

HTMLでのタグの構造は下記のコードです。 外側の枠を ContentsFrame クラスに設定しています。中のコンテンツの枠は ContentFrameA, ContentFrameB, ContentFrameC, ContentFrameD の４つのIDを割り当てています。クラスは基本デザインを ContentFrame で指定し枠の座標などの情報を CCFrameA, CCFrameB, CCFrameC, CCFrameD で記述します。コンテンツの枠内には画像と「Xのコンテンツ枠です」のテキスト文を配置しています。
  <div class="ContentsFrame">
    <div id="ContentFrameA" class="ContentFrame CCFrameA" onclick="FrameClick('A');">
      <img class="content-img" src="img1.png"/>
      <p>Aのコンテンツ枠です</p>
    </div>
    <div id="ContentFrameB" class="ContentFrame CCFrameB" onclick="FrameClick('B');">
      <img class="content-img" src="img2.png" />
      <p>Bのコンテンツ枠です</p>
    </div>
    <div id="ContentFrameC" class="ContentFrame CCFrameC" onclick="FrameClick('C');">
      <img class="content-img" src="img3.png" />
      <p>Cのコンテンツ枠です</p>
    </div>
    <div id="ContentFrameD" class="ContentFrame CCFrameD" onclick="FrameClick('D');">
      <img class="content-img" src="img4.png" />
      <p>Dのコンテンツ枠です</p>
    </div>
  </div>

外側の枠の ContentsFrame クラスの定義は下記です。
width,heightプロパティを設定し枠の幅と高さを指定しています。また、position:relativeを設定しています。これは枠内の コンテンツの枠の位置を絶対座標でしているするため、外側の枠の左上を(0,0)の基準として設定するためです。
.ContentsFrame {
  width: 400px;
  height: 200px;
  border: 1px solid #0094ff;
  position:relative;
}

内側のコンテンツの枠です。今回は枠内に4つの枠を配置するため、外側の枠の半分の幅と高さを持つ枠の大きさにしています。 transitionプロパティを設定し、クラスが変化した場合にアニメーションで変化する設定としています。 また、枠の位置を絶対座標で指定するため、position:absolute を設定しています。この設定と親要素の relative の設定により、 left:0, top:0 の位置が、親要素の左上になります。
.ContentFrame {
  width: 198px;
  height: 98px;
  border: 1px solid #388f14;
  background-color:#FFFFFF;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  position: absolute;
}

CCFrameA, CCFrameB, CCFrameC, CCFrameD のクラスでコンテンツ枠の位置を設定しています。
.CCFrameA {
  top: 0;
  left: 0;
  z-index: 0;
}

CCFrameAZoom, CCFrameBZoom, CCFrameCZoom, CCFrameDZoom のクラスでコンテンツ枠を拡大し、表示位置を左上に設定しています。
z-indexを大きい値にすることでピックアップされた枠が前面に表示される動作にしています。
.CCFrameAZoom {
  z-index:10;
  top: 50px;
  left: 100px;
  transform: scale(2.0,2.0);
}

コンテンツの枠をクリックした際に実行される関数が下記です。
どの枠がクリックされたかを引数で与えます。switch文で枠ごとの処理に場合分けします。
getElementById()関数でコンテンツの枠の要素(オブジェクト)を取得します。 取得したオブジェクトにZoomのクラスが追加されているか確認し、Zoomのクラスが追加されてない場合は Zoomのクラスを追加し枠を拡大し外枠いっぱいに表示します。一方でZoomのクラスが追加されいる場合は Zoomのクラスを削除しコンテンツの枠を元の大きさに戻します。
function FrameClick(FrameName) {
  switch (FrameName){
    case 'A':
      var elem = document.getElementById("ContentFrameA");

      if (elem.classList.contains("CCFrameAZoom") == true) {
        elem.classList.remove("CCFrameAZoom");
      } else {
        elem.classList.add("CCFrameAZoom");
      }
      break;
     /* (中略...) */
  }
}

表示結果

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。


[Aのコンテンツ枠]をクリックします。枠の大きさがアニメーションで拡大します。


コンテンツの枠が拡大され外枠いっぱいに表示されます。


もう一度[Aのコンテンツ枠]をクリックすると枠の大きさが縮小し、元の表示に戻ります。


他の枠をクリックするとクリックした枠が拡大表示されます。


著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2021-01-15
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.