CSSでズームを禁止！手順&サンプルコード10選

はじめに
●CSSでズームを禁止する方法とは？
●ズーム禁止の対処法
- ○ユーザーがズームを有効にするオプションを提供する
- ○レスポンシブデザインを実装して、画面サイズに応じてレイアウトが自動調整されるようにする
●応用例とサンプルコード
- 特定の要素のみズーム禁止にする
- ○モーダルウィンドウを表示中にズーム禁止にする
まとめ

はじめに

あなたはウェブサイトを作成している際に、ユーザーが画面をズームしてレイアウトが崩れることを防ぎたいと思ったことはありませんか？

そんなあなたにぴったりの記事です！

この記事では、CSSを使ってズームを禁止する方法、対処法、サンプルコードを初心者目線で徹底解説します。

さらに、応用例とサンプルコードも紹介！これを読めば、あなたもズーム禁止をお手軽に適用できます。

●CSSでズームを禁止する方法とは？

まずは、CSSでズームを禁止する方法について解説しましょう。

ズーム禁止には、主にviewportというメタタグを使った方法と、JavaScriptを使った方法があります。

しかし、今回はCSSを中心に解説していくので、viewportを使用した方法をご紹介します。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  <h1>ズーム禁止サンプル</h1>
</body>
</html>

上記のサンプルコードでは、<meta>タグのcontent属性にmaximum-scale=1.0, user-scalable=noを設定することで、ズームを禁止しています。

これをあなたのウェブサイトに追加すれば、ズームができなくなります。

●ズーム禁止の対処法

しかし、どうしてもズームを有効にしたいユーザーがいるかもしれません。

そんな場合は、次のような対処法があります。

ユーザーがズームを有効にするオプションを提供する
レスポンシブデザインを実装して、画面サイズに応じてレイアウトが自動調整されるようにする

それでは、それぞれの対処法について詳しく見ていきましょう。

○ユーザーがズームを有効にするオプションを提供する

これは、ウェブサイトに設定画面やボタンを追加し、ユーザーが自分でズームを有効/無効にできるようにする方法です。

ズーム機能のオン/オフを切り替えるサンプルコードを紹介します。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" id="viewport">
  <script>
    function toggleZoom() {
      const viewport = document.getElementById("viewport");
      const content = viewport.getAttribute("content");

      if (content.includes("user-scalable=no")) {
        viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes");
      } else {
        viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
      }
    }
  </script>
</head>
<body>
  <h1>ズームオプションサンプル</h1>
  <button onclick="toggleZoom()">ズーム機能を切り替える</button>
</body>
</html>

このサンプルコードでは、toggleZoom関数がズーム機能のオン/オフを切り替える役割を果たしています。

ボタンをクリックすることで、ズームが有効/無効になります。

○レスポンシブデザインを実装して、画面サイズに応じてレイアウトが自動調整されるようにする

レスポンシブデザインとは、ウェブサイトのデザインがデバイスや画面サイズに応じて自動的に調整されるようにする方法です。

これにより、ユーザーが画面をズームしてもレイアウトが崩れず、快適に閲覧できます。

レスポンシブデザインのサンプルコードを紹介します。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    @media screen and (max-width: 768px) {
      .container {
        padding: 0 10px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>レスポンシブデザインサンプル</h1>
    <p>このサンプルでは、画面サイズが768px以下のデバイスで、.containerのpaddingが変更されることでレスポンシブデザインが実現されています。</p>
  </div>
</body>
</html>

このサンプルコードでは、CSSの@mediaルールを使って画面サイズが768px以下のデバイスに対して、.containerのpaddingを変更しています。

これにより、画面サイズに応じてレイアウトが自動調整されるレスポンシブデザインが実現されます。

●応用例とサンプルコード

ズーム禁止の応用例として、次のようなケースが考えられます。

特定の要素のみズーム禁止にする
モーダルウィンドウを表示中にズーム禁止にする

それぞれの応用例について、サンプルコードを示します。

特定の要素のみズーム禁止にする

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .no-zoom {
      touch-action: manipulation;
    }
  </style>
</head>
<body>
  <h1>特定の要素だけズーム禁止サンプル</h1>
  <p>この段落はズーム可能です。</p>
  <p class="no-zoom">この段落はズーム禁止です。</p>
</body>
</html>

このサンプルコードでは、.no-zoomクラスにtouch-action: manipulation;を設定することで、特定の要素のみズーム禁止にしています。

○モーダルウィンドウを表示中にズーム禁止にする

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" id="viewport">
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 100;
    }

    .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border-radius: 5px;
    }
  </style>
  <script>
    function showModal() {
      document.getElementById("modal").style.display = "block";
      document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
    }

    function closeModal() {
      document.getElementById("modal").style.display = "none";
      document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0");
    }
  </script>
</head>
<body>
  <h1>モーダル表示中にズーム禁止サンプル</h1>
  <button onclick="showModal()">モーダルを表示</button>
  <div id="modal" class="modal" onclick="closeModal()">
    <div class="modal-content">
      <h2>モーダルウィンドウ</h2>
      <p>モーダルが表示されている間、ズームが禁止されます。</p>
    </div>
  </div>
</body>
</html>

このサンプルコードでは、モーダルウィンドウを表示する際に、showModal関数で<meta name="viewport">のcontent属性を書き換えることでズームを禁止し、

モーダルを閉じる際にcloseModal関数でcontent属性を元に戻すことでズームを再度許可しています。