この記事の要点

<pre> は整形済みテキスト。空白・改行をそのまま表示し、等幅フォントで描画 コード例は <pre><code> でラップするのが慣例（pre が見た目、code が意味） CSS white-space: pre / pre-wrap / pre-line で空白の扱いを細かく制御 長い行ははみ出して横スクロール → overflow-x: auto + white-space: pre-wrap で対処 シンタックスハイライトは Prism.js / Highlight.js / Shiki。code に class="language-js" を付ける慣例

pre の基本

<pre>
function hello() {
    console.log("Hello, world!");
}
</pre>

通常の HTML では連続する空白や改行が 1 個分にまとめられますが、<pre> 内ではそのまま表示されます。ブラウザのデフォルトスタイルで等幅フォント（monospace）が使われます。

code との組合せ（推奨）

<!-- ✅ 推奨: 意味と見た目を分ける -->
<pre><code class="language-javascript">
function add(a, b) {
  return a + b;
}
</code></pre>

<!-- pre = 整形済みテキストの「ブロック」を表す
     code = ソースコードの「意味」を表す
     → スクリーンリーダーは「コードブロック」として扱う -->

要素	意味	デフォルト挙動
<pre>	整形済みテキスト（ブロック）	空白・改行保持 + 等幅
<code>	ソースコード（インライン）	等幅
<samp>	プログラム出力	等幅
<kbd>	キーボード入力	等幅
<var>	変数名	斜体

HTML 特殊文字のエスケープ

<pre> 内でも HTML としては解釈されるため、< や & はエスケープが必要:

  Hello





<div class="card">
  Hello
</div>

Markdown のコードブロックは内部で自動エスケープしてくれます。手書きで HTML を書く場合は htmlspecialchars() 相当の処理を通します:

<pre><code class="language-html"><?= htmlspecialchars($html, ENT_QUOTES, 'UTF-8') ?></code></pre>

CSS white-space の挙動

値	空白	改行	折返し
normal	まとめる	無視	する
nowrap	まとめる	無視	しない
pre	保持	保持	しない（はみ出す）
pre-wrap	保持	保持	する
pre-line	まとめる	保持	する
break-spaces	保持	保持	する（空白でも折返し）

<pre> 要素のデフォルトは white-space: pre 相当。長い行ははみ出るため、表示制御が重要です。

横スクロール vs 折り返し

/* パターン A: 横スクロール（コード表示の定番） */
pre {
  overflow-x: auto;     /* はみ出たら横スクロールバー */
  white-space: pre;
}

/* パターン B: 折り返し（モバイルで読みやすい） */
pre {
  white-space: pre-wrap;
  word-break: break-word;
}

/* パターン C: ハイブリッド（モバイル時だけ折返し） */
@media (max-width: 600px) {
  pre {
    white-space: pre-wrap;
  }
}

スタイリングのお手本

pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1em 1.2em;
  border-radius: 6px;
  overflow-x: auto;
  font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  margin: 1em 0;
}

pre code {
  background: none;
  padding: 0;
  font-family: inherit;
}

/* インラインの code（pre の外）は別スタイル */
:not(pre) > code {
  background: #f1f5f9;
  color: #be123c;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: .9em;
}

シンタックスハイライト

ライブラリ	特徴
Prism.js	軽量、プラグイン豊富、行番号 / コピーボタン対応
Highlight.js	言語自動検出、設定不要
Shiki	VS Code と同じ TextMate 文法。サーバ側で HTML 生成可
Starry-Night	GitHub と同じレンダリング

Prism の最小例

<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css" rel="stylesheet">

<pre><code class="language-javascript">
function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}
</code></pre>

<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
<!-- 言語自動ロード（推奨） -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.js"></script>

言語クラスの慣例

• Prism / Highlight.js / Markdown all 共通: class="language-XXX"
• 例: language-html, language-javascript, language-python, language-bash, language-sql, language-yaml, language-json
• Highlight.js は class="hljs language-XXX" も受け付ける

samp / kbd と組み合わせ

<!-- シェル例: 入力と出力を区別 -->
<pre><code>
<samp>$ </samp><kbd>npm install lodash</kbd>
<samp>added 1 package in 2s</samp>
</code></pre>

<!-- ショートカット説明 -->
<p>保存は <kbd>Ctrl</kbd> + <kbd>S</kbd> です。</p>

kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: ui-monospace, monospace;
  font-size: .85em;
}

samp {
  font-family: ui-monospace, monospace;
  color: #475569;
}

アクセシビリティ

• スクリーンリーダーは pre>code を「コードブロック」として認識する
• 長いコードには aria-label で「JavaScript のサンプルコード」のような意味的な見出しを付けると親切
• キーボードでスクロール可能にする: tabindex="0" + フォーカススタイルを付ける

  
function Button({ children }) {
  return <button>{children}</button>;
}
  

よくある間違い

• pre 内に空行が増える → ソース HTML の改行がそのまま反映される。タグの直後・直前は改行しないコツ
• code 単体でブロック扱い → <code> はインライン要素。複数行コードには 必ず <pre> でラップ
• Markdown のコードブロックがハイライトされない → 言語名指定 ```js を忘れている
• 横スクロールがスマホで見えない → スクロールバーが極小で気づかれない。::-webkit-scrollbar でデザイン

FAQ

Q: <pre> でタブ幅を変えたい
A: CSS で tab-size: 2;（または 4）を指定すれば、タブ文字の表示幅を制御できます。

Q: コピーボタンを付けたい
A: Prism の toolbar プラグインや、自前で navigator.clipboard.writeText() を呼ぶボタンを設置。

Q: 行番号を付けたい
A: Prism は class="line-numbers" を追加するだけ。CSS だけでも counter-increment で実装可能。