May 30, 2009
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 (Notes)
旧Ganesha's monologue（by P_BLOG）より移転転記。（2009-12-13）
この記事のTESTは、移転転記前のP_BLOG上で行われたものですから、現在の表示結果とは異なります。（2009-12-13）
text_decoration.cssのtest続き。
今回TestするTag及びclassは次のとおり。
- .note
- .sidenote
- .example
- .bad
- del
以下、Testです。
これは.noteのTestです。文章をある程度長くしないと真価が出ないようなので無駄に文章を長くしてみます。（Tagはp）
これは.sidenoteのTestです。（Tageはp）
これは.exampleのTestです。文章をある程度長くしないと真価が出ないようなので無駄に文章を長くしてみます。（Tagはp）
これは.badのTestです。文章をある程度長くしないと真価が出ないようなので無駄に文章を長くしてみます。（Tagはp）
これはdelのtestです。
なんだか変ですね。div要素とp要素の親子構造にして、親要素のdiv要素にて、class属性を指定するようにしてみます。
これは.noteのTestです。文章をある程度長くしないと真価が出ないようなので無駄に文章を長くしてみます。（Tagはdiv）
これは.sidenoteのTestです。（Tagはdiv）
これは.exampleのTestです。文章をある程度長くしないと真価が出ないようなので無駄に文章を長くしてみます。（Tagはdiv）
これは.badのTestです。文章をある程度長くしないと真価が出ないようなので無駄に文章を長くしてみます。（Tagはdiv）
結論
- .note属性の場合
- 内容が1行で収まる場合は、直接p要素に.note属性を付加した方が良いような気がします。内容が複数行にまたがる場合は、親子二重構造にして親要素に.note属性を付加した方が見た目が良いです。但し、IE7では意図した通りに表示されないようなので、この属性は利用しない方が良さそうです。
- .sidenote属性の場合
- .sidenote属性を付加したblock要素は、直後のblock要素の右側にfloatします。上の例のように直後のblock要素にborderが付いている場合は、親子二重構造にして親要素に.sidenote属性を付加した方が、borderが重ならなくて見た目が良いです。逆に直後のblock要素にborderが付いていない場合は、二重構造にする必要はないでしょう。
- .example属性の場合
- .example属性を二重構造にする必要はなさそうです。最初の例でも違和感がありません。
- .bad属性の場合
- .bad属性の場合は、二重構造にしてもしなくても、左上隅のタグが重なって表示されてしまいます。cssを見てみると、.example属性と違ってmargin、paddingともに指定されていないようです。利用するなら、cssの修正が必要でしょう。
- del要素の場合
- 特にコメントはありません。普通に使えば大丈夫。
この記事のTESTは、移転転記前のP_BLOG上で行われたものですから、現在の表示結果とは異なります。（2009-12-13）
text_decoration.cssのtest続き。
今回TestするTag及びclassは次のとおり。
いっぱいあるなあ。今回はいっぺんにTestしないでひとつずつTestしてみる。
pre
pre要素は整形済みテキストで改行やスペースが有効になる。但し、Tagは有効なので<や>は文字実体参照を使う。
.command
このclass属性の主な役割は、borderを付けてBackground-colorを設定することにあるようです。pre要素やcode要素と組み合わせて使用するのではないかと思います。
pre.screen と div.screen
どっちも、何に使うのかよく分からない。
pre.screenの方は、普通のpre要素との大きな違いはborderがあることだろうか。つまり、.commandクラスを持つBlock要素と組み合わせなくても良いpreってこと？
div.screenの方はもっと分からない。pre.screenと同じmargin、paddingの設定にborderを付けるだけだから、preと組み合わせることで上のpre.screenと同じ表示に出来る、ということなのだろうか？
あれ？同じにならないな。 pre.screenの方のfont-family指定、monospaceを指定してあるはずなのに、効いてない。 要するに、.commandとpreを組み合わせて使った方が、良さそうだ。
kbd
これはそのまんまだよな。
Ctrl+Alt+Delete
code
code要素は、programのソースコードを表示するときに使うが、整形済みになるわけではない。整形済みにするにはpreと組み合わせて使う。とりあえず整形済みのソースコードなんて用意できないので、.exampleと組み合わせて表示してみた。
var n = 10とします。kbd.command と code.command
ここで指定しているのはwhite-space: pre;だけ。てことは、空白文字を削除しないで、かつ自動改行しないということ。pre.commandとの違いを埋めているってことかな？ただ、kbdコマンドでこれをやる理由がよく分からない。とりあえず、pre.commandとcode.commandの表示の違いを比べてみた。
ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ ＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡＡ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaありゃ、同じにならない。 overflowの指定が違うからか。じゃあ、なんでこんな指定があるのだろうか？
pre.code
うーん、pre.screenの指定からfont-familyプロパティとwhite-spaceプロパティの指定を削ったのがこのpre.codeだ。pre.screenのfont-familyプロパティは効いてなかったので、pre.codeの方が使い勝手が良さそうだ。white-spaceプロパティは…、もともとpre要素で指定する意味がよくわからないので、気にしなくて良さそうだ。
どうやら、今度こそdiv.screenとpreを組み合わせた表示と同じ結果かな？
pre code
pre要素内のcode要素は、空白文字を削除しないように設定。ウン、意味はよく分かる。
var
var要素って何？
ということで、code要素のテスト表示に使ったものを少し改変。
var n = 10とします。.filename と .tag
これも何に使うのか分からない。ファイル名とタグを色分けするのかな？たとえば、タグを色分けするとしたらこんな感じ？
結論
私自身がprogramingをやらないせいかもしれないが、今回のPre-FormattedやComputers And Codesのcss指定は、微妙に分からない部分が多い。とりあえず使いこなせそうなのは、.commandクラスとpreを組み合わせたパターンくらいかな。