HTMLの要素に出力テキストの例を表示できる要素があるのをご存じですか？実はこのタグ1つで、ユーザに操作のヒントを与えることができる便利なタグなのです！
今回は、sampタグの
・sampタグと類似するoutput要素との違い
・smapタグの主な使い道
について説明します。
目次
sampタグとは
sampタグの読み方
sampタグ：（読み方）サンプルタグ
sampタグの説明
sampタグはHTMLで、プログラムの出力を例として表示するためのタグです。例として出力するのはテキストです。
sampタグで利用できる属性
sampタグでは以下の、HTML全要素で使用可能なグローバル属性のみが使用可能です。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
sampタグの基本的な使い方
sampタグの使い方
samp属性は、出力例として表示したいテキストを<samp></samp>タグで囲うだけで完成します。実行例を見てみると、pタグの通常テキストと比べ、『この部分だけ』の文字が小さく、フォントも異なっています。
See the Pen
samp属性 基本 by rabbittyu (@rabbittyu)
on CodePen.
sampタグと類似するoutput要素との違い
samp属性とよく似た使い方をする属性にoutput属性があります。決定的な違いは、何を出力するかどうかです。
・sampタグ -> テキストの出力例
・outputタグ -> JavaScriptによって生成された出力例（計算結果など）
sampタグの主な使い道
sampタグを使用してコンピュータの操作を表す
sampタグの使い道として最も有効なのが、コンピュータを操作するボタンに関する動作のサポートを与えるという使い方です。
これはsampタグ内のテキストのみ、サイズとフォントが異なるため、それを利用して『選択』『完了』『保存』など、コンピュータ操作に関するボタンの操作のヒントを与えます。
See the Pen
samp属性使用法1 by rabbittyu (@rabbittyu)
on CodePen.
sampタグとkbdタグを一緒に使用する
sampタグとkbdタグを一緒に使用することで、入力した文字列を例として表示することができます。kbdタグは、ユーザがキーボードから入力する内容の他、音声入力などによる文字入力を表すタグです。
ここでは『送信ボタン』をわかりやすく表示するために、送信ボタンの部分を青色のボタン風にCSSで装飾を与えています。
See the Pen
samp + kbd by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はユーザに対してサンプルのテキストを表示するsampタグについてご紹介しました。sampタグを使用することで、ユーザに対してより分かりやすく操作に関する情報のヘルプを与えることができます。
参考文献：
MDN web docks <samp>: サンプル出力要素
sampタグの意味と使い方 – できるネット
WEBページ作成リファレンス
＜samp＞プログラムによる出力結果のサンプルとして扱う
