Article ID : 88
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>
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 とともに使いソースコード等を記述する際に用います。
ということで、code要素のテスト表示に使ったものを少し改変。
<div class="example"> 変数nに10を代入するには、 <code>var <var>n</var> = 10</code> とします。 </div>
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を組み合わせたパターンくらいかな。
トラックバック (0)
< No Trackbacks >
コメント (0)
< No Comments >