【実務・中級編】pre要素とcode要素の組み合わせ – HTML実践ガイド

なぜ ` ` と `` を組み合わせるのか？――「なんとなく」を卒業するマークアップの作法

フロントエンドの現場で、エンジニアが最も頻繁に目にし、かつ意外と「正しく」使えていないのがコード表示のためのマークアップです。 Markdownを使えば自動的に変換されるので意識することは少ないかもしれませんが、CMSのテンプレートを組んだり、技術ブログのコンポーネントを設計したりする際、この構造の理解は避けて通れません。今回は、なぜ `

` と `` を組み合わせるのか、ブラウザは裏側で何を考えているのかを深掘りします。

「意味」と「見た目」の分離

結論から言えば、`` は「ここがコードである」というセマンティクス（意味）を付与し、`
` は「空白や改行をそのまま表示する」というフォーマットを定義するためにあります。

HTMLの仕様上、`
` 要素は「整形済みテキスト」を意味し、記述された空白や改行をそのままレンダリングします。しかし、`` 要素が「何らかのコードの断片」を指すことは、ブラウザに対して「ここはフォントを等幅にすべきだ」というヒントは与えますが、レイアウトの制御までは行いません。

つまり、この2つをネストさせることで、「コードという性質を持つテキストを、空白を維持した状態で表示する」という完璧なセマンティック構造が完成するわけです。

ブラウザの裏側で起きていること

ブラウザのデフォルトスタイルシートを見ると、面白いことがわかります。

多くのブラウザでは、`` には `font-family: monospace;` が当たっています。しかし、`` 単体では `white-space` プロパティが `normal` （改行を詰め、連続する空白を1つにする）のままです。これではコードのインデントが台無しになります。

一方で、`
` はデフォルトで `white-space: pre;` が適用されています。これにより、ソース内の改行やタブがそのまま反映されます。

この2つを組み合わせると、「セマンティクスとしてコードをマークアップし、かつ見た目として空白を保持する」という最強の布陣になるのです。これが、W3Cが推奨する標準的なパターンである理由です。

実務で使えるベストプラクティス：コピペ可能なCSS付きサンプル

現場では、ただ表示するだけでなく「はみ出さない」「読みやすい」というケアが不可欠です。以下に、モダンなフロントエンド環境でそのまま使えるサンプルコードを置いておきます。



  
    /

現場でよくある、きれいなログ出力関数

     /
    const logInfo = (message) => {
      const timestamp = new Date().toISOString();
      console.log(`[${timestamp}] INFO: ${message}`);
    };

    logInfo('システムが正常に起動しました');
  


先輩エンジニアからのTips
実務でコードを扱う際、「HTMLの実体参照」にはくれぐれも注意してください。例えば、`
` タグをそのまま `

` 内に書くと、ブラウザは「これはHTMLタグだ」と誤解してレンダリングしてしまいます。

必ず `<` を `<` に、`>` を `>` に変換するエスケープ処理を通すことを忘れないでください。VueやReactのようなモダンフレームワークを使っていればフレームワーク側がよしなにやってくれますが、静的サイトやレガシーな環境を触る際は、ここがバグの温床になります。
まとめ：小さな積み重ねが「信頼」になる
「たかが `
` と ``」と思うかもしれませんが、こうした細かなマークアップの積み重ねが、アクセシビリティやSEO、そして何より「コードを読みやすく提供する」という技術者としての誠実さに繋がります。

次回の実装では、ただの `
` で済ませず、ぜひこの「正しい構造」を選択してみてください。細かい部分に宿るこだわりこそが、一流のエンジニアを形作ります。