<samp>: サンプル出力要素
試してみましょう
HTML のサンプル要素 (<samp>
) は、コンピュータープログラムからのサンプル出力を表す行内文字列を含めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント(Courier や Lucida Console など)を使用して表示されます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
属性
この要素にはグローバル属性以外の属性はありません。
使用上のメモ
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>
結果の出力は次のようになります。
ユーザー入力を含むサンプル出力
<samp>
ブロックの中で <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>
なお、 <span>
を使用して、シェルのプロンプトやカーソルのような、サンプル文字列の中にある特定の部分の表示ができるようにしています。また、 <kbd>
を使用して、サンプル文字列の中のプロンプトでユーザーが入力したコマンドを表現しています。
CSS
実現したい表示を達成するための CSS は次の通りです。
.prompt {
color: #b00;
}
samp > kbd {
font-weight: bold;
}
.cursor {
color: #00b;
}
これはプロンプトとカーソルにわずかに着色し、サンプル文字列の中のキー入力を太字にしています。
結果
結果の出力は次のようになります。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <samp> の定義 |
現行の標準 | |
HTML5 <samp> の定義 |
勧告 | |
HTML 4.01 Specification <samp> の定義 |
勧告 |
ブラウザーの互換性
BCD tables only load in the browser