Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

pre要素のスタイル指定

空白文字や改行をそのままプラウザで表示させるには、pre要素(整形済みテキスト)を使用します。
pre要素は、プログラムのソースコードとして定義するcode要素と組み合わせて使用するのが一般的です。

pre要素を使用する際の注意点。

  • 開始タグ直後の空白文字、終了タグ直前の空白文字もそのまま反映される。
  • pre要素内の「<」、「>」、「&」等は、文字参照に置き換える必要がある。
  • preは、ほとんどのブラウザで等幅フォントで表示される。
  • white-space: は、ほとんどのブラウザでpreになっている。
  • font-family: を指定する場合は、最後にGeneric Font Familyが必要になる。
  • overflow: auto; は、溢れた方向にのみスクロールバーが出る。
  • overflow: scroll; は、縦横どちらに溢れた場合でも縦・横スクロールバーが両方とも出る。
  • IEでは、overflow: auto; は内容が溢れる場合にうまく解釈されないことがある。
  • IEでは、内容に合わせてボックス幅が拡大するので、widthの指定が必要になる。

以上を踏まえてスタイル指定すると・・・

XHTML

<pre><code>
プログラムのソースコード
</code></pre>

CSS

pre {
width: auto;
overflow: scroll;
white-space: pre;
background-color: #efefef;
line-height: normal;
padding: 10px;
}
pre code {
font-family: "Courier New", monospace;
}

IE7以下のバージョンに指定します。

pre {
width: 96%;
overflow: scroll;
}

IE7以下のバージョンだけに適応させるために条件分岐コメントを使い、外部CSSを読み込んでいます。

<!--[if lt IE 7]>
<link rel="stylesheet" href="<$MTBlogURL$>ie.css" type="text/css" media="screen" />
<![endif]-->