はじめに
HTMLのsup
タグを使用すると、Webページ上で上付き文字形式でテキストを表示できます。この実験では、sup
タグを使用して上付き文字を作成する方法を示します。
注:
index.html
でコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でWebサービスを実行します。その後、Web 8080タブを更新してWebページをプレビューできます。
HTMLのsup
タグを使用すると、Webページ上で上付き文字形式でテキストを表示できます。この実験では、sup
タグを使用して上付き文字を作成する方法を示します。
注:
index.html
でコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でWebサービスを実行します。その後、Web 8080タブを更新してWebページをプレビューできます。
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ページに簡単に上付き文字を追加できるようになりました。