このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<samp>: サンプル出力要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<samp> はHTML の要素で、コンピュータープログラムからのサンプル出力を表すインラインのテキストを収めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント（Courier や Lucida Console など）を使用して表示されます。
試してみましょう
<p>I was trying to boot my computer, but I got this hilarious message:</p><p> <samp>Keyboard not found <br />Press F1 to continue</samp></p>samp { font-weight: bold;}属性
この要素にはグローバル属性以外の属性はありません。
使用上のメモ
CSS ルールを定義することで、<samp> 要素におけるブラウザーの既定フォントを上書きすることができますが、ブラウザーの設定が指定した CSS よりも優先されることもあります。
CSS で既定のフォントを上書きするには、次のようにします。
samp { font-family: "Courier";}メモ:ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要な場合は、代わりに<output> 要素を使用してください。
例
基本的な例
この単純な例では、段落にプログラムの出力の例を含めます。
<p> When the process is complete, the utility will output the text <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to the next step.</p>結果の出力は次のようになります。
ユーザー入力を含むサンプル出力
<kbd> 要素を<samp> ブロックの中で使用することで、ユーザーが入力した文字列を含んだ例を表現することができます。例えば、Linux （または macOS）のコンソールセッションを表現したこのテキストを考えてみてください。
HTML
<pre><samp><span>mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62<span>mike@interwebz:~$</span> <span>█</span></samp></pre>なお、<span> を使用して、シェルのプロンプトやカーソルのような、サンプル文字列の中にある特定の部分の表示ができるようにしています。また、<kbd> を使用して、サンプル文字列の中のプロンプトでユーザーが入力したコマンドを表現しています。
CSS
実現したい表示を達成するための CSS は次の通りです。
.prompt { color: #b00;}samp > kbd { font-weight: bold;}.cursor { color: #00b;}これはプロンプトとカーソルにわずかに着色し、サンプル文字列の中のキー入力を太字にしています。
結果
結果の出力は次のようになります。
技術的概要
| コンテンツカテゴリー | フローコンテンツ,記述コンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML # the-samp-element |