はじめに
HTML のsupタグを使用すると、Web ページ上で上付き文字形式でテキストを表示できます。この実験では、supタグを使用して上付き文字を作成する方法を示します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080タブを更新して Web ページをプレビューできます。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
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 ページに簡単に上付き文字を追加できるようになりました。
