ChromeでJavaScriptを無効にしたユーザーへメッセージを表示する方法【noscriptの使い方】

2026/08/05

JavaScriptを前提にしたWebサイトでは、JavaScriptが無効になっていると画面が正常に表示されなかったり、フォームが動作しなかったりすることがあります。

そのため、「JavaScriptを有効にしてください」という案内を表示したい場合は、<noscript>タグを使用します。

この記事では、

JavaScriptが無効なユーザーへメッセージを表示する方法
ChromeでJavaScriptを無効にして表示確認する方法

を紹介します。

noscriptとは？

<noscript>は、ブラウザでJavaScriptが無効になっている場合のみ表示されるHTMLタグです。

通常はJavaScriptが有効になっているため、<noscript>の中身は表示されません。

例えば次のように記述します。

<noscript>
  <p>このサイトを利用するにはJavaScriptを有効にしてください。</p>
</noscript>

JavaScriptが無効なユーザーだけに、このメッセージが表示されます。

アラート風に表示する例

CSSを追加すると、目立つ警告メッセージを表示できます。

<noscript>
  <div
    style="
      padding: 16px;
      background: #fff3cd;
      color: #664d03;
      border: 1px solid #ffecb5;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      line-height: 1.6;
    "
  >
    ⚠ このサイトを利用するにはJavaScriptを有効にしてください。
  </div>
</noscript>

JavaScriptが有効な環境では、このHTML自体が表示されません。

ChromeでJavaScriptを無効にして確認する方法

<noscript>が正しく表示されるか確認したい場合は、Chrome DevToolsから一時的にJavaScriptを無効にできます。

手順

確認したいページを開く
F12でDevToolsを開く
Ctrl + Shift + P（MacはCommand + Shift + P）を押す
「JavaScript」と入力する
**Disable JavaScript（JavaScriptを無効にする）**を選択
ページをリロードする

これでそのタブだけJavaScriptが無効になります。DevToolsを閉じると元に戻ります。

JavaScriptを再度有効にする方法

JavaScriptを元に戻すには、

DevToolsを閉じる
または同じコマンドメニューから Enable JavaScript を実行します。

まとめ

<noscript>を使うことで、JavaScriptが無効なユーザーへ案内を表示できます。

ポイントは以下の3つです。

noscriptはJavaScriptが無効な場合だけ表示される
CSSで見やすい警告メッセージにできる
Chrome DevToolsからJavaScriptを無効にして簡単に表示確認できる

JavaScriptを前提としたWebサイトを制作する場合は、一度JavaScriptを無効にした状態でも確認しておくと安心です。