次のテキストをを表示 "こんにちは！"
<ここまでソースコード>
<ここから出力サンプル>
こんにちは！
<ここまで出力サンプル>
コンピュータプログラム言語のソースコード「code要素」
プログラム言語やスクリプト言語のソースコードというものを見たことはありませんか？
HTMLでソースコードということを表すには、「code要素」を使って表します。
<code>と</code>で囲んだ範囲のテキストがソースコードということになります。
ソースコードはわかりやすくするために行頭にタブや空白を使い、インデント(字下げ)を行います。
ですので、「code要素」は通常「pre要素」の中に使い、インデントをそのまま表示します。
なお、ソースコードだから「code要素」を使わなければいけない、ということではありません。
ここからここまでがソースコードです。ということを表したいときに使います。
ちなみに、「code要素」の「code」はそのままプログラムのコードという意味です。
コンピュータからの出力結果「samp要素」
プログラム言語のソースコード「code要素」があるならば、その出力結果もあります。
HTMLでコンピュータのプログラムなどの出力をあらわすには、「samp要素」を使って表します。
<samp>と</samp>で囲んだ範囲のテキストが出力結果ということになります。
「code要素」と同じで、出力結果だから「samp要素」を使わなければいけない、ということではありません。
ここからここまでが出力結果です。ということを表したいときに使います。
ちなみに、「samp要素」の「samp」はsampleの略で見本や標本という意味があります。
サンプル
今回説明した、「code要素」「samp要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
サンプルソースコード
<pre> <code> ここからプログラム 次のテキストを表示 "おはよう！" ここから ３回 くりかえし 次のテキストを表示 "こんにちは！" ここまでくりかえし ここから ２回 くりかえし 次のテキストを表示 "こんばんは！" ここまでくりかえし 次のテキストをを表示 ;"おやすみ！" ここまでプログラム </code> </pre> <p> 上のプログラムを実行すると以下のように出力されます。 </p> <samp> おはよう！<br> こんにちは！<br> こんにちは！<br> こんにちは！<br> こんばんは！<br> こんばんは！<br> おやすみ！<br> </samp>
（<br>とは「改行」を意味する要素です。）
（<p>とは「段落」を意味する要素です。）
表示結果
ここからプログラム
次のテキストを表示 "おはよう！"
ここから ３回 くりかえし
次のテキストを表示 "こんにちは！"
ここまでくりかえし
ここから ２回 くりかえし
次のテキストを表示 "こんばんは！"
ここまでくりかえし
次のテキストをを表示 "おやすみ！"
ここまでプログラム
上のプログラムを実行すると以下のように出力されます。
おはよう！
こんにちは！
こんにちは！
こんにちは！
こんばんは！
こんばんは！
おやすみ！
「code要素」と「samp要素」のまとめと次回記事について
今回説明した「code要素」と「samp要素」はいかがでしたでしょうか。
多分、ほとんど使わない要素だと思います。プログラミング系のサイトでも使っているかどうか…
こういった要素もあるんだな…程度に覚えておいてください。
次回は、改行する「br要素」と 改行を許可する「wbr要素」の説明をします。
以上、当サイト管理人のAsterismでした。