XHTML/CSS・トップ | CSSプロパティ・目次

●pre要素とcode要素を使って、ソースを表示する

 code要素はソースコードを表示させるときに使われますが、ここでは pre要素と組み合わせた解説をします。pre要素は字下げや改行など、整形したソースをそのままの形で表示させます。具体的にはHTMLソースに記載した<pre>〜</pre>のタグで囲まれた要素内容としての〜部分を記載した通りに表示します。

【サンプル】

※表示させたいソースが以下だとします。↓

body {
 background-color: #000000;
 color: #ffffff;
 margin-top: 5%;
 margin-bottom: 10%;
}

【CSS】↓

pre {
  background-color: #ffffff;
  color: #000000;
  margin-left: 5%;
  margin-right: 30%;
}
code {
  font-family: "MS 明朝", serif;
  font-weight: bold;
  font-size: 1em;
  line-height: 1.2;
}

【HTMLソース】↓

<pre><code>
body {
 background-color: #000000;
 color: #ffffff;
 margin-top: 5%;
 margin-bottom: 10%;
}
</code></pre>

【解説】↑↓

 pre要素を使わないで、通常の段落としてのpタグで囲った場合、上のソースコードは、以下のHTMLソースとなります。

<p>&lt;pre&gt;&lt;code&gt;<br>
body {<br>
 background-color: #000000;<br>
 color: #ffffff;<br>
 margin-top: 5%;<br>
 margin-bottom: 10%;<br>
}<br>
&lt;/code&gt;&lt;/pre&gt;</p>

 pre要素を使えば、ページソースが大幅にシンプルになる利点がありますが、注意する点もあります。例えば、margin(マージン)プロパティは基本的にすべての要素に対して適用することができるのですが、code要素は例外です。筆者の環境では確認することができませんでした。(Win IE(6.0)、Nスケープ(7.1)利用)

 pre要素に対してはマージンが適用できます。ただし、pre要素で囲った1行が長くても途中で改行されないこと、ユーザーのブラウザ環境によっては整形通りに表示されるとは限らない点にご注意ください。特に code要素との併用において、タブ(キー)による余白としての整形はできるだけ避けてください。なお、フォント名の指定がない場合、pre要素とcode要素共に等幅フォントで表示されます。

※当サイトのサンプルソースはすべてpre要素とcode要素を使って、ソースコードを表示しています。併せてご参照ください。ページソースの見方は「uranus.css」「neptune.css」「pluto.css」のサンプルページを表示させて、ブラウザの「表示」タブをクリックし、プルダウンメニューから「ソース」または「ページソース」を選択して表示させてください。

XHTML/CSS・目次 | そのほかのプロパティ・目次

Copyright (C) 2005-2007 http://www.xml.vc/