2022.11.16

【HTML入門】上付き文字、下付き文字の表現の仕方

山下生真

皆さんはべき乗などの浮つき文字を表現するときどのように設定をしていますか？
今回は「登録商標^©」（上付き文字）やH₂O（下付き文字）をHTMLで簡単にできる表現できる方法をお伝えします！

1 上付き文字は「sup要素」
2 上付き文字は「sub要素」
- 2.1 注意点

上付き文字は「sup要素」

HTMLで上付き文字を表現する時はsup要素を使います。
supとは「superscript」の略で上付き文字にしたいテキストをsup要素で囲みます。

上付き文字は「sub要素」

HTMLで下付き文字を表現する時はsub要素を使います。
suBとは「subscript」の略で上付き文字にしたいテキストをsub要素で囲みます。

注意点

supやsubで囲むだけで上付き、下付きを表現できて便利なのですがそれでも注意点があります。

それは文字の大きさの設定次第で、上付き、下付き文字の大きさも変わってしまうということです。
文字の大きさ次第では文字が小さくなりすぎてしまう可能性があるので注意が必要です。

その他にもCSSのvertical-alignやposition関係で表現も可能ですがコードの記述量が多くなったりレスポンシブにした際にレイアウトが崩れたりといった事があるので特別な事情がなければsupやsubを使った方が無難でしょう

山下生真

役員

建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。

このメンバーの記事を読むこのメンバーのプロフィール