上付き文字：HTMLコンテンツを高める

はじめに

HTMLのsupタグを使用すると、Webページ上で上付き文字形式でテキストを表示できます。この実験では、supタグを使用して上付き文字を作成する方法を示します。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70851{{"HTMLの上付き文字"}} html/head_elems -.-> lab-70851{{"HTMLの上付き文字"}} html/lang_decl -.-> lab-70851{{"HTMLの上付き文字"}} html/text_dir -.-> lab-70851{{"HTMLの上付き文字"}} html/inter_elems -.-> lab-70851{{"HTMLの上付き文字"}} end

HTMLファイルのセットアップ

index.htmlという名前のHTMLファイルを作成し、基本的なHTML構造を設定します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body></body>
</html>

上付き文字の追加

HTMLファイルにsupタグを追加します。sup要素の開始タグと終了タグの間に、上付き文字として表示したいテキストを追加します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

上付き文字のスタイリング

CSSを使用してsupタグのフォントサイズと垂直位置を調整することができます。HTMLファイルに次のCSSコードを追加します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

数学記号の追加

上付き文字は数学記号の重要な構成要素です。supタグを使用して指数や累乗を表すことができます。たとえば、HTMLファイルに次のコードを追加します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>The value of 2<sup>3</sup> is 8.</p>
  </body>
</html>

まとめ

この実験では、HTMLのsupタグについて学びました。上付き文字を作成し、指数や累乗を表す方法を見ました。また、CSSを使ってsupタグをスタイリングする方法も学びました。この実験で習得したスキルを使えば、HTMLページに簡単に上付き文字を追加できるようになりました。