読み込み中...

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

CSSでズーム禁止を実現するサンプルコードの例 CSS
この記事は約9分で読めます。

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

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

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

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

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

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

はじめに

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

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

この記事では、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を設定することで、ズームを禁止しています。

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

●ズーム禁止の対処法

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

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

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

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

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

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

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

<!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以下のデバイスに対して、.containerpaddingを変更しています。

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

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

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

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

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

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

<!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属性を元に戻すことでズームを再度許可しています。

まとめ

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

また、応用例として特定の要素のみズーム禁止にする方法や、モーダルウィンドウ表示中にズーム禁止にする方法も紹介しました。

これらの方法を活用して、あなたのウェブサイトでズーム禁止を実現してみてください。