【HTML入門】上付き文字sup要素と下付き文字sub要素の使い方

こんにちは!侍エンジニア塾ブログ編集部のシホです!

突然ですが、

「上付き文字と下付き文字ってどうやってつけるの?」

と、お困りではありませんか?

上付き文字と下付き文字はHTMLで簡単に付けることができます!

また、CSSでも付けることができるので、今回はこちらのやり方も解説していきいと思います。

ぜひ参考にしてみてください!

HTMLで上付き文字と下付き文字を表示する

上付き文字、下付き文字とは?

まずは、上付き文字と下付き文字の説明をします。

上付き文字とは、 テキスト上付き文字 のように上部に付いた小さい文字のことです。
下付き文字とは、 テキスト下付き文字 のように下部に付いた小さい文字のことです。

どういう時に使うかというと、下のような計算式や化学記号などを表すときによく使われます。

<例>
5の3乗は53と表します。
水の化学記号はH2Oです。

ではさっそく、これらの上付き文字と下付き文字の付け方を解説していきます!

sup要素とsub要素の使い方

HTMLで上付き文字を付ける場合はsup要素を、下付き文字を付ける場合はsub要素を使います。

supとは「superscript」の略で、subとは「subscript」の略です。

上付き文字にしたいテキストを<sup> ~ <sub>で、下付き文字にしたいテキストを<sub> ~ <sub>で囲みます。

See the Pen LmeRZd by Shiho Sakai (@shiho-sakai) on CodePen.0

注意点

文字の大きさの設定次第で、上付き文字と下付き文字の大きさも変わります。

文字の大きさを小さく設定すると、上付き文字と下付き文字の大きさが小さくなり過ぎてしまう可能性があるので注意しましょう!

See the Pen yjppaO by Shiho Sakai (@shiho-sakai) on CodePen.0

CSSで上付き文字と下付き文字を表示する

では次に、上付き文字と下付き文字をCSSで付ける方法を解説します。

vertical-alignプロパティの使い方

CSSでは、「vertical-align」プロパティに「super」を指定すると上付き文字を、「sub」を指定すると下付き文字をつけることができます。

See the Pen odpzMQ by Shiho Sakai (@shiho-sakai) on CodePen.0

まとめ

いかがでしたでしょうか。

HTMLでもCSSでも上付き文字と下付き文字は簡単に付けることができるので、

ぜひ実践してみてくださいね!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説