HTML の <noscript> タグをマスターする

はじめに

HTML5 の <noscript> タグは、ブラウザが JavaScript をサポートしていない場合や JavaScript が無効になっている場合に、ユーザーに表示されるテキストのセクションを定義するために使用されます。JavaScript は今日の Web 開発で広く使用されており、すべてのユーザーがブラウザに JavaScript を有効にしているわけではないため、これは重要な HTML タグです。

このチュートリアルでは、HTML コードで <noscript> タグを使用する方法を学び、ブラウザの設定に関係なくすべてのユーザーが Web ページにアクセスできるようにする方法を学びます。

注: index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70802{{"HTML のスクリプト無効時のコンテンツ"}} html/head_elems -.-> lab-70802{{"HTML のスクリプト無効時のコンテンツ"}} html/doc_flow -.-> lab-70802{{"HTML のスクリプト無効時のコンテンツ"}} html/inter_elems -.-> lab-70802{{"HTML のスクリプト無効時のコンテンツ"}} html/custom_attr -.-> lab-70802{{"HTML のスクリプト無効時のコンテンツ"}} end

基本的な HTML 構造を追加する

まず、index.html という新しいファイルを作成します。このファイルには、Web ページの HTML コードが含まれます。

始めに、ファイルに基本的な HTML 構造を追加します。

<!doctype html>
<html>
  <head>
    <title>Using the Noscript Tag</title>
  </head>
  <body></body>
</html>

JavaScript が有効になっている場合のコンテンツを追加する

次に、JavaScript が有効になっている場合にのみ表示されるように、Web ページにいくつかのコンテンツを追加します。

<!doctype html>
<html>
  <head>
    <title>Using the Noscript Tag</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>

    <noscript>
      <p>Please enable JavaScript to view this webpage.</p>
    </noscript>
  </body>
</html>

この例では、<h1> タグがページの見出しを表示するために使用されています。<noscript> タグには、JavaScript が無効になっている場合に表示されるべきテキストが含まれています。JavaScript が有効になっている場合、このテキストは表示されません。

JavaScript が無効になっている場合のコンテンツを追加する

次に、JavaScript が無効になっている場合にのみ表示されるように、Web ページにいくつかのコンテンツを追加します。

<!doctype html>
<html>
  <head>
    <title>Using the Noscript Tag</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>

    <noscript>
      <p>Please enable JavaScript to view this webpage.</p>
    </noscript>

    <div id="myContent">
      <p>This content is only displayed when JavaScript is disabled.</p>
    </div>

    <script>
      document.getElementById("myContent").style.display = "none";
    </script>
  </body>
</html>

この例では、id 属性が myContent である <div> タグには、JavaScript が無効になっている場合に表示されるべきテキストが含まれています。JavaScript が有効になっている場合、このテキストは表示されません。なぜなら、HTML コード内の <script> タグが、HTML 要素の display プロパティを none に設定することでこのコンテンツを非表示にしているからです。

HTML コードを index.html に保存し、Web ブラウザで開きます。ブラウザで JavaScript を有効にしたり無効にしたりして、<noscript> タグがどのように機能するかを確認してみましょう。

`<noscript>` タグをカスタマイズする

必要に応じて <noscript> タグをカスタマイズできます。たとえば、CSS スタイルを追加してテキストを視覚的に魅力的にすることができます。

<noscript style="background-color: #ffcccc; padding: 20px;">
  <p>Please enable JavaScript to view this webpage.</p>
</noscript>

まとめ

このチュートリアルでは、HTML5 の <noscript> タグについて学び、ユーザーのブラウザ設定に関係なく、すべてのユーザーが Web ページにアクセスできるようにするためにどのように使用できるかを学びました。JavaScript が無効になっている場合にのみ表示されるコンテンツを追加する方法と、<noscript> タグの外観をカスタマイズする方法を学びました。<noscript> タグを使用することで、より包括的でアクセシブルな Web ページを作成できます。

HTML のスクリプト無効時のコンテンツ