ソースコードを美しく表示したい！ `pre` と `code` の「最強のペア」をマスターしよう

Web制作の学習を始めると、必ずと言っていいほどぶつかる壁があります。「あれ、ソースコードをブログやサイトに載せたいのに、改行が消えちゃった！」「全部同じフォントになっちゃう！」という悩みです。

大丈夫です、それはあなたが間違っているわけではありません。HTMLは本来、余計な空白や改行を「ギュッ」と圧縮して表示する性質があるからです。

そんなとき、コードを「書いた通りの姿」で表示してくれる、いわば「コードのための特等席」が `pre` 要素と `code` 要素の組み合わせです。今日は、この二つの役割について、お買い物の例えを交えながら優しく解説しますね。

—

1. なぜ「pre」と「code」を重ねるの？

まず、この二つの役割をイメージしてみましょう。

`code` 要素（中身）： これは「この中身はプログラミングのコードですよ」とブラウザに伝えるためのラベルです。お買い物で例えるなら、「割れ物注意」と書かれたシールのようなもの。
`pre` 要素（箱）： これは「中身の改行やスペースをそのまま保持してね」という指示を出す箱です。お買い物で言えば、「中身が崩れないように固定された配送ボックス」です。

HTMLでは、`code` だけだと「ここがコードだよ」とは伝わりますが、見た目は普通の文字と変わりません。そこに `pre` という「型崩れ防止ボックス」を被せることで、ようやく私たちが普段エディタで見ているような、美しいコード表示が完成するんです。

—

2. さっそく書いてみよう！

実際にコードを書いてみると、その違いがすぐにわかります。以下のコードをコピーして、ご自身のHTMLファイルで試してみてください。

  
    // JavaScriptのサンプルコード
    function sayHello() {
      console.log("こんにちは！"); // ここに注目！
    }
    
    // 改行も、スペースも、書いたままの姿で表示されます
    sayHello();

ここがポイント！

改行とスペース： `pre` の中では、あなたがキーボードで叩いた「Enter」や「Space」がそのまま表示されます。
フォント： `code` を使うと、多くのブラウザが自動的に「等幅フォント（文字の幅がすべて同じフォント）」に切り替えてくれます。これが、コードを見やすくする一番の秘訣です。

—

3. つまずきやすい「落とし穴」

初学者の頃、僕もよくやってしまった失敗があります。それは「記号の扱い」です。

`pre` や `code` の中に、HTMLのタグをそのまま書こうとすると、ブラウザが「あ、これHTMLの命令だな！」と勘違いして、画面が崩れてしまうことがあります。

例えば、`

こんにちは

` と表示したいのに、そのまま書くとブラウザが「見出しを作れ！」と命令されたと勘違いして、画面に見出しが表示されてしまうんです。

どうすればいいの？

そんな時は、「実体参照」という少し難しい名前の変換を使います。

`<` を書くときは `<` と書く
`>` を書くときは `>` と書く

「うわっ、難しそう…」と思いましたか？大丈夫です！今は「`pre`の中にHTMLを書くときは、ちょっと特別な書き方をする必要があるんだな」と頭の片隅に置いておくだけでOKです。

—

まとめ：あなたのコードに「特等席」を

`pre` と `code` を組み合わせることは、単なる決まり事ではありません。あなたの書いたコードを大切に扱い、見る人に「読みやすい！」と思ってもらうための「おもてなし」なんです。

`code` は「コードですよ」というラベル。
`pre` は「書いた通りに表示する」という箱。
この二つで、あなたの技術ブログや学習メモはぐっとプロっぽくなります。

最初は少し戸惑うかもしれませんが、何度か書いているうちに指が自然と覚えてくれますよ。まずはこのテンプレートをコピペして、あなたの好きなコードを一つ載せてみることから始めてみましょう！

何か分からないことがあれば、いつでもまた聞きに来てくださいね。一緒に一歩ずつ進んでいきましょう！

【入門編】pre要素とcode要素の組み合わせ – HTML実践ガイド