この記事のTESTは、移転転記前のP_BLOG上で行われたものですから、現在の表示結果とは異なります。（2009-12-13）

text_decoration.cssのtest続き。

今回TestするTag及びclassは次のとおり。

• pre
• .command
• pre.screen
• div.screen
• kbd
• code
• kbd.command
• code.command
• pre.code
• pre code
• var
• .filename
• .tag

いっぱいあるなあ。今回はいっぺんにTestしないでひとつずつTestしてみる。

pre

pre要素は整形済みテキストで改行やスペースが有効になる。但し、Tagは有効なので<や>は文字実体参照を使う。

<p>
<pre>
ａｂｃｄｅｆｇ　　ｈｉｊｋｌｍｎ
aabbccddeeffgg    hhiijjkkllmmnn
ｏｐｑｒｓｔｕ　　ｖｗｘｙｇ
ooppqqrrssttuu    vvwwxxyyzz..
</pre>
</p>

.command

このclass属性の主な役割は、borderを付けてBackground-colorを設定することにあるようです。pre要素やcode要素と組み合わせて使用するのではないかと思います。

<div class="command">
<pre>
ａｂｃｄｅｆｇ　　ｈｉｊｋｌｍｎ
aabbccddeeffgg    hhiijjkkllmmnn
ｏｐｑｒｓｔｕ　　ｖｗｘｙｇ
ooppqqrrssttuu    vvwwxxyyzz..
</pre>
</div>

pre.screen と div.screen

どっちも、何に使うのかよく分からない。

pre.screenの方は、普通のpre要素との大きな違いはborderがあることだろうか。つまり、.commandクラスを持つBlock要素と組み合わせなくても良いpreってこと？

div.screenの方はもっと分からない。pre.screenと同じmargin、paddingの設定にborderを付けるだけだから、preと組み合わせることで上のpre.screenと同じ表示に出来る、ということなのだろうか？

<p>
<pre class="screen">
ａｂｃｄｅｆｇ　　ｈｉｊｋｌｍｎ
aabbccddeeffgg    hhiijjkkllmmnn
ｏｐｑｒｓｔｕ　　ｖｗｘｙｇ
ooppqqrrssttuu    vvwwxxyyzz..
</pre>
</p>

<div class="screen">
<pre>
ａｂｃｄｅｆｇ　　ｈｉｊｋｌｍｎ
aabbccddeeffgg    hhiijjkkllmmnn
ｏｐｑｒｓｔｕ　　ｖｗｘｙｇ
ooppqqrrssttuu    vvwwxxyyzz..
</pre>
</div>

あれ？同じにならないな。 pre.screenの方のfont-family指定、monospaceを指定してあるはずなのに、効いてない。 要するに、.commandとpreを組み合わせて使った方が、良さそうだ。

kbd

これはそのまんまだよな。

Ctrl+Alt+Delete

code

code要素は、programのソースコードを表示するときに使うが、整形済みになるわけではない。整形済みにするにはpreと組み合わせて使う。とりあえず整形済みのソースコードなんて用意できないので、.exampleと組み合わせて表示してみた。

<div class="example">
変数nに10を代入するには、<code>var n = 10</code> とします。
</div>

kbd.command と code.command

ここで指定しているのはwhite-space: pre;だけ。てことは、空白文字を削除しないで、かつ自動改行しないということ。pre.commandとの違いを埋めているってことかな？ただ、kbdコマンドでこれをやる理由がよく分からない。とりあえず、pre.commandとcode.commandの表示の違いを比べてみた。

<pre class="command">
ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ　　ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>
<code class="command">
ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ　　ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</code>

ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ　　ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ　　ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ありゃ、同じにならない。 overflowの指定が違うからか。じゃあ、なんでこんな指定があるのだろうか？

pre.code

うーん、pre.screenの指定からfont-familyプロパティとwhite-spaceプロパティの指定を削ったのがこのpre.codeだ。pre.screenのfont-familyプロパティは効いてなかったので、pre.codeの方が使い勝手が良さそうだ。white-spaceプロパティは…、もともとpre要素で指定する意味がよくわからないので、気にしなくて良さそうだ。

<p>
<pre class="code">
ａｂｃｄｅｆｇ　　ｈｉｊｋｌｍｎ
aabbccddeeffgg    hhiijjkkllmmnn
ｏｐｑｒｓｔｕ　　ｖｗｘｙｇ
ooppqqrrssttuu    vvwwxxyyzz..
</pre>
</p>

どうやら、今度こそdiv.screenとpreを組み合わせた表示と同じ結果かな？

pre code

pre要素内のcode要素は、空白文字を削除しないように設定。ウン、意味はよく分かる。

<pre>
aaaaaa    aaaaaa
<code>
aaaaaa    aaaaaa
</code>
</pre>

var

var要素って何？

ソースコードの変数や、引数部分を意味します。
CODE とともに使いソースコード等を記述する際に用います。

VAR：WEB ARCHIVES / XHTML リファレンス

ということで、code要素のテスト表示に使ったものを少し改変。

<div class="example">
変数nに10を代入するには、
<code>var <var>n</var> = 10</code> とします。
</div>

.filename と .tag

これも何に使うのか分からない。ファイル名とタグを色分けするのかな？たとえば、タグを色分けするとしたらこんな感じ？

<span class="tag"><div class="command"></span>
<span class="tag"><pre></span>
ａｂｃｄｅｆｇ　　ｈｉｊｋｌｍｎ
aabbccddeeffgg    hhiijjkkllmmnn
ｏｐｑｒｓｔｕ　　ｖｗｘｙｇ
ooppqqrrssttuu    vvwwxxyyzz..
<span class="tag"></pre></span>
<span class="tag"></div></span>

結論

私自身がprogramingをやらないせいかもしれないが、今回のPre-FormattedやComputers And Codesのcss指定は、微妙に分からない部分が多い。とりあえず使いこなせそうなのは、.commandクラスとpreを組み合わせたパターンくらいかな。