sampタグ 👉 プログラムの出力内容を表す

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>があります。

<kbd>は「ユーザー入力」を表すものに幅広く使うことができます。パソコンやスマホの操作メニューやボタンに対しても<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; /* 角の丸み */
}