samp 要素

　samp要素は、プログラムなどからの出力を表します。例えば、Windowsのコマンドプロンプトや、Linuxなどのシェルの出力などをマークアップしたい場合に使えます。

samp 要素の概要

samp要素のマークアップ例


<kbd> ls /usr/local/www </kbd>と打ったら、<samp> ls: /usr/local/www: そのようなファイルやディレクトリはありません。</samp>と言われてしまった。

samp要素のマークアップ例のサンプル

ls /usr/local/www と打ったら、 ls: /usr/local/www: そのようなファイルやディレクトリはありません。と言われてしまった。

　シェルの状態をそのままマークアップしたい場合は、pre要素と samp要素で全体を囲み、キーボード入力文字列の部分を kbd要素でマークアップすると良いでしょう。スタイルシートと組み合わせることで、シェルを使った作業手順などをわかりやすく表現することができます。

pre要素と kbd要素を組み合わせたマークアップ例


<pre class="shell"><samp><span class="prompt">[root@www ~]#</span> <kbd>cat /proc/version</kbd>

Linux version 2.6.18-164.el5PAE (mockbuilder@builder16.centos.org) (gcc version 4.1.2 20080704 (Red Hat 4.1.2-46)) #1 SMP Thu Sep 3 04:10:44 EDT 2009

<span class="prompt">[root@www ~]#</span> <kbd>cat /etc/redhat-release</kbd>

CentOS release 5.3 (Final)</samp></pre>

スタイル例


pre.shell {
	background-color: black;
	color: #ffffff;
	font-family: Courier, "Courier New", monospace;
	overflow-x: auto;
	padding: 0.5em;
	border: 1px solid #999999;
}

pre.shell span.prompt {
	color: #999999;
}

pre.shell kbd {
	color: #ffffff;
	font-weight: bold;
}

pre要素と kbd要素を組み合わせたマークアップ例のサンプル

[root@www ~]# cat /proc/version
Linux version 2.6.18-164.el5PAE (mockbuilder@builder16.centos.org) (gcc version 4.1.2 20080704 (Red Hat 4.1.2-46)) #1 SMP Thu Sep 3 04:10:44 EDT 2009
[root@www ~]# cat /etc/redhat-release
CentOS release 5.3 (Final)

HTML

samp 要素の概要