過去バージョン

基本構文

配列の長さは arr.length で取得できます。

関数 strlen() は文字数を返します。

HTML タグ <p> は段落を表します。

ブラウザのデフォルトスタイルで等幅フォントのインライン表示になります。

複数行のコード — pre と組み合わせる

code 要素単体はインラインで空白や改行が圧縮されるため、複数行のコードを書くときは

 でラップするのが定番です。

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

console.log(greet("Alice"));

class="language-xxx" は highlight.js や Prism.js といったシンタックスハイライト ライブラリの慣習で、HTML5 仕様でも推奨の書き方です。

HTML 特殊文字のエスケープ

code 要素の中でも HTML パーサーは動作するため、< > & はそのまま書くとタグや実体として解釈されてしまいます。HTML エンティティに変換が必要です。


文字
エンティティ

<
<
>
>
&
&
"
"
'
'



CSS でのスタイリング
code {
    font-family: "JetBrains Mono", Consolas, Menlo, monospace;
    font-size: 0.95em;
    padding: 0.15em 0.4em;
    background: #f4f4f5;
    color: #d63384;
    border-radius: 4px;
}

pre code {
    /* pre 内では背景や余白をリセット */
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: 1em;
}

pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    line-height: 1.5;
}
似た要素との使い分け


要素
意味
例

プログラムコード
arr.length
ユーザーのキー入力
Ctrl + C
プログラムの出力
Permission denied
変数名 / 数式の変数
x
改行・空白を保持する整形済みテキスト
複数行コード



組み合わせ例
関数 greet(name) を呼び出すと Hello, Alice! と表示されます。

キャンセルするには Ctrl+C を押します。
アクセシビリティ


code 要素はセマンティクスを伝えるため、見た目だけ目的でも span より優れる
スクリーンリーダーによっては「コード」と読み上げてくれる
長いコード片は aria-label や figure + figcaption でラベル付けすると親切
横スクロールが必要なコードブロックは overflow-x: auto + キーボードフォーカス可能にする


Markdown との関係

Markdown のバッククォート記法 `code` は HTML に変換されるときそのまま  要素になります。フェンスドコードブロック ```js ... ``` は 
 に展開されるのが一般的です。

インライン: `arr.length`

```javascript
function greet(name) {
    return `Hello, ${name}!`;
}
```
SEO とセマンティクス


検索エンジンは  要素のテキストをコード片として認識する

技術記事では関数名・API 名を  で囲むと検索ヒット率が向上しやすい

記事内のキーワード密度を意図的に増やしたい関数名・クラス名は  で明示

schema.org の SoftwareSourceCode と組み合わせると構造化データとしても扱える


よくある実装ミス


ミス
対処

< をそのまま書いて HTML 崩壊
< にエスケープ
 無しで改行が消える
 の入れ子に
長すぎる行で横はみ出し
親の pre に overflow-x: auto
等幅にならない
CSS でフォント未指定。UA スタイル依存は危険
コピーしづらい
クリップボードコピーボタンを JS で追加



ハイライト ライブラリの主な選択肢


ライブラリ
特徴

highlight.js
自動言語検出。シンプルで導入が早い
Prism.js
軽量・プラグイン豊富。React/Vue との相性が良い
Shiki
VS Code と同じテーマ。サーバー側で事前ハイライト推奨
CodeMirror / Monaco
編集可能なエディタ向け (ハイライト単体目的ではオーバースペック)



FAQ

Q:  と  の違い

A:  は HTML5 で廃止。等幅表示は CSS の font-family: monospace で行い、意味は  など適切な要素を使います。


Q: 改行を保持したい

A:  単体ではダメ。
... でラップするか、CSS で white-space: pre を当てます。


Q: シンタックスハイライト ライブラリは何を使うべき？

A: SSR 環境では highlight.js / Prism.js / Shiki が定番。Shiki は VS Code 同等のテーマ品質。

Q: コピーボタンを付けたい

A: navigator.clipboard.writeText() で実装できます。pre 要素内に絶対配置でボタンを置くのが定番 UI。

Q: 言語クラスは必須？

A: 必須ではありませんが、シンタックスハイライトとスクリーンリーダーへのヒントになります。class="language-XXX" は HTML5 仕様で推奨。

関連


pre 要素 — 整形済みテキストブロック
kbd 要素 — キーボード入力
samp 要素 — プログラムの出力
var 要素 — 変数名・数式の変数