HTML

HyperText Markup Language noscript element.

noscript 要素

　noscript要素は、script要素と一緒に使用して、スクリプトが動作しなかった場合にメッセージなどの表示内容を指定する際に使用しますので、単体で使用することはほとんどありません。

　ユーザーによっては、ブラウザの設定で JavaScriptなどのスクリプトを無効にしていたり、スクリプトをサポートしていないユーザーエージェントを使用している場合があります。こうしたスクリプトが無効な環境では noscript要素のコンテンツが表示されます。スクリプトが有効な環境の場合では、noscript要素は無視され、何も表示されません。

基本的な使い方


<script>
	コンテンツ
</script>
<noscript>
	代替コンテンツ
</noscript>

　なお、noscript要素の中に、さらに noscript要素を入れてはいけません。また、XML文書では、noscript要素を使う事はできません。XHTML構文の中で使用しても有効とはなりません。HTML構文の中でのみ有効となりますので、注意してください。

これは、アクセスした日時を表示する JavaScriptです。

アクセスした日時を表示する JavaScript


<script>
	today = new Date();
	document.write(today);
</script>
<noscript>
	<p>このページでは JavaScript を使用しています。</p>
</noscript>
noscript 要素の表示例です。

　ここの例では、ブラウザの設定で JavaScriptを「無効」にして確認しています。同じようにブラウザの設定で「JavaScriptを“無効“」にしていただければ表示を確認していただけると思います。

　script要素では、多くの場合、動きのある動画や画像のようなコンテンツを表示させていると思いますので、そういった場合の noscript要素の代替コンテンツは、似たような内容の静止画やキャプチャー画像を使用するのが望ましいと思います。


<script>
	コンテンツ
</script>
<noscript>
	<img src="代替コンテンツ画像のURL" alt="代替コンテンツ画像の説明">
</noscript>

HTML5 へのバージョンアップによる変更点

　HTML4.01では noscript要素を head要素内に配置することは仕様として認められていませんでしたが、HTML5では head要素内に配置してもよいことになっています。また、HTML5では noscript要素が head要素内にある場合には、noscript要素の中に

のみ記述することができます。

　これによりスクリプトが無効な場合に別のスタイルを指定するといったことも可能になりました。


<head>
		:
		:
	<link rel="stylesheet" type="text/css" href="style.css">
	<noscript>
		<link rel="stylesheet" type="text/css" href="noscript.css">
	</noscript>
		:
		:
</head>

noscript要素の概要

カテゴリー
メタデータ・コンテンツ
フロー・コンテンツ
フレージング・コンテンツ
コンテンツ･モデル
スクリプトが無効で、head要素の中にある場合
0個以上の link要素、0個以上の style要素、0個以上の meta要素。
スクリプトが無効で、head要素の中にない場合
トランスペアレント。ただし、この要素の中に noscript要素を入れてはいけません。
スクリプトが有効の場合
テキスト
利用可能な場所
head要素の中、または、フレージング・コンテンツが期待される場所。ただし、いずれの場合も、noscript要素を他の noscript要素の中に入れてはいけません。
開始タグ
必須
終了タグ
必須
属性
グローバル属性
グローバル属性のみ使用することができます。
標準的なスタイル
-
DOM インターフェイス
HTMLElement

noscriptの使用例①

　スクリプトが無効の場合は、代替ページへのリンクを表示します。

JavaScript source


<noscript>
	<a href="https://www.yugien.xyz/">代替ページへリンク</a>
</noscript>
<p>メインコンテンツ</p>

実際のサンプル

メインコンテンツ

JavaScript が無効な場合の表示例です。

noscriptの使用例②

　JavaScriptが無効の場合はメッセージが表示されますが、JavaScriptが有効な場合は、JavaScript ( jQuery ) の remove() を使ってメッセージを削除しています。

HTML source


<div id="alert">JavaScriptを有効にしてください</div>

JavaScript の場合


window.addEventListener( 'load', function() {
	document.getElementById('alert').remove();
});

jQuery の場合


$(function () {
	$('#alert').remove();
});

実際のサンプル

JavaScript を有効にしてください

　この「実際のサンプル」にはおそらく何も表示されていないと思います。と、いうことは JavaScriptが正常に動作しているので、メッセージが削除されています。

JavaScript が無効な場合の表示例です。

その他の使い方

　display:none や opacity:0 などを JavaScript内で完結できるのであれば問題ありませんが、JavaScriptでは DOM構築時に非表示したい要素が一瞬表示されてしまうという現象があります。

　その要素が画面の下の方にあって最初に見えない状態であれば問題ないのですが、ファーストビューで見えてしまうとやはりどうしても CSSの方で display:noneを指定したくなります。

　ただし、CSSで要素に display:noneを指定すると、JavaScriptを無効にしている場合、何も表示されなくなるという状態になってしまいます。

　それでは困ってしまいますので、noscript要素を利用します。

　通常の CSSでは display:noneを指定していても、noscript要素の方で display:blockを指定しておけば、JavaScriptを無効にしている場合でもちゃんと表示してくれるようになります。


<style>
	.hoge { display: none; }
</style>

<noscript>
	<style>
		.hoge { display: block; }
	</style>
</noscript>

　上にも書きましたが、HTML5からは noscript要素を head要素内に読み込むことができるようになり、head要素内に noscript要素を配置した場合は、noscript要素に link要素を読み込ませることができるようになりました。

　これを使って noscript要素で別の CSSを読み込ませて、その CSSで display:blockを指定しておくという方法も使えます。


<link rel="stylesheet" type="text/css" href="script.css">

<noscript>
	<link rel="stylesheet" type="text/css" href="noscript.css">
</noscript>

noscript要素を使わずにスタイル変更を考える

　上記の head要素内で noscript要素を使ってスタイルを変更する場合、XHTML構文の中では使えませんので、別の方法を検討してみます。

　まずは通常通りにスクリプト無効時の CSS (noscript.css) を設置しておき、scriptの中で、

JavaScript / jQuery


(document).ready(function(){
	$("link[href$='noscript.css']").remove();
});

として、設置した CSSを削除するやり方が紹介してありました。