【html】noscript要素の使い方を徹底解説！

ネットで何かを検索している時に、ブラウザ上で

「ご利用のブラウザはスクリプトに対応していません」

といったメッセージが表示されたことはありませんか？

これは、あなたの使っているブラウザがスクリプトに対応していないために表示されるメッセージです。

このメッセージは、htmlファイル内のnoscript要素が読み込まれた結果表示されています。今回は、その

説明したいと思います。

この記事は

のレベルアップにつながります。

初心者の方にも分かりやすい内容となっているので是非参考にしてくださいね。

htmlのnoscriptってどんな時に使うの？

noscript要素はユーザーのブラウザがスクリプト未対応の際に代替コンテンツを表示させるために使われます。

htmlとスクリプトの関係

noscript要素の詳しい説明に入る前に、ひとつ触れておきたいのがhtmlとスクリプトの関係についてです。

htmlファイルではscript要素を用いてJavaScriptなどのプログラムを記述したり別ファイルから読み込むことができます。

スクリプトの役割と例

JavaScript以外にもJscriptやActionscriptなどのクライアントサイドスクリプト言語があるのですが、現在webブラウザのデファクトスタンダードとなっているのがJavaScriptです。

よって、今回は便宜上使用されているスクリプト言語をJavaScriptとみなして話を進めたいと思います。

ちなみに、htmlやcssが表示に関する言語なのに対しJavaScriptはブラウザ上での動作や変化を表現するのに用いられます。

例としては、ボタンをクリックしたときに「いいね！」と表示されたりイベント開催までのカウントダウン(タイマー)が表示されるという機能が挙げられます。

スクリプトが無効の時はnoscript要素が役立つ

しかし、何らかの理由でユーザーのブラウザのJavaScriptが無効となっている場合はJavaScriptが実行されません。

例えば、ブラウザの動作が遅くなるのを防いだり、web開発者が問題の切り分けの為に一時的にjavascriptを無効にしている場合があります。

そんな時にメッセージを表示してユーザーに知らせたり、別のページにリダイレクトさせるために使うのがnoscript要素です。

JavaScriptが有効なブラウザでは noscript要素内の記述を無視し、無効なブラウザの場合は noscript要素内の記述を読み込みます。

noscript要素を記述する場所はhead要素の中もしくはフレージング・コンテンツが置ける箇所となります。

注意点としては、いずれもnoscript要素の下位要素になることはできません。

【html】noscript要素の使い方サンプル

noscript要素の説明が終わったところで、具体的な使い方を見ていきましょう。

ブラウザのJavaScriptが無効の場合にメッセージを表示させる。

ユーザーのブラウザがJavaScriptに対応していない場合の一つ目の方法として、メッセージ表示をさせるというやり方があります。

JavaScript未対応の環境ならば、noscript要素が読み込まれ、上記のメッセージが表示されます。

ブラウザのjavascriptが無効の場合に指定のURLへリダイレクトさせる。

もう一つの方法としては、リダイレクトさせるというやり方です。

リダイレクトとは、ユーザーがあるサイトに訪れた時に、自動的に別のページやサイトに転送する仕組みのことです。

リダイレクトの主な用途としてはサイトのリニューアルやPCサイトとスマホサイトでURLが分かれている場合が挙げられますが、JavaScriptが無効の際にも適用します。

繰り返しになりますが、そのユーザーの環境がJavaScriptに対応している場合はnoscriptの内容は無視され、処理されることはありません。

いかがでしょうか？noscript要素の記述自体はそれほど難しくないかと思います。

実際にhtmlファイルにnoscript要素を記述し実行する。

noscript要素の記述についてある程度理解したら、実際にあなたのブラウザでJavaScriptが利用できるかどうかメッセージで表示させてみましょう。

まず、下記の様なhtmlファイルを作成し、sample.htmlという名前を付けて保存します。保存場所はデスクトップで構いません。

ブラウザから、デスクトップ上に作成したsample.htmlを開くと、あなたの使うブラウザでJavaScriptが利用できるかどうかが判明します。

あえて自分のブラウザのJavaScriptを無効にする人はあまりいないので、多くの場合「ご利用のブラウザはJavaScriptが有効です。」と表示されるでしょう。

通常、JavaScriptが有効な場合はわざわざ有効ですとメッセージを表示させることはないのですが、今回は学習の為にscript要素内にメッセージを記述しています。

noscript要素を記述しないとどうなるの？

ちなみに、noscript要素を記述しない場合はどうなるのでしょうか？

その場合、JavaScriptが無効もしくは対応していないブラウザのユーザーは、なぜ自分が見ようとしたページやサイトが表示されないのか分からず混乱してしまいます。

実際、ネットを見ていてあるボタンやリンクを押した際、突然何も表示されなくなって不便な思いをしたという経験はないでしょうか。

ストレスを感じたユーザーは別のサイトを見に行ってしまう可能性も出てきます。

一言「JavaScriptが無効です」と表示されればブラウザの設定を変更してまたそのサイトを訪問してくれるかもしれません。

webサイトからの離脱を防ぐためにも、javascritが無効の際はnoscript要素を読み込ませてメッセージを表示したり別のページにリダイレクトさせる必要があります。

まとめ

いかがでしたか？今回は、

説明しました。

noscript要素はブラウザ上でスクリプトが無効な際の代替案として用いられ、ユーザーの利便性をアップすることが期待できます。

つい書き忘れてしまうこともあるかも知れませんが、ユーザーのことを考えたコンテンツを作り上げるためにも忘れずに記述して下さいね。

この記事が、htmlの学習やweb制作の役に立つと嬉しいです。