2xup.org

pre 要素のスタイル定義とマークアップ

なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。

情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。

  1. Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overflow プロパティを指定すると内容が消えてしまう
  2. Windows 版 Internet Explorer では、値が auto の overflow プロパティを指定すると内容の幅いっぱいまで幅が広がってしまうので、width プロパティで幅を定義する必要がある
  3. 値が scroll の overflow プロパティを指定すると内容がはみ出さなくとも縦横のスクロールが出るのだけれど、それはちょっと嫌
  4. Windows 版 Internet Explorer では、値が auto の overflow プロパティを指定した場合、横方向のスクロールがでるのだけれど、ボックスモデルの解釈がおかしいのか、そのスクロールバー分の縦スクロールが発生する
  5. pre 要素単体で使うのではなく内容に合わせて code, samp, var といった要素を使う (僕の場合、ほとんどが code です)

という具合です。CSS の定義から順番に説明していきます。

CSS

1. はあまり好きではないけれど、バックスラッシュハックで対応。Macintosh 版 Internet Explorer は visible なのではみ出してすいません状態。でも内容が見えないよりは良いかな。3. は2006年の最初までほとんど気にしていなかったので、それまでは以下のようにしていた。

pre {
  width: 95%;
  overflow: visible;
  /*\*/
  overflow: scroll;
  /**/
  margin: 1.5em 0;
  padding: 0.5em 0.8em;
  border: 5px solid #ddd;
  background-color: #f4f4f4;
  font-size: 95%;
}

しかし 3. が気になりだしてからは、4. も一緒に気になりだし、現在の定義はこんな具合になっています。

pre {
  width: 95%;
  overflow: scroll;
  margin: 1.5em 0;
  padding: 0.5em 0.8em;
  font-size: 95%;
}

html>body pre {
  overflow: visible;
  /*\*/
  overflow: auto;
  /**/
}

ここで最終的な定義の説明をすると、3. が気になりだしたので、overflow プロパティの値を auto としたいのだけれど、Windows 版 Internet Explorer ではボックスモデルの解釈がおかしいのか、4. が気になりだしたので、Windows 版 Internet Explorer 5.5 以降で認識されない子セレクタを利用した分岐で Windows 版 Internet Explorer は overflow プロパティの値を scroll に、Windows 版 Internet Explorer 以外は auto になるように考えをまとめました。しかし、Macintosh 版 Internet Explorer では子セレクタを利用した分岐は認識されるので、バックスラッシュハックを利用し、Macintosh 版 Internet Explorer 以外は overflow プロパティの値を auto に Macintosh 版 Internet Explorer の場合は visible なるようにしています。

XHTML

XHTML のマークアップはシンプルに。現在は class 属性や id 属性は付けていません。

<pre><code>pre {
  width: 95%;
  overflow: scroll;
  margin: 1.5em 0;
  padding: 0.5em 0.8em;
  font-size: 95%;
}

html>body pre {
  overflow: visible;
  /*\*/
  overflow: auto;
  /**/
}</code></pre>

今は何も特別な事はやっていないけれど、code 要素などにスタイルを追加したり、class 属性の値で内容がどういった種類のコードなのか指定しつつ、CSS で各々の見た目を変えることもできますね。例えばこんな感じ。

<pre class="css"><code>pre {
  width: 95%;
  overflow: scroll;
  margin: 1.5em 0;
  padding: 0.5em 0.8em;
  font-size: 95%;
}

html>body pre {
  overflow: visible;
  /*\*/
  overflow: auto;
  /**/
}</code></pre>

文字参照は?

pre 要素にコードを書く時、HTMLXMLを記述する際に使用する記号は文字参照する必要があります。僕はdのようにしているかというと、マイ・パートナーエディタ mi のモードに以下のようなツールを作って、ごりっと一気に文字実体参照に変換しています。らくちん。最近は CSSXHTML もイカシタ補完 Omni completion がある為、 Vim7 で作業するようにしているので、Vim でも同様の事ができないか調べ中。

<<<REPLACE-REGEXP-SELECTED
<
&lt;
<<<REPLACE-REGEXP-SELECTED
"
&quot;
<<<REPLACE-REGEXP-SELECTED
&
&amp;
<<<REPLACE-REGEXP-SELECTED
>
&gt;

あとマークアップに関して注意している事と言えば、タブ文字を使わないでしょうか。

We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.

本書は、整形済テキスト中で水平タブを用いることは避けるよう、強く要請する。なぜなら、編集の際にタブ区切り幅を8文字以外の値に設定することはよくあることだが、これが誤った配置の文書を生み出す元となるからである。

期待した結果が得られない可能性があるという事で、Preformatted (整形済みテキスト) ではない。というのが理由のようです。この辺りの対策は、編集作業時にタブ文字を利用しないようにしているというのがあります。最近のエディタでは、タブ文字の代わりに空白文字の繰り返しでインデントするように設定できる物も多いですし、Vim の設定ファイルにも set expandtab と設定して空白文字でインデントするようにしています。

と、できるだけ使わないと決めているハックを惜しげもなく使っていますが、どちらかと言えば見た目中心な考え方になってしまっています。こういった内容はぜひ、いろんな人の考えから何かを吸収したいですね。楽しみです。

2 Comments

nagayama2006年9月 7日 11:11

URLにある
" html escape function
:function HtmlEscape()
silent s/&/\&/eg
silent s//\>/eg
:endfunction
を設定ファイルに書いて、置換したい文字列選択して:call HtmlEscape()でどーでしょー

kaminogoya2006年9月 8日 01:24

> nagayama さん
うおお。で、できました!スゴス!
これでますます Vim が使えます。もっと勉強しなきゃ。
教わった URL の設定ファイル参考にさせていただきます!

あと、ハピバスデイ!