HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<code>
インラインでプログラムコードの断片をマークアップするための要素です。
info
概要
<code> 要素は、**プログラムコード、コンピュータコード、ファイル名、XML要素名**など、技術的な用語のインライン表記に使用されます。
この要素を使用すると、ブラウザはデフォルトで等幅フォント（monospace）で表示し、コードであることを視覚的に示します。
コードブロック全体を表示する場合は、通常 <pre> 要素の子要素として使用されます。
play_circle
デモ (静的表示)
HTML (Source)
<p>
JavaScriptで変数を宣言するには
<code>const myVar = 10;</code>
のように記述します。
</p>
<pre><code>
function greet(name) {
console.log(`Hello, ${name}!`);
}
</code></pre>
Preview (Result)
JavaScriptで変数を宣言するには
const myVar = 10;
のように記述します。
function greet(name) {
console.log(`Hello, ${name}!`);
}
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全てのHTML要素で使用できる共通の属性（class, id, lang, titleなど）のみを使用できます。 |
| N/A | <code> 要素固有の属性はありません。 |
code
実用例
1. インラインでのコード表記
<p>
CSSで要素を非表示にするには、
<code>display: none;</code>
を使用します。
</p>
2. コードブロックでの使用（<pre>と組み合わせる）
<pre><code class="language-html">
<!-- HTMLコードブロック -->
<p>Hello World</p>
</code></pre>
3. 変数名やファイル名などの表記
<p>
設定ファイル<code>config.ini</code>
を編集して、変数
<code>DB_HOST</code>
の値を変更してください。
</p>
lightbulb
知っておくべき重要事項
description
<pre> 要素との違い
一方、
<code> はインライン要素であり、**コードの意味**を示すために使われます。一方、
<pre> はブロック要素であり、**整形済みテキスト**（スペースや改行をそのまま表示）を示すために使われます。通常、複数行のコードを表示する場合は、両方を組み合わせて <pre><code>...</code></pre> の形式で使用します。
palette
スタイリング
ブラウザのデフォルトスタイルでは、
ブラウザのデフォルトスタイルでは、
<code> 要素は単に等幅フォントになるだけです。視認性を高めるため、背景色やテキスト色、パディングなどのCSSを追加して、コード部分が本文から際立つようにスタイリングすることが一般的です。