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

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

基礎

【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入門】色の指定方法まとめ|16進数・色名・CSS指定の違いを初心者向けに解説

JavaScriptで色を指定する方法|16進数・色名・CSS指定を初心者向けに解説 JavaScriptで色を指定する方法は、HTML/CSS と同様に複数あります。代表的なのは次の2つです。 16 …

【JavaScript入門】関数の基本|定義方法・引数・return・呼び出し方を初心者向けに解説

JavaScriptの関数とは?定義方法・引数・return・呼び出し方を初心者向けに解説 JavaScriptでは、繰り返し使う処理をひとまとめにして再利用できるようにしたものを関数と呼びます。関数 …

【JavaScript入門】変数の基本を解説|宣言方法・命名規則・スコープの仕組みを初心者向けに紹介

JavaScriptの変数とは?宣言方法・命名規則・スコープを初心者向けにわかりやすく解説 変数とは、値や式を一時的に保存しておくための「箱」のようなものです。 変数を使うことでコードが読みやすくなり …

【JavaScript入門】scriptタグの基本とHTMLへの書き方を初心者向けに解説

JavaScriptをHTMLに記述する方法|scriptタグの基本と正しい書き方を初心者向けに解説 JavaScriptをWebページに組み込む方法はいくつかあります。 HTML文書内に直接記述する …

【JavaScript入門】オブジェクト・プロパティ・メソッドとは?初心者向けに基本概念をわかりやすく解説

JavaScriptのオブジェクト・プロパティ・メソッドとは?初心者向けに基本概念をわかりやすく解説 JavaScriptは「オブジェクトベース」のスクリプト言語です。 Webページを操作するうえで欠 …