[20] 上付き文字と下付き文字を使おう(sup, sub)

最終更新日:2017年11月02日  (初回投稿日:2011年08月25日)

今回は「上付き文字」を表す <sup>要素「下付き文字」を表す <sub>要素を使いましょう。

使用する要素 <sup> 〜 </sup>
<sub> 〜 </sub>

「sup」は「SuperScript」の略、そのまんま「上付き文字」のこと。
「sub」は「SubScript」の略で、これもそのまんま「下付き文字」の意味です。

両方とも大昔からある要素なので、どのブラウザも対応しています。

<sup> と <sub> の基本構造

構造はこれだけ。めっちゃ簡単ですね。

<sup>上付き文字にしたいテキスト</sup>
<sub>下付き文字にしたいテキスト</sub>

<sup>で上付き文字を指定しよう

上付き文字とは、下のサンプルのようにデフォルトの文字より小さい文字でちょっと上につくもの。
(わかりやすいように上付き文字を赤くしています。<sup>で文字色は変わりません。念のため)

(累乗の場合)x2 − 3x + 2 = (x − 1)(x − 2)
(平方・立方の単位)120m2 30cm3
(トレードマークとか)インテル® CoreTM

HTMLはこちらです

(累乗の場合)x<sup>2</sup> − 3x + 2 = (x − 1)(x − 2)<br>
(平方・立方の単位)120m<sup>2</sup> 30cm<sup>3</sup><br>
(トレードマークとか)インテル® Core<sup>TM</sup>

<sub>で下付き文字を指定しよう

下付き文字とは、デフォルトの文字より小さい文字でちょっと下につくもの。
(わかりやすいように下付き文字を赤くしています。<sub>で文字色は変わりません。念のため)

(分子式とか)CO2 H2O C2H6O

HTMLはこちらです

(分子式とか)CO<sub>2</sub> H<sub>2</sub>O C<sub>2</sub>H<sub>6</sub>O

<sup> と <sub> の覚え方(余談ですが)

HTMLで 70m2 って書きたかったり、二酸化炭素をCO2って書きたいとき、この <sup> と <sub> を覚えていると ほんっとに便利です。

ただ、非常に似てて どっちがどっちか覚えにくい。

私は「Super は上向き、Sub は下向き」などと意味で覚えています。

<sup> の「p」と <sub> の「b」のカタチから「◯が上に付いてるのが上付、下なのが下付き」と言ってる人もいたなあ。

まあ、どっちがどっちかわからないだけなら、一回書いてブラウザで見てみりゃイイんです。<sup> と <sub> を覚えていることが一番大事だったりしますwww

次回予告

次回は、 文章中の単語やフレーズを強調したいときに使う要素について。
重要性を表す<strong> と、強調を表す<em> の違いを見てみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.