<samp>: サンプル出力要素

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

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

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

samp {
  font-family: "Courier";
}

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

<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 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 は次の通りです。

.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

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

結果

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

• 関連要素: <kbd>, <code>, <pre>
• <output> 要素: スクリプトが生成した出力のためのコンテナー