← カテゴリ一覧に戻る

コード表示

code, pre, kbd, samp, var

コンピュータ関連のテキストを意味的にマークアップする要素群。それぞれ「コード断片」「整形済みテキスト」「キーボード入力」「プログラム出力」「変数」と意味が異なる。

code — インラインコード

code 要素は文中に埋め込むコード断片に使う。インライン要素で、等幅フォントで表示される。

配列の長さを取得するには array.length プロパティを使います。

null と undefined は異なる値です。

CSSで display: flex を指定するとフレックスコンテナになります。

<p>
  配列の長さは <code>array.length</code> で取得します。
</p>

/* CSS */
code {
  font-family: monospace;
  background: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

pre + code — コードブロック

pre（preformatted text）はスペース・改行をそのまま保持するブロック要素。code と組み合わせて複数行のコードブロックを作る。

function greet(name) {
  if (!name) {
    return "Hello, World!";
  }
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // Hello, Alice!
<pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
</code></pre>

/* 注意: pre 内の < > & は HTML エンティティに変換が必要 */
/* < → &lt;   > → &gt;   & → &amp; */

<pre><code>&lt;div class="container"&gt;
  &lt;p&gt;Hello&lt;/p&gt;
&lt;/div&gt;
</code></pre>

kbd / samp / var — 入力・出力・変数

それぞれ「キーボード操作」「プログラムの出力結果」「数式や変数名」を意味的に示す。等幅フォントで表示されるが、意味が異なる。

kbd — キーボード入力

ファイルを保存するには Ctrl + S を押してください。

samp — プログラム出力

コマンドを実行すると次のように出力されます：

$ node index.js Hello, Alice! Process exited with code 0

var — 変数・数式

面積 A は 半径 r の 2 乗に π を乗じた値、すなわちA = πr² です。

関数 f(x) の戻り値を変数 result に格納します。

<!-- kbd: キーボード操作 -->
<p><kbd>Ctrl</kbd> + <kbd>S</kbd> で保存</p>

<!-- samp: プログラムの出力 -->
<samp>Hello, World!</samp>

<!-- var: 変数・数学記号 -->
<p>面積 <var>A</var> = π<var>r</var>²</p>

/* CSS でスタイリング例 */
kbd {
  border: 1px solid #d1d5db;
  border-bottom: 3px solid #9ca3af;
  border-radius: 4px;
  padding: 1px 6px;
  background: #f9fafb;
}
samp { color: #16a34a; }
var  { font-style: italic; color: #6366f1; }

比較表: 5つのコード関連要素

要素意味種別典型的な使い方デフォルト表示
codeコード断片インライン変数名、関数名、HTMLタグ名等幅フォント
pre整形済みテキストブロック複数行コード（code と組合せ）空白・改行を保持
kbdキーボード入力インラインショートカットキー、コマンド入力等幅フォント
sampプログラム出力インラインコマンドの実行結果、エラーメッセージ等幅フォント
var変数・数式の記号インライン数学の変数、プログラムの変数名イタリック体

Tips: pre ブロック内の HTML エンティティとエスケープ

  • pre 内に HTML コードを表示したい場合、< は &lt;、> は &gt;、& は &amp; にエスケープする必要がある。
  • シンタックスハイライトには Prism.js や highlight.js などのライブラリを使うのが一般的。NEWShiki はサーバーサイドでハイライト可能でNext.js との相性が良い。
  • pre 単体でも空白・改行を保持するが、pre + code と組み合わせることで意味的に正しいマークアップになる。
  • kbd・samp・var はデフォルトスタイルが地味なため、CSS でキーキャップ風スタイルなどを追加するとユーザーが意味を把握しやすくなる。

🤖 AIプロンプトテンプレート

以下の要件を満たす、`<code>` と `<pre>` を使ったコードブロック表示のHTML・CSSサンプルを作成してください。

- インラインコードは `<code>`、ブロックコードは `<pre><code>` で記述すること
- `language-*` クラスを使ったシンタックスハイライトの準備を示すこと
- タブ・スペースのインデントが崩れないよう `white-space: pre` を活用すること
- コードのコピーボタンUI（見た目のみ可）を含めること
- `<kbd>`（キー入力）・`<samp>`（出力）との使い分けも示すこと

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo