HTML `<samp>` サンプル出力要素

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

<samp> は HTML の要素で、コンピュータープログラムからのサンプル出力を表すインラインのテキストを収めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント（Courier や Lucida Console など）を使用して表示されます。

試してみましょう

<p>パソコンを起動しようとしたところ、こんな笑えるメッセージが表示されました。</p>

<p>
  <samp>Keyboard not found <br />Press F1 to continue</samp>
</p>

samp {
  font-weight: bold;
}

属性

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

使用上のメモ

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

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

css

samp {
  font-family: "Courier";
}

メモ: ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要な場合は、代わりに <output> 要素を使用してください。

例

基本的な例

この基本的な例では、段落にプログラムの出力の例を含めます。

html

<p>
  処理が完了すると、このユーティリティから「<samp>スキャンが完了しました。<em>N</em> 件の結果が見つかりました。</samp>」というテキストが出力されます。その後、次の手順に進むことができます。
</p>

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

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

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

HTML

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>

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

CSS

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

css

.prompt {
  color: #bb0000;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #0000bb;
}

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

結果

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

技術的概要

コンテンツカテゴリー	フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容	記述コンテンツ
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール	`generic`
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLElement`