HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのコンピュータコード用要素とは？kbd・pre・code・var・sampの使い方を解説

Webページ上にコンピュータのコードやプログラム関連のテキストを表示するために、HTMLにはいくつかの専用要素が用意されています。この記事では、代表的な以下の5つの要素について、サンプルコードと出力結果をもとにひとつずつわかりやすく解説します。

  • <kbd>：キーボード入力
  • <pre>：整形済みテキスト
  • <code>：プログラムコード
  • <var>：数式の変数
  • <samp>：プログラムの出力例

HTMLの<kbd>要素（キーボード入力）

<kbd>タグは、キーボードからの入力を表すための要素です。ユーザーにキーボードで入力してもらいたい内容を示すときに使用します。たとえば、コピーの「Ctrl+C」や切り取りの「Ctrl+X」、終了の「Esc」といったショートカットキーを表記する際に便利です。ブラウザの既定スタイルでは等幅フォントで表示されます。

以下は、<kbd>タグを実装したサンプルコードです。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>Shortcut Keys</h2>
<p>Use the following shortcut keys −</p>
<p><strong>Cut</strong> − <kbd>CTRL</kbd>+<KBD>X</kbd></p>
<p><strong>Copy</strong> − <kbd>CTRL</kbd>+<KBD>C</kbd></p>
<p><strong>Paste</strong> − <kbd>CTRL</kbd>+<KBD>V</kbd></p>
<p><strong>Undo</strong> − <kbd>CTRL</kbd>+<KBD>Z</kbd></p>
</body>
</html>

出力結果

HTMLのコンピュータコード用要素とは？kbd・pre・code・var・sampの使い方を解説

ショートカットキーの一覧が表示され、「CTRL+X」「CTRL+C」などのキー部分が等幅フォントで強調されます。

HTMLの<pre>要素（整形済みテキスト）

HTMLの<pre>タグは、整形済みテキストをそのまま表示するための要素です。タグ内に記述した半角スペースや改行はすべて保持され、HTMLコードに書いた通りのレイアウトがそのままWebページ上に再現されます。また、固定幅フォント（等幅フォント）で表示される点も特徴です。

以下は、<pre>タグを実装したサンプルコードです。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<pre>
    This is a demo text
    and will appear
    in the same format as
    it
    is visible
    here. The pre tag displays
    the text in a fixed-width
    font. It preserves
    both spaces and
    line breaks as you can see
    here.
</pre>
</body>
</html>

出力結果

HTMLのコンピュータコード用要素とは？kbd・pre・code・var・sampの使い方を解説

改行やインデント（スペース）が崩れることなく、コードに記述したとおりの体裁でテキストが表示されているのがわかります。

HTMLの<code>要素（プログラムコード）

<code>タグは、HTML文書内でプログラムのコードを整形して表示するための要素です。たとえば、C++やJavaなどのソースコードをWebページ上に適切な形式で示したい場合に活用できます。等幅フォントで表示されるため、コードが読みやすくなります。

以下は、<code>要素を実装したサンプルコードです。

コード例

<!DOCTYPE html>
<html>
<body>
<h1>Header Files</h1>
<h2>C++</h2>
<code>
    #include <iostream>
</code>
<h2>C</h2>
<code>
    #include <stdio>
</code>
</body>
</html>

出力結果

HTMLのコンピュータコード用要素とは？kbd・pre・code・var・sampの使い方を解説

#includeから始まるヘッダファイルの読み込み行が、コードらしい等幅フォントで表示されます。

HTMLの<var>要素（数式の変数）

HTMLの<var>要素は、数式や計算式の中の変数を表すための要素です。ブラウザの既定スタイルではイタリック体（斜体）で表示され、数学的な表現を自然に見せることができます。

以下は、<var>タグを実装したサンプルコードです。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>Mathematical Equation</h2>
Sample equation − <var>2x</var> - <var>2z</var> = <var>3y</var> + 9
</body>
</html>

出力結果

HTMLのコンピュータコード用要素とは？kbd・pre・code・var・sampの使い方を解説

数式の変数部分（2x、2z、3y）が斜体で表示され、数式らしい見た目になります。

HTMLの<samp>要素（プログラムの出力例）

HTMLの<samp>タグは、<em>や<code>、<strong>などと同じフレーズタグの一種です。プログラムが出力した結果の例（サンプル出力）を表すために使用し、ブラウザの既定スタイルでは等幅フォントで表示されます。

以下は、<samp>要素を実装したサンプルコードです。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>Exam Results</h2>
<p><s>Result would be announced on 6th June.</s></p>
<samp>New date for results are 7th June.</samp>
</body>
</html>

出力結果

HTMLのコンピュータコード用要素とは？kbd・pre・code・var・sampの使い方を解説

取り消し線（<s>）で示された旧情報に対して、<samp>で囲まれた新しい出力メッセージが等幅フォントで表示されます。

まとめ

コード系の要素は、用途に応じて正しく使い分けることが大切です。キーボード入力には<kbd>、整形済みテキストには<pre>、プログラムコードには<code>、数式の変数には<var>、出力例には<samp>を使い分けることで、意味を持ったセマンティックなHTMLになり、文章全体の可読性も大きく向上します。特に長いソースコードを載せる場合は、<pre>と<code>を組み合わせて使うと、改行・インデントを保ちながらコードを美しく表示できるのでおすすめです。

  1. HTMLのブロック要素とインライン要素の違いをわかりやすく解説

    はじめにHTMLの要素は、その表示方法によって「ブロック要素」と「インライン要素」の2種類に大きく分けられます。この2つの違いを理解することは、Webページのレイアウトを思い通りに組むための第一歩です。本記事では、それぞれの特徴と具体的なコード例を使って、わかりやすく解説します。ブロック要素（Block Elements）とはブロック要素は、前後に改行が入ったかのように表示される要素です。また、親要素の利用可能な幅いっぱいまで占めるという特徴があります。代表的なブロック要素には以下のようなものがあります。<h1>〜<h6>（見出し）<p>（段落）<ar

  2. Spotifyのエラーコード18を解決する方法【Windows対応ガイド】

    Spotifyのエラーコード18とは？発生する原因と症状Spotifyは世界でも屈指の人気を誇る音楽ストリーミングサービスで、パソコンから手軽に音楽を楽しめるよう専用のデスクトップアプリが提供されています。ところが、多くのWindowsユーザーから「Spotifyのインストール時にエラーコード18が表示される」という報告が寄せられています。エラーコード18が表示されるときには、必ず次のようなメッセージが伴います。「書き込むファイルが別のプロセスによって使用されているため、インストーラーはSpotifyをインストールできません。Spotifyが実行されていないことを確認して、再試行してください。