[32] その他のプログラム関連を示す samp、kbd、var、data要素

<samp>要素は、コンピュータープログラムなどからの出力のテキストであることを示します。
<kbd>要素は、ユーザーの入力のテキストである事を示します。
<var>要素は、変数であることを示します。
<data>要素は、その内容をvalue属性でマシン可読形式で提供します。

これらは 前々回の <code>要素 のように、プログラム関連のテキストを表示するための要素です。

使用する要素	<samp> 〜 </sanp> <kbd> 〜 </kbd> <var> 〜 </var> <data> 〜 </data>

本日のINDEX

1. <samp>を使ってみよう
2. <kbd>を使ってみよう
   1. <samp>要素や <kbd>要素同士とのネストの規則があります
3. <var>を使ってみよう
4. <data>を使ってみよう

参考：
The samp element - HTML 5.1 2nd Edition | W3C Recommendation
The kbd element - HTML 5.1 2nd Edition | W3C Recommendation
The var element - HTML 5.1 2nd Edition | W3C Recommendation
The data element - HTML 5.1 2nd Edition | W3C Recommendation

● 2017年11月：本記事に <data>要素を追加しました。

<samp>を使ってみよう

<samp>要素は、コンピュータープログラムなどからの出力のテキストであることを示します。
「samp」はsample（サンプル）の略。

まずプレビューを見てみましょう。
<samp>で囲んだ文字は、ブラウザのデフォルトスタイルでは等幅フォントになります。

間違ったIDを入力すると次のようなメッセージが表示されます。
Error : ユーザーIDが違います

HTMLはこちらです。

<p>
間違ったIDを入力すると次のようなメッセージが表示されます。<br>
<samp>Error : ユーザーIDが違います</samp></p>

<kbd>を使ってみよう

<kbd>要素は、ユーザーの入力のテキストである事を示します。通常はキーボード入力ですが、音声コマンドのような入力を表すために使うこともできます。
「kbd」はkeyboard（キーボード）の略です。

まずはプレビューを見てみましょう。
<kbd>で囲んだ文字は、<code>のときと同じでブラウザのデフォルトスタイルで等幅フォントになります。

ユーザーIDの欄に guest と入力してください。

HTMLはこちらです。

<p>
ユーザーIDの欄に <kbd>guest</kbd> と入力してください。
</p>

<samp>要素や <kbd>要素同士とのネストの規則があります

<kbd>要素は、<samp>要素とのネスト（入れ子）や、<kbd>要素同士のネストで、意味が定義されています。

<kbd>要素が 他の <kbd>要素内にネストされるとき：
内側の <kbd>要素は、実際のキーまたは入力単位を示す。

<p>
<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd> を押して、
文書を保存してください。</p>

<kbd>要素が <samp>要素内にネストされるとき：
<kbd>要素はシステムがエコーで返した入力を示す。

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

<samp>要素が <kbd>要素内にネストされるとき：
<kbd>要素はシステムの出力に基づく入力（例えばメニューアイテムの選択）を示す。

<p>
ジョージにりんごを食べさせたいなら, 次から選択してください
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd></p>

外側の <kbd>要素が入力ブロックを示し、内側の <kbd>要素が入力のキーを指示しています。その中にある <samp>要素によって、それがシステムによって表示されているテキストであることが示されています。

<var>を使ってみよう

<var>要素は、変数であることを示します。
「var」はvariable（変数）の略。

数式やプログラミングでの変数や、定数を表す識別子、量を表す記号、関数パラメーターなどに使います。単に本文中に出てくる変数をマークアップするのにも使えます。

<var>で囲んだテキストは、ブラウザのデフォルトスタイルでは イタリックで表示されます。

これはウィンドウをスクロールさせるJavaScriptの一部です。
window.scrollTo(Math.floor(x / 1.4), Math.floor(y / 1.4));
変数には、横方向には x が、縦方向には y が使われています。

HTMLはこちらです。

<p>
これはウィンドウをスクロールさせるJavaScriptの一部です。<br >
<code>window.scrollTo(Math.floor(x / 1.4), Math.floor(y / 1.4)); </code><br >
変数には、横方向には <var>x</var> が、縦方向には <var>y</var> が使われています。</p>

<data>を使ってみよう

<data>要素は、その内容をvalue属性で マシン可読形式（machine-readable）で提供します。
ヒト用の表示と、コンピュータ用のデータを同時に記載したい時に利用できます。
「data」は、そのまんま「データ」の意味です。

value属性が必須。value属性の値は、要素のコンテンツを「マシン可読形式」で表すものでなければいけません。

また、コンテンツが 日付（date-）または日付関連（time-related）なら、<data>要素ではなく <time>要素を使うように推奨されています。

サンプルです。
これは MDN - data要素 のページから引用しています。
商品のリストですが、<data>要素で商品の UPCコードも示しています。

<p>New Products</p>
<ul>
 <li><data value="3967381398">Mini Ketchup</data></li>
 <li><data value="3967381399">Jumbo Ketchup</data></li>
 <li><data value="3967381400">Mega Jumbo Ketchup</data></li>
</ul>

UPCコードとは、お店のレジのPOSシステムのコードです。バーコードをピッと読むアレ。
日本は EANコードか UPCコード。アメリカやカナダは JANコードか EANコードなんだそうです。

顧客管理システムでは、こんなふうに使えるかな。

<p>ユーザー</p>
<ul>
 <li><data id="user" value="171005132705">鈴木花子</data></li>
 <li><data id="user" value="171005132832">山田太郎</data></li>
 <li><data id="user" value="171005132844">斎藤弘</data></li>
</ul>

次回予告

次回は、<wbr>要素を使ってみましょう。
<wbr>要素は、長い単語（英語などでの）で、改行させたい位置をブラウザに指定する要素です。