May 30, 2009

Test (Pre-Formatted,Computers And Codes)

旧Ganesha's monologue(by P_BLOG)より移転転記。(2009-12-13)

この記事の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>
abcdefg  hijklmn
aabbccddeeffgg    hhiijjkkllmmnn
opqrstu  vwxyg
ooppqqrrssttuu    vvwwxxyyzz..
</pre>
</p>

.command

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

<div class="command">
<pre>
abcdefg  hijklmn
aabbccddeeffgg    hhiijjkkllmmnn
opqrstu  vwxyg
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">
abcdefg  hijklmn
aabbccddeeffgg    hhiijjkkllmmnn
opqrstu  vwxyg
ooppqqrrssttuu    vvwwxxyyzz..
</pre>
</p>
<div class="screen">
<pre>
abcdefg  hijklmn
aabbccddeeffgg    hhiijjkkllmmnn
opqrstu  vwxyg
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>
変数nに10を代入するには、var n = 10 とします。

kbd.command と code.command

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

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

AAAAAAAAAAAAAAAAAAAA  AAAAAAAAAAAAAAAAAAAA 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">
abcdefg  hijklmn
aabbccddeeffgg    hhiijjkkllmmnn
opqrstu  vwxyg
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>
変数nに10を代入するには、 var n = 10 とします。

.filename と .tag

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

<span class="tag"><div class="command"></span>
<span class="tag"><pre></span>
abcdefg  hijklmn
aabbccddeeffgg    hhiijjkkllmmnn
opqrstu  vwxyg
ooppqqrrssttuu    vvwwxxyyzz..
<span class="tag"></pre></span>
<span class="tag"></div></span>

結論

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

Test (abbreviation)

旧Ganesha's monologue(by P_BLOG)より移転転記。(2009-12-13)

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

text_decoration.cssのtest続き。

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

  • abbr
  • acronym

以下、テスト。

HTML

JIS

結論

点線の下線が付いて、マウスオーバーするとカーソルに?が付くようになるみたい。

Test (Drop Shadow Effect)

旧Ganesha's monologue(by P_BLOG)より移転転記。(2009-12-13)

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

text_decoration.cssのtest続き。

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

  • .drop-shadow
  • .drop-shadow-sans-serif
  • .drop-shadow-serif

以下テスト。

これは.drop-shadowのテストです。

これは.drop-shadow-sans-serifのテストです。

これは.drop-shadow-serifのテストです。

結論

Safari以外では無意味?

次へ