catnose
catnose
HTMLの<samp>タグは、プログラムやコンピューターからの出力内容を表すために使います。
<p>Webページにアクセスしたときに<samp>このサイトは安全に接続できません</samp>と表示されてしまうことがあります。</p>
👆このように、パソコンやスマートフォンなどのコンピュータに表示されたメッセージを囲う形で使います。<samp>要素内のテキストは、デフォルトで等幅フォントで表示されます）。
😺のちほど解説しますが、フォントはCSSで簡単に変更できます。
sampタグの使い方
sampの使いどころ
たとえばブログやWebマガジンなどで、ソフトウェアの操作方法を記事にする場合には、ソフトウェアからの出力を文章に含めることがあると思います。
<p>もし<samp>失敗しました</samp>と表示された場合は、ブラウザをリロードしてください。</p>
👆そのような場合には<samp>を使うのが最適です。<samp>を使うことで、検索エンジンのボットなどに対して、その部分が「プログラムによる出力を表している」と伝えることができます。ただし、SEO効果があるかどうかは不明です。
段落やリストの中で使う
<samp>要素は記述コンテンツであり、段落などの文章の中で使われます。段落自体を<samp>で囲うことではできないので、注意しましょう。
<!-- 😿悪い例 -->
<samp>
<p>xxxxxx</p>
</samp>
<samp>
<ul>
<li>xxx<samp>xxx</samp>xxx</li>
</ul>
</samp>
<!-- 😺良い例 -->
<p><samp>xxxxxxxxx</samp></p>
<ul>
<li>xxx<samp>xxx</samp>xxx</li>
</ul>
👆段落やリスト、見出し自体を囲むような形で使うべきではありません。
ボタンや操作メニューにはkbdタグを使う
<samp>と混同しやすいHTMLタグに<kbd>があります。
<p>メニューを開き「<kbd>新規ファイル</kbd>」をクリックしましょう。</p>
👆ユーザーが操作できるもの（クリックしたり、タップしたりできるもの）には<kbd>を使います。
しかし、操作メニューやボタンは同時にコンピュータの出力内容（=<samp>の使いどころ）でもあります。この場合、<kbd>と<samp>のどちらを使うべきなのでしょうか。
合わせて使っても良いし、kbdだけでも良い
HTML 書き方1：入れ子にする
<p>メニューを開き「<kbd><samp>新規ファイル</samp></kbd>」をクリックしましょう。</p>
👆厳密には「システムが表示したメニューの項目やボタンには<kbd>と<samp>を合わせて使う」とされています。この例のように<kbd>に<samp>を入れ子にします。
HTML 書き方2：kbdだけ
<p>メニューを開き「<kbd>新規ファイル</kbd>」をクリックしましょう。</p>
👆ただし、HTMLの仕様書には「（<samp>なしで）<kbd>だけで十分」とも書かれています。どちらの書き方でも良いわけですね。
CSSでsampのスタイルを整える
デフォルトの表示
<p>もし<samp>失敗しました</samp>と表示されたら、ブラウザをリロードしてください。</p>
👆ブラウザデフォルトの<samp>の表示はあまり見やすいものではありません。デフォルトではfont-family: monospaceが指定されており、テキストが等幅フォントで表示されます。CSSでsamp { font-family: inherit; }と指定すれば、等幅フォントは解除できます。
サンプルCSS
<samp>を装飾する簡単なCSSサンプルを紹介します。お好みで調整してご利用ください。
samp {
font-family: inherit;/* 周囲と同じフォントに */
display: inline-block;
font-size: .9em; /* フォントサイズ */
line-height: 1.1;
padding: 0.3em 0.4em; /* テキスト周りの余白 */
margin: 0 0.2em; /* 左右の隙間 */
background-color: #e8e8e8; /* 背景色 */
border: solid 1px #c8cad2; /* 線 */
border-radius: 2px; /* 角の丸み */
}
<kbd>は「ユーザー入力」を表すものに幅広く使うことができます。パソコンやスマホの操作メニューやボタンに対しても<kbd>を使うのが最適です。