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タグを使った場合です。

Chrome
Microsoft Edge
Firefox

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

おわりに

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

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

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


YouTube: ミサキさん

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

コメント

  1. […] code要素との比較の観点ですが、こちらの記事でもpre要素について述べています。興味がればご覧くださいませ。 […]

タイトルとURLをコピーしました