上付き文字と下付き文字

数学や化学などで文字の上側または下側に表示される文字が上付き文字と下付き文字です。例えば次のようなものです。

上付文字の例 : y=ax²+b,  WebWord^TM
下付文字の例 : CH₃CH₂OH

上付き文字を使う場合にはsup要素を使います。

<sup>テキスト</sup>

下付き文字を使う場合にはsub要素を使います。

<sub>テキスト</sub>

sup要素とsub要素はインライン要素であり、上付き表示や下付き表示したいテキストなどをマークアップします。

サンプル

では簡単なサンプルを作成して試して見ます。(XHTML1.0 Transitional DTDで作成しています)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>上付き文字と下付き文字</title>
  </head>
  <body>

  <p>
  因数分解の例:
  </p>

  <p>
  x<sup>2</sup> + 2xy + y<sup>2</sup> = (x + y)<sup>2</sup><br />
  x<sup>2</sup> - y<sup>2</sup> = (x + y)(x - y)
  </p>

  <p>
  分子式の例:
  </p>

  <p>
  水 H<sub>2</sub>O<br />
  アンモニア NH<sub>3</sub>
  </p>

  </body>
</html>

実際にブラウザで表示してみると次のように表示されます。

p5-1

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。