--- title: ': サンプル出力要素' slug: Web/HTML/Element/samp tags: - Element - HTML - HTML text-level semantics - Inline Sample - Reference - Sample Output - Sample Text - Web translation_of: Web/HTML/Element/samp ---
{{HTMLRef}}

HTML のサンプル要素 (<samp>) は、コンピュータープログラムからのサンプル出力を表す行内文字列を含めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント（{{interwiki("wikipedia", "en:Courier (typeface)", "Courier")}} や Lucida Console など）を使用して表示されます。

{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}
コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 {{no_tag_omission}}
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール すべて
DOM インターフェイス {{domxref("HTMLElement")}}

属性

この要素にはグローバル属性以外の属性はありません。

使用上のメモ

CSS 規則を定義して <samp> 要素におけるブラウザーの既定フォントを上書きすることができますが、ブラウザーの設定が指定した CSS よりも優先されることもあります。

既定のフォントを上書きする CSS は次のようになります。

samp {
  font-family: "Courier";
}

ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要であれば、代わりに {{HTMLElement("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>

結果の出力は次のようになります。

{{EmbedLiveSample("Basic_example", 650, 100)}}

ユーザー入力を含むサンプル出力

<samp> ブロックの中で {{HTMLElement("kbd")}} 要素を使用することで、ユーザーが入力した文字列を含んだ例を表現することができます。例えば、 Linux （または macOS）のコンソールセッションを表現したこのテキストを考えてみてください。

HTML

<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>

なお、 {{HTMLElement("span")}} を使用して、シェルのプロンプトやカーソルのような、サンプル文字列の中にある特定の部分の表示ができるようにしています。また、 <kbd> を使用して、サンプル文字列の中のプロンプトでユーザーが入力したコマンドを表現しています。

CSS

実現したい表示を達成するための CSS は次の通りです。

.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

これはプロンプトとカーソルにわずかに着色し、サンプル文字列の中のキー入力を太字にしています。

結果

結果の出力は次のようになります。

{{EmbedLiveSample("Sample_output_including_user_input", 650, 120)}}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-samp-element', '<samp>')}} {{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}} {{Spec2('HTML4.01')}}

ブラウザーの互換性

{{Compat("html.elements.samp")}}

関連情報