タイトル: pre要素で整形済みテキストを表示する
SEOタイトル: HTML pre要素の使い方（空白保持 / code との組合せ / white-space / シンタックスハイライト）
| この記事の要点 |
|
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 で実装可能。