HTML の下付き文字をマスターする

はじめに

HTML では、<sub> タグは、単に印刷上の理由で下付き文字として表示することが望まれるインラインテキストを指定するために使用されます。このタグ内のコンテンツは通常、小さなテキストを使用して基準線を下げて表示されます。この実験では、HTML で <sub> タグを使用して下付き文字を表示する方法を学びます。

注: 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") subgraph Lab Skills html/basic_elems -.-> lab-70847{{"HTML の下付き文字"}} html/head_elems -.-> lab-70847{{"HTML の下付き文字"}} html/doc_flow -.-> lab-70847{{"HTML の下付き文字"}} html/inter_elems -.-> lab-70847{{"HTML の下付き文字"}} end

HTML のボイラープレートを追加する

index.html という名前の新しいファイルを作成します。

基本的な HTML 構造を作成するために、次のコードを index.html に追加します。

<!doctype html>
<html>
  <head>
    <title>HTML Sub Tag Lab</title>
  </head>
  <body></body>
</html>

サブタグを追加する

下付き文字を作成するには、<body> 要素の中に次のコードを追加します。

<p>My chemical formula is H<sub>2</sub>O.</p>

このコードは、「My chemical formula is H2O」というテキストを表示します。ここで、「2」は下付き文字として表示されます。

index.html ファイルを保存し、Web ブラウザで開いて出力を表示します。下付き文字の「H2O」が表示されるはずです。

まとめ

この実験では、HTML で <sub> タグを使用して下付き文字を表示する方法を学びました。これは、化学式や基準線を下げる必要のある他の種類のテキストを表示する際に便利です。この実験で示された手順に従えば、簡単に HTML コードに <sub> タグを追加して下付き文字を作成できます。