12.

HTML pre要素の使い方(空白保持 / code との組合せ / white-space / シンタックスハイライト)

編集
この記事の要点
  • 整形済みテキスト。空白・改行をそのまま表示し、等幅フォントで描画
  • コード例は
     でラップするのが慣例(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 の基本

function hello() {
    console.log("Hello, world!");
}

通常の HTML では連続する空白や改行が 1 個分にまとめられますが、

 内ではそのまま表示されます。ブラウザのデフォルトスタイルで等幅フォント(monospace)が使われます。

code との組合せ(推奨)



function add(a, b) {
  return a + b;
}
要素意味デフォルト挙動
整形済みテキスト(ブロック)空白・改行保持 + 等幅
ソースコード(インライン)等幅
プログラム出力等幅
キーボード入力等幅
変数名斜体

HTML 特殊文字のエスケープ

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



Hello

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

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

CSS white-space の挙動

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

 要素のデフォルトは 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言語自動検出、設定不要
ShikiVS Code と同じ TextMate 文法。サーバ側で HTML 生成可
Starry-NightGitHub と同じレンダリング

Prism の最小例




function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}

言語クラスの慣例

  • 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 と組み合わせ



$ npm install lodash
added 1 package in 2s

保存は Ctrl + S です。

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 単体でブロック扱い はインライン要素。複数行コードには 必ず
     でラップ
  • Markdown のコードブロックがハイライトされない → 言語名指定 ```js を忘れている
  • 横スクロールがスマホで見えない → スクロールバーが極小で気づかれない。::-webkit-scrollbar でデザイン

FAQ

Q:

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

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

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

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1~h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素(強調)の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素

最近更新/作成されたページ