サイト制作

HTMLのpreとcodeを一緒に使う理由｜改行の保持とコードの意味を分ける

慈愛妃きづな

2026-11-10

この記事には広告・アフィリエイトリンクが含まれます。

preは空白や改行を保つため、codeはコードであることを表すために使います。複数行のコード例では両者を組み合わせますが、HTMLの記号をそのまま置く点には注意が必要です。

複数行のコード例には、二つの役割があります

コードを記事へ載せるとき、文字を等幅にするだけでは、改行や字下げまで意図どおり残るとは限りません。codeは「これはコードです」という意味を示し、preは整形済みのテキストとして空白や改行を扱います。

複数行の例では、preの中へcodeを入れる組み合わせがよく使われます。文中の短い関数名などなら、codeだけで示す方法もあります。

preの中でもHTMLは構文として解釈されます。たとえばHTMLのタグ自体を教材として見せたい場合、山かっこの「<」などを適切にエスケープしなければ、説明用の文字が実際の要素として扱われてしまいます。

表示したい記号を文字参照で記述するなど、コードを安全にテキストとして出す処理が必要です。preで囲んだから自動的に無害な文字列になる、と考えないでください。

空白を保ったコードは、長い行が狭い画面からはみ出す場合があります。折り返すか、コード部分だけ横へスクロールできるようにするかは、用途に合わせてCSSで調整します。

私は、読者が実際にコピーする記事なら、見栄えだけでなくコピー後の文字も確かめたいです。改行、記号、字下げが意図どおり残るかを見れば、説明は正しいのに試せない、という困りごとを減らせます。