HTMLでズーム禁止する方法5選!初心者でもわかりやすく徹底解説

HTMLでズーム禁止の方法を徹底解説 HTML
この記事は約5分で読めます。

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

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

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

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

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

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

ズーム禁止の基本 – メタタグによる方法

HTMLでズーム禁止を実現する最も簡単な方法は、メタタグを利用することです。

<meta>タグを用いて、ビューポートの設定を行い、ズームを禁止することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>ズーム禁止サンプル</title>
</head>
<body>
  <h1>ズームが禁止されたページ</h1>
  <p>このページはズームが禁止されています。</p>
</body>
</html>

JavaScriptを使ったズーム禁止

JavaScriptを使用して、ズーム禁止を実現することもできます。

この方法は、メタタグによる方法よりも柔軟に制御できるため、特定の条件下でのみズーム禁止を行いたい場合に有効です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptでズーム禁止</title>
  <style>
    body {
      touch-action: manipulation;
    }
  </style>
</head>
<body>
  <h1>JavaScriptでズーム禁止</h1>
  <p>このページではJavaScriptを使ってズームを禁止します。</p>
  <script>
    document.addEventListener('touchmove', function (event) {
      if (event.scale !== 1) {
        event.preventDefault();
      }
    }, { passive: false });
  </script>
</body>
</html>

CSSを使ったズーム禁止

CSSを利用して、ズームを禁止することも可能です。

touch-actionプロパティを使って、ズーム操作を制限することができます。

ただし、この方法は一部のブラウザでのみ対応しているため、注意が必要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSでズーム禁止</title>
  <style>
    body {
      touch-action: pan-x pan-y;
    }
  </style>
</head>
<body>
  <h1>CSSでズーム禁止</h1>
  <p>このページではCSSを使ってズームを禁止します。</p>
</body>
</html>

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

応用例 – スマホ表示のズーム禁止

スマートフォンのみでズームを禁止したい場合は、メディアクエリを利用して条件を指定できます。

これにより、スマートフォン表示時に限定してズーム禁止を適用することが可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スマホ表示でズーム禁止</title>
  <style>
    @media screen and (max-width: 768px) {
      body {
        touch-action: pan-x pan-y;
      }
    }
  </style>
</head>
<body>
  <h1>スマホ表示でズーム禁止</h1>
  <p>このページではスマホ表示時に限り、ズームを禁止します。</p>
</body>
</html>

注意点と対処法

○ブラウザによる違い

ズーム禁止の方法はブラウザによって対応状況が異なるため、複数の方法を組み合わせて使用することが推奨されます。

また、ブラウザのバージョンによっても動作が異なることがあるため、常に最新の情報を確認しておくことが重要です。

○アクセシビリティへの配慮

ズーム禁止を適用する際には、アクセシビリティへの配慮も重要です。

視力に問題があるユーザーや、高齢者などがウェブページを閲覧する際に、ズーム機能が重要な役割を果たしています。

そのため、ズーム禁止を行う理由が明確でない場合は、適用を見送ることを検討してください。

まとめ

この記事では、HTMLでズーム禁止を実現する方法を初心者向けに徹底解説しました。

メタタグ、JavaScript、CSSを利用した方法や、スマートフォン表示のみで適用する方法など、さまざまな手法が紹介されました。

また、ブラウザによる違いや、アクセシビリティへの配慮など、注意点も説明しました。

これらの方法を理解し、適切に適用することで、ウェブページのユーザビリティを向上させることができます。

ただし、ズーム禁止を適用する際には、アクセシビリティへの配慮が重要であることを忘れないようにしましょう。