1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
title: '<samp>: サンプル出力要素'
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
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML のサンプル要素</strong> (<strong><code><samp></code></strong>) は、コンピュータープログラムからのサンプル出力を表す行内文字列を含めるために使用されます。</span>内容は普通、ブラウザーの既定の等幅フォント（{{interwiki("wikipedia", "en:Courier (typeface)", "Courier")}} や Lucida Console など）を使用して表示されます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>すべて</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p>
<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
<p>CSS 規則を定義して <code><samp></code> 要素におけるブラウザーの既定フォントを上書きすることができますが、ブラウザーの設定が指定した CSS よりも優先されることもあります。</p>
<p>既定のフォントを上書きする CSS は次のようになります。</p>
<pre class="brush: css notranslate">samp {
font-family: "Courier";
}</pre>
<div class="note">
<p>ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要であれば、代わりに {{HTMLElement("output")}} 要素を使用してください。</p>
</div>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
<p>この単純な例では、段落にプログラムの出力の例を含めます。</p>
<pre class="brush: html notranslate"><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></pre>
<p>結果の出力は次のようになります。</p>
<p>{{EmbedLiveSample("Basic_example", 650, 100)}}</p>
<h3 id="Sample_output_including_user_input" name="Sample_output_including_user_input">ユーザー入力を含むサンプル出力</h3>
<p><code><samp></code> ブロックの中で {{HTMLElement("kbd")}} 要素を使用することで、ユーザーが入力した文字列を含んだ例を表現することができます。例えば、 Linux （または macOS）のコンソールセッションを表現したこのテキストを考えてみてください。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><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></pre>
<p>なお、 {{HTMLElement("span")}} を使用して、シェルのプロンプトやカーソルのような、サンプル文字列の中にある特定の部分の表示ができるようにしています。また、 <code><kbd></code> を使用して、サンプル文字列の中のプロンプトでユーザーが入力したコマンドを表現しています。</p>
<h4 id="CSS">CSS</h4>
<p>実現したい表示を達成するための CSS は次の通りです。</p>
<pre class="brush: css notranslate">.prompt {
color: #b00;
}
samp > kbd {
font-weight: bold;
}
.cursor {
color: #00b;
}</pre>
<p>これはプロンプトとカーソルにわずかに着色し、サンプル文字列の中のキー入力を太字にしています。</p>
<h4 id="Result" name="Result">結果</h4>
<p>結果の出力は次のようになります。</p>
<p>{{EmbedLiveSample("Sample_output_including_user_input", 650, 120)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-samp-element', '<samp>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("html.elements.samp")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>関連要素: {{HTMLElement("kbd")}}, {{HTMLElement("code")}}, {{HTMLElement("pre")}}</li>
<li>{{HTMLElement("output")}} 要素: スクリプトが生成した出力のためのコンテナー</li>
</ul>
|
