現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

【JavaScript入門】noscript要素の使い方|非対応ブラウザへの配慮とHTML5での変更点

投稿日:2019年4月7日 更新日:

noscript要素の使い方|JavaScript非対応ブラウザへの配慮とHTML5での変更点

ユーザーの中には、JavaScriptを無効にしていたり、スクリプトをサポートしないブラウザ(ユーザーエージェント)を使用している場合があります。こうした環境では、通常のJavaScriptによる処理は実行されません。

そのようなときに役立つのが noscript要素 です。JavaScriptが無効な環境でのみ表示されるメッセージや代替コンテンツを提供できます。



noscript要素とは?

<noscript> 要素は、次のような場合にだけ内容が表示されます。

  • ユーザーがJavaScriptを無効にしている
  • ブラウザがJavaScriptをサポートしていない

逆に、JavaScriptが有効な環境では、<noscript> 内の内容は一切表示されません。

例として、JavaScript非対応環境にメッセージを表示するコードは次のようになります。

<noscript>
    このページはJavaScript対応ブラウザでご覧ください。
</noscript>



noscript要素の注意点(XML / XHTMLでは使用不可)

noscript要素はHTML構文でのみ有効です。

  • XML文書では使用できない
  • XHTML構文でも有効にならない

そのため、HTML5(HTML構文)で利用する場合にのみ効果があります。

HTML4.01 と HTML5 の違い

HTML4.01 と HTML5 では、noscript要素の扱いに違いがあります。

HTML4.01 の仕様

  • <noscript>head要素内に置くことは不可
  • body内でのみ使用可能

HTML5 の仕様

  • head要素内に配置してもよい
  • head内のnoscriptには、以下の要素を含めてもよい
    • <link>
    • <style>
    • <meta>

HTML5では柔軟性が高まり、JavaScript無効環境向けのスタイルやメタ情報を head 内で提供できるようになりました。



関連リンク

-基礎
-

執筆者:

関連記事

【JavaScript入門】初心者向けに特徴・歴史・できることをわかりやすく解説

JavaScriptとは?初心者向けに特徴・歴史・できることをわかりやすく解説 Web制作やWebシステム開発の現場で必ず触れる機会がある JavaScript。久しぶりに触ると「こんな書き方だったっ …

【JavaScript入門】new・delete・with・thisの使い方|オブジェクト操作の基本を初心者向けに解説

JavaScriptのnew・delete・with・thisの使い方|オブジェクト操作の基本を初心者向けに解説 JavaScriptでは、オブジェクトを作成したり削除したり、オブジェクト名を省略して …

【JavaScript入門】HTML要素内に直接スクリプトを書く方法|javascript: の使い方と注意点

JavaScriptをHTML要素内に直接記述する方法|javascript: の使い方と注意点を初心者向けに解説 JavaScriptをWebページに組み込む方法はいくつかあります。 HTML文書内 …

【JavaScript入門】DOMとは?仕組み・ノード・ツリー構造を初心者向けにわかりやすく解説

JavaScriptのDOMとは?仕組み・ノード・ツリー構造を初心者向けにわかりやすく解説 JavaScriptでHTMLを操作するために欠かせないのが DOM(Document Object Mod …

【JavaScript入門】イベントとイベントハンドラの基本|onclick・onload・onmouseoverの使い方を解説

JavaScriptのイベントとイベントハンドラの基本|onclick・onload・onmouseoverを初心者向けに解説 JavaScriptでは、ユーザーの操作やページの状態変化に応じて「イベ …