code要素とpre要素の違い（まとめ）| CSS

code要素とpre要素の違いに関する調査結果（Chrome, Microsoft Edge, Firefox）をまとめます。

結果として、どのブラウザにおいても、code要素とpre要素のフォントは共通で等幅フォントでした。
さらに、pre要素の中でcodeタグを使うことの意味について確認しました。

code要素とpre要素の共通点と相違点

当然かも知れませんが、どのブラウザにおいても傾向は同じでした。

共通点はフォントです。

• Chrome: monospace
• Microsoft Edge: Consolas, MS Gothic
• Firefox: MS Gothic

しかも、これらは全て、文字の幅が等しい等幅フォントですね。
それに対し、文字ごとに異なる幅を持っているのがプロポーショナルフォントです（MS PGothicなど）。

相違点として重要なものを挙げます。

• code要素: インライン要素
• pre要素: ブロック要素

インライン要素は上下のマージン設定が意味を成さないんですよね。
各ブラウザのデフォルトCSSを見て下さい（ Chrome, Microsoft Edge, Firefox ）。
実際に、code要素にはマージン設定がありませんよね。

pre要素内でcodeタグを使う意味

ウェブ良く見かける、pre要素内でcodeタグを使う意味を確認します。

上段がpre要素のみ、下段がpre要素内でcodeタグを使った場合です。

どのブラウザでも、上段と下段に違いが見られません。
前節で確認したとおり、code要素とpre要素でフォントは共通だからです。
ウェブでは良く「pre要素内でcodeタグを使うことにより等幅フォントにする」といった記述を見かけますが、もしかして古い情報なのかも知れませんね。

おわりに

code要素とpre要素の違いについて各ブラウザで調査した結果をまとめました。
どのブラウザにおいても、code要素とpre要素のフォントは同じで、しかも、等幅フォントでした。

さらに、この結果を受け<pre>…</pre>と<pre><code>…</code></pre>の表示は同じであることを３つのブラウザで確認しました。
ただ、CSSの設定にもよりますので、実際に試してみて下さい。
その結果codeタグが不要であればpreタグのみにする、という方針が安全かと思います。

code要素とpre要素の違いについては、今回で一区切りにします。
では。

—
YouTube: ミサキさん

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)