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

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

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

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

上付き文字、下付き文字の書き方はとても単純。大昔からある要素なので、どのブラウザも対応しています。(なので本日のサンプルはありません。記事中でサンプルを作っていきます。)

上付き文字、下付き文字の基本構造

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

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

<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>で下付き文字を指定しよう

下付き文字とは、デフォルトの文字より小さい文字でちょっと下につくもの。

(分子式とか)CO2 H2O C2H6O

HTMLソースはこちらです

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

次回予告

いかがでしたか?
HTMLで面積の単位 m2を使ったり、二酸化炭素をCO2って書きたいときがありますよね。
そんなときにこの<sup><sub>を覚えているとマジで便利です。

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2017/03 | 03
- - - 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 31 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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