CSSでズーム操作しよう!超初心者向け7つの方法

CSS初心者がズーム操作を学ぶイメージCSS
この記事は約7分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

CSSのズーム操作を初心者目線で学びたいあなたに朗報です!

この記事では、CSSでズーム操作を行うための7つの方法を超詳しく解説していきます。

サンプルコード付きで使い方や応用例も紹介しますので、この記事を読めばズーム操作も簡単にできるようになります。

●1. 準備:基本的なHTMLとCSSの構造

まずは、HTMLとCSSの基本構造を理解しましょう。

ズーム操作を行う前に、次のようなHTMLとCSSが必要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Zoom Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <img src="sample-image.jpg" alt="サンプル画像">
  </div>
</body>
</html>

そして、styles.cssには次のように記述します。

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

img {
  width: 100%;
  height: auto;
}

この段階で、HTMLとCSSの基本構造が整いました。

次に、ズーム操作を行う方法を解説していきます。

●2. 方法1:transformを使ったズーム

最も簡単なズーム操作の方法は、CSSのtransformプロパティを使用することです。

次のように、scale()関数を使ってズーム操作を行うことができます。

img:hover {
  transform: scale(1.2);
}

このコードでは、画像にマウスカーソルが乗ったときに、画像が1.2倍に拡大されます。

●3. 方法2:ホバー時のトランジションを追加

ズーム操作をスムーズにするために、transitionプロパティを使ってホバー時のアニメーションを追加しましょう。

次のように記述することで、画像が徐々に拡大されるようになります。

img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

img:hover {
  transform: scale(1.2);
}

このコードでは、transitionプロパティを使って、ズーム操作が0.3秒かけて実行されるように指定しています。

●4. 方法3:ズームの範囲を指定

拡大する範囲を指定することで、ズーム操作の対象範囲を制限することができます。

次のように記述することで、画像の中心部分を拡大するように指定できます。

img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
  object-fit: cover;
}

img:hover {
  transform: scale(1.2);
}

このコードでは、object-fitプロパティを使って、画像の中心部分を拡大するように指定しています。

●5. 方法4:クリックでズーム

クリックによってズーム操作を行う方法もあります。

JavaScriptを使って、クリック時のズーム操作を制御しましょう。

次のように記述することで、クリックで拡大・縮小を切り替えることができます。

<script>
  const img = document.querySelector('img');
  img.addEventListener('click', () => {
    img.classList.toggle('zoom');
  });
</script>

そして、CSSに次のように記述します。

.zoom {
  transform: scale(1.2);
}

このコードでは、画像がクリックされるたびにzoomクラスが追加・削除され、拡大・縮小が切り替わります。

●6. 方法5:ピンチイン・ピンチアウトでズーム

タッチデバイスでピンチイン・ピンチアウトによるズーム操作を行いたい場合は、JavaScriptのイベントリスナーを使って制御することができます。

次のように記述することで、ピンチ操作によるズームを実現できます。

<script>
  let scale = 1;
  let initialDistance = null;

  const img = document.querySelector('img');
  img.addEventListener('touchmove', (e) => {
    if (e.touches.length === 2) {
      const dx = e.touches[0].clientX - e.touches[1].clientX;
      const dy = e.touches[0].clientY - e.touches[1].clientY;
      const distance = Math.sqrt(dx * dx + dy * dy);

      if (initialDistance === null) {
        initialDistance = distance;
      } else {
        scale *= distance / initialDistance;
        initialDistance = distance;
        img.style.transform = `scale(${scale})`;
      }
    }
  });

  img.addEventListener('touchend', () => {
    initialDistance = null;
  });
</script>

このコードでは、2本の指でタッチされた状態でピンチ操作が行われると、ズームが実行されます。

●7. 方法6:ズームレベルを指定

ズームレベルを指定して、任意の倍率でズーム操作を行いたい場合は、次のように記述します。

<button onclick="zoomIn()">ズームイン</button>
<button onclick="zoomOut()">ズームアウト</button>

<script>
  let zoomLevel = 1;

  const img = document.querySelector('img');

  function zoomIn() {
    zoomLevel += 0.1;
    img.style.transform = `scale(${zoomLevel})`;
  }

  function zoomOut() {
    zoomLevel -= 0.1;
    img.style.transform = `scale(${zoomLevel})`;
  }
</script>

このコードでは、「ズームイン」ボタンを押すことで0.1倍ずつ拡大し、「ズームアウト」ボタンを押すことで0.1倍ずつ縮小します。

●8. 方法7:ホイール操作でズーム

マウスホイール操作でズーム操作を行いたい場合は、次のように記述します。

<script>
  let zoomLevel = 1;

  const img = document.querySelector('img');
  img.addEventListener('wheel', (e) => {
    e.preventDefault();

    if (e.deltaY < 0) {
      zoomLevel += 0.1;
    } else {
      zoomLevel -= 0.1;
    }

    img.style.transform = `scale(${zoomLevel})`;
  });
</script>

このコードでは、マウスホイールを上にスクロールすることで0.1倍ずつ拡大し、下にスクロールすることで0.1倍ずつ縮小します。

まとめ

以上の7つの方法で、CSSを使ったズーム操作が実現できます。

初心者の方でも簡単に理解できるよう、わかりやすく詳細な説明を心がけました。

これで、あなたもCSSのズーム操作に自信を持つことができるでしょう。