<code>: CODE 要素
最終更新:2026-10-13
<code>CODE 要素
コンピュータコードの断片を表します。既定では等幅フォントで表示されます。
| カテゴリ | 書式 |
|---|---|
| コンテンツモデル | フレージングコンテンツ |
| 許可される親要素 | フレージングコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </code> タグ |
| ステータス | 標準 |
📝 構文
<code>コードの断片</code>
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認:
🌐 ブラウザサポート
| ブラウザ | |||||
|---|---|---|---|---|---|
| <code> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント: 複数行のコードは <code> を <pre> で囲むと改行とインデントが保持されます。
❓ よくある質問
Qcode と pre の違いは何ですか?
A
<code> はインラインコードをマークし、テキストの流れの中で表示されます。<pre> はソースの改行や空白をそのまま保持するので、コードブロック全体に向いています。両者はよく組み合わされ、<pre><code>…</code></pre> で複数行コードを表示します。pre がレイアウトを、code が意味を担当します。Qcode タグ内の山括弧はどう表示すればいいですか?
AHTML 実体でエスケープする必要があります。小なりは
<、大なりは > と書きます。たとえば <div> と表示したい場合、ソースでは <div> と書きます。そうしないとブラウザが山括弧の中身を本物のタグとして解釈してしまいます。Qcode タグにフォントを指定する必要はありますか?
Aブラウザは
<code> の内容をデフォルトで等幅フォント(monospace)で表示するので、通常は指定不要です。スタイルを統一したい場合は CSS の font-family で指定しますが、OS 間の差異に備えて完全な等幅フォールバックのスタックで書くのがおすすめです。