VIDEO LESSON

HTMLのnoscriptタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:38動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の四十七本目は、ノースクリプトタグです。
0:09ノースクリプトは、ジャバスクリプトが使えない環境でのみ表示される、代替の内容を書くためのタグです。
0:17ふだんは画面に出てきませんが、スクリプトが無効な訪問者に対して、動かない理由を伝えたり、
0:23代わりの手段を案内したりする、大切な受け皿になります。
0:28今回は仕組みと基本の書き方、置く場所によるルールの違い、確認の方法まで、
0:32順に学んでいきます。
0:35特に、設定でスクリプトをオフにしている人や、制限のある環境で開く人を想定する場面で、
0:39力を発揮します。
0:43どんな場面で使うのかを整理します。
0:46たとえば、フォームの入力チェックやメニューの開閉をジャバスクリプトに任せているページを考えてください。
0:54スクリプトが無効だと、その機能は動きません。
0:57そのときに何も表示しないと、訪問者はボタンが反応しない理由が分からず、そのまま困ってしまいます。
1:05ノースクリプトで、スクリプトが必要です、という案内や、電話やメールなど別の連絡手段を表示すれば、
1:09行き止まりを防げます。
1:14主役ではなく、あくまで案内と代替が役割だと覚えてください。
1:18逆に、文章を読むだけのページであれば、そもそもスクリプトがなくても内容が伝わるため、
1:22無理に用意する必要はありません。
1:27仕組みはシンプルな二択です。
1:29ブラウザーの設定でスクリプトが有効なら、ノースクリプトの中身は無視され、
1:32画面には何も出ません。
1:35逆にスクリプトが無効なら、中身が通常のエイチティーエムエルとして表示されます。
1:41ここで大切な注意点があります。
1:43スクリプトのファイルが読み込めなかったり、プログラムにエラーがあったりしても、
1:47設定が有効である限りノースクリプトは表示されません。
1:52あくまで、無効という設定そのものに反応する仕組みだと覚えてください。
1:57この区別が、このタグで一番のつまずきどころです。
2:00画面の例のように通常のボタンと並べて置くことで、有効な人には邪魔にならず、
2:03無効な人にだけ案内が届きます。
2:07基本の書き方を確認します。
2:09ノースクリプトには開始タグと終了タグの両方が必要で、その間に代替として見せたい内容を書きます。
2:17画面の例はボディの中に置いたもので、段落を使って、自動の入力確認にはジャバスクリプトが必要です、
2:22と案内しています。
2:27続けて、説明文はそのまま読めます、と伝えているのがポイントです。
2:32何が使えなくて、何はそのまま使えるのかをセットで示すと、訪問者は次にどうすればよいか判断できます。
2:41まずはこの形から身につけましょう。
2:44コード自体は短く、段落タグをそのまま内側に入れるだけなので、初めて書く人でも迷うことは少ないはずです。
2:52置く場所によってルールが変わるのが、このタグの難しいところです。
2:57ボディの中に置く場合は、段落や見出し、リンクなど、画面に出る通常の内容をそのまま書けます。
3:04一方、ヘッドの中に置く場合は制限が強く、書けるのはリンク、スタイル、メタといった限られた要素だけです。
3:11ヘッドは文書全体の設定を置く場所なので、画面に表示する文章を直接書くことはできません。
3:18置きたい内容が文章なのか設定なのかを考えて、ヘッドとボディのどちらに置くべきか判断してください。
3:25記事でも、ヘッド内では内容に強い制約がある点が注意として挙げられていますので、
3:29この違いは必ず押さえてください。
3:33ヘッドでの代表的な使い方を紹介します。
3:36スクリプトで後から表示を切り替える前提のページでは、スクリプトが無効なときに、
3:41要素が隠れたままになってしまうことがあります。
3:46そこでヘッドのノースクリプトの中にスタイルタグを置き、無効な場合だけ適用される予備のスタイルを用意します。
3:54画面の例では、メニューを常に表示する指定に切り替えています。
3:59このようにヘッド側は、文章ではなく見た目のフォールバックを担当させる場所です。
4:05ボディ側の案内と役割を分けて考えましょう。
4:08考え方としては、もしものときの保険です。
4:11用意しておくだけで、無効な環境でも最低限読めるページになります。
4:16属性について確認します。
4:18ノースクリプトには、この要素専用の属性はありません。
4:21必要に応じて使うのは、アイディーやクラス、ラングなどのグローバル属性、つまり多くの要素に共通する属性だけです。
4:29たとえばクラスを付けておけば、案内文全体に枠や背景色といったスタイルを、
4:32シーエスエスでまとめて付けられます。
4:36専用属性がない分、覚えることは少なくて済みます。
4:39子要素に付ける属性と混同しないよう、タグそのものには特別な指定は要らない、
4:43と整理しておきましょう。
4:46データスター属性で独自の値を保持することもできますが、秘密情報を置く場所ではない点にも注意してください。
4:53よくある間違いを二つ確認します。
4:56一つ目は、ノースクリプトがあるから主要な内容までジャバスクリプト任せにしてよい、
5:00という考え方です。
5:04それではスクリプトが使えない訪問者は、案内だけで肝心の情報を読めません。
5:10本文や重要な手続きは、できる限りスクリプトなしでも届く形が理想です。
5:16二つ目は、案内文の書き方です。
5:18長々と説明するのではなく、必要な理由と次に取る行動を短く示し、代替のリンクや連絡先まで含めて、
5:23初めて役に立つ案内になります。
5:28また、スクリプトが有効な人には一切見えないため、通常時の見た目を気にせず、
5:33率直な案内を書ける点も特徴です。
5:37作ったあとは、必ず自分で表示を確認しましょう。
5:41確認の手順は、ブラウザーの開発者ツールや設定でジャバスクリプトを一時的に無効にして、
5:46ページを再読み込みするだけです。
5:51案内が期待どおりの位置に出るか、中のリンクが正しく動くか、スマートフォンほどの細い画面幅でも文章が切れないかを見ます。
6:01終わったら設定を有効に戻し、今度は案内がきちんと消えていることも確認してください。
6:08有効と無効の両方を試すことが、このタグを正しく理解する近道です。
6:13三百二十ピクセル程度の幅や文字を拡大した状態でも、案内の内容や操作部分が欠けないかも、
6:18あわせて見ておきましょう。
6:23ブラウザー互換性を確認します。
6:25記事が参照するエムディーエヌの記録では、ノースクリプトタグはクロームが一以降、
6:31エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーで古くから対応しています。
6:36基本的な使い方で、対応状況を心配する必要はほとんどありません。
6:40ただし、スクリプトを無効化する設定の場所や、開発者ツールの操作手順はブラウザーごとに異なります。
6:46対象のブラウザーで実際に無効化して、表示を確かめることが大切です。
6:51モバイル版のブラウザーでは配信条件が異なる場合もあるため、利用対象の実機でも一度試しておくと安心です。
6:57最後にまとめです。
6:58ノースクリプトタグは、スクリプトが無効な場合にだけ表示される、代替内容のためのタグでした。
7:05ポイントは三つです。
7:07一つ目、ボディでは案内文などの通常の内容が書けること。
7:11二つ目、ヘッドでは書ける要素が限られ、主にスタイルの予備として使うこと。
7:16三つ目、プログラムのエラーでは表示されず、あくまで無効という設定に反応することです。
7:23練習として、自分のページに短い案内を一つ追加し、無効化して確かめてみてください。
7:29お疲れさまでした。
7:30次回もお楽しみに。
7:31小さなタグですが、使えない環境の人を置き去りにしないための、やさしい仕組みだと言えます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

noscriptタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。スクリプトが無効な場合などの代替内容。配置場所によって書ける内容が変わります。

解説記事・サンプルコードを読む：HTMLのnoscriptタグとは？属性・使い方・ブラウザー互換性と活用例 →