codeタグ -プログラムのコードやコマンドを示す｜HTML辞典
<code>タグとは？
<code>タグは、HTML文書内でプログラムのコードやコマンドを示すためのタグです。
デフォルトでは等幅フォント（monospace）が適用され、可読性が向上します。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）
インライン要素として扱われ、短いコードスニペットを示すために使用されます。
閉じタグの有無
<code>は開始タグ（<code>）と閉じタグ（</code>）の両方が必要です。
基本的な記述方法
<code> を使用すると、テキストが等幅フォントで表示され、コードであることが明確になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>codeタグの例</title>
</head>
<body>
<p>変数を定義するには、<code>let x = 10;</code> のように記述します。</p>
</body>
</html>ポイント：
<code>は短いコードスニペットを表示するために使用される。- デフォルトで等幅フォントが適用されるため、コードの可読性が向上する。
使用できる主な属性
<code>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <code class="highlight">...</code> |
id | 一意の識別子を設定 | <code id="code-example">...</code> |
style | インラインスタイルを適用 | <code style="color: blue;">...</code> |
CSSを使ったデザイン変更
<code> のデフォルトのスタイルを変更したい場合、CSSを活用できます。
✅ カスタムスタイルの適用
code {
font-family: "Courier New", Courier, monospace;
background-color: #f4f4f4;
padding: 2px 4px;
border-radius: 4px;
}<p>このコードは <code>let x = 10;</code> です。</p><code> の適切な使用例
✅ 短いコードスニペットの表示
関数名や変数、短いコードを示すのに適切です。
<p>この関数を呼び出すには <code>myFunction()</code> を使用します。</p>✅ ターミナルコマンドの表示
コマンドラインで実行するコマンドを示す場合にも有効です。
<p>ファイルを一覧表示するには <code>ls -l</code> を使用してください。</p><code> の適切でない使用例（誤った使い方）
❌ 長いコードブロックに使うのはNG
長いコードブロックには <pre> と組み合わせるのが適切です。
<!-- NG：長いコードブロックに <code> を使用 -->
<code>
function hello() {
console.log("Hello, world!");
}
</code>✅ 正しい書き方（<pre> と <code> を組み合わせる）
<pre><code>
function hello() {
console.log("Hello, world!");
}
</code></pre><code> と他のタグの違い
| タグ | 役割 | 視覚的な変化 | 用途 |
|---|---|---|---|
<code> | 短いコードスニペットを示す | 等幅フォント | 変数・関数名・コマンド |
<pre> | 整形済みテキストを示す | インデント維持 | 長いコードブロック |
<kbd> | キーボード入力を示す | 等幅フォント | キー操作の説明 |
<samp> | プログラムの出力を示す | 等幅フォント | コマンド出力結果 |
使用上の注意点
✅ 短いコードスニペットにのみ使用する
- 長いコードは
<pre>と組み合わせることで、適切なフォーマットが維持される。
✅ CSSで適切にデザインを調整する
- 背景色やフォントを調整すると、より視認性が向上する。
関連タグ
<pre>– 整形済みテキスト（長いコードブロック向け）<kbd>– キーボード入力（ショートカットキーの説明）<samp>– プログラムの出力結果<var>– 数学・プログラミングにおける変数
まとめ
<code>タグは、HTML文書内で短いコードスニペットを示すためのタグ です。
等幅フォントが適用され、プログラムの変数や関数、コマンドラインの説明などに適しています。
長いコードブロックには <pre> と組み合わせて使用するのが適切です。
