pre要素とコンピュータ関連
pre要素
次に紹介するのはpre要素です。
pre要素の意味は、整形済みテキストを表します。
これは、改行やスペースを用いて整えたテキストのことで、例えばアスキーアートや、他にもHTMLが使えない電子メールのテキストをそのまま表示したいときなどに利用されます。
というのも、HTMLでは、半角スペースやタブを複数並べても無視されて1つにまとめられます。というのも、次のようにインデントしてHTMLを書いた場合に余計なスペースが入っても困るからです。
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<p>test</p>
</body>
</html>
普段はHTMLでは改行も無視されますが、pre要素中ではbr要素が無くても改行が反映されます。
pre要素も、前回までに紹介したul,ol,table,blockquoteなどなどと同じようなブロック単位の要素です。だから、p要素の中に入れたりして使うことはできません。文中に整形済みテキストを挿入したい場合は、その前で一旦p要素をとじて、また文を再開するときに再び新しいp要素を作る必要があります。これは、リスト（ul要素,ol要素）などを文中に入れたい時も同じです。
pre要素
要素の種類
フロー・コンテンツ。
子
フレージング・コンテンツ。
意味
整形済みテキスト。
今までのblockquote,figure,detailsと違うのは、子がフレージング・コンテンツだということです。注意しましょう。
code要素
また、pre要素とよくセットで使われる要素があります。というのも、さっき紹介した他にもよく使われる「整形済みテキスト」があるのです。それはプログラム言語のコードです。見方によってはHTMLもその一種になるかもしれません。
そこで「プログラム言語のコード」を表す要素があるのです。それがcode要素です。
code要素
要素の種類
フレージング・コンテンツ。
子
フレージング・コンテンツ。
意味
コンピューターコード。
これは久々のフレージング・コンテンツの要素です。pre要素と一緒につかう場合、次のような感じで使えます。
<pre>
<code>
…
</code>
</pre>
他にも、文中でプログラム言語の用語（関数名など）を使いたい場合にcode要素を単体で使うこともあります。
samp要素・kbd要素
そして、もう1つpreと一緒に使われやすいのがsamp要素です。これは、コンピュータからの出力を表します。
samp要素
要素の種類
フレージング・コンテンツ。
子
フレージング・コンテンツ。
意味
コンピューターからの出力。
コンピュータからの出力が複数行に渡る場合に、samp要素をpre要素の中に入れて表現することができます。出力が普通の文であるとか、1行だけであったりすれば、samp要素を単体で使ったりすることができます。
ここでさらにもう1つ、kbd要素を紹介します。これはユーザーの入力を表します。例えば、次のように使います。
<p>Googleで<kbd>!</kbd>を検索したが、<samp><kbd>!</kbd>に一致する情報は見つかりませんでした。</samp>と表示された。</p>
「!に一致する情報は見つかりませんでした。」の部分がGoogleからの返答なので、samp要素になっています。検索する言葉としてユーザーが入力したのが「!」なので、これがkbd要素で囲まれています。
ここで注目すべきは、samp要素の中にkbd要素がネストされている点です。samp要素中の「!」がkbd要素によってマークアップされています。これは、「!」という文字もGoogleが出力したものですが、これはユーザーの入力により決定したものです。つまり、「ユーザーが入力した文字を出力している」ということでkbd要素で囲んでいるのです。
次に挙げる例はどうでしょう。
<kbd>Ctrl+V</kbd>で貼りつけができます。（Windowsの場合）
これは、「Ctrl+V」というキー入力をkbd要素でマークアップしています。ところで、「Ctrl+V」とは、「Ctrl」と「V」を同時に押すということです。つまり、「Ctrl+V」はもっと細かい単位に分解することができます。このとき、次のようにマークアップできます。
<kbd><kbd>Ctrl</kbd>+<kbd>V</kbd></kbd>で貼りつけができます。（Windowsの場合）
kbd要素の中にまたkbd要素が入っています。
さらにもう1つの例として、キーボードから自由に入力するのではなく、あらかじめ表示してあるメニューから選択するという場合があります。この場合にもkbdは使えます。すると、メニューはコンピュータ側が表示したものですから、次のようにできます。
新しいファイルを作るには、<kbd><samp>ファイル</samp></kbd>メニューから<kbd><samp>新規作成</samp></kbd>を選択します。
kbd要素の中にsamp要素が入っています。
kbd要素
要素の種類
フレージング・コンテンツ。
子
フレージング・コンテンツ。
意味
ユーザーの入力。
var要素
最後に紹介するのが、またもやフレージング・コンテンツのvar要素です。これは変数です。
数学の変数にもプログラミングの変数にも使用できます。
一辺の長さが<var>n</var>cmの正方形の面積は、<var>n</var><sup>2</sup>cm<sup>2</sup>です。
ここでもうひとつ、sup要素が登場しました。これは上付き文字です。これを実際に表示すると、一辺の長さがncmの正方形の面積は、n2cm2です。
となります。
つまり、数学では「2乗」を表すのに右上に「2」と書きますが、このように上に書く文字を上付き文字といいます。これを表すのがsup要素です。他に、下付きを表すsub要素もあります。これも、H<sub>2</sub>Oのように使えます。
ただ、このsupとsubは、数学における累乗とか、あるいは化学式とか、上付き・下付きにするのに意味を伴っていないといけません。装飾のために上付きに表示したいという場合にはsup要素は使えません。その点に注意しましょう。
var要素
要素の種類
フレージング・コンテンツ。
子
フレージング・コンテンツ。
意味
変数。
sup要素・sub要素
要素の種類
フレージング・コンテンツ。
子
フレージング・コンテンツ。
意味
上付き・下付き文字。