この記事の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属性の場合

内容が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要素の場合

特にコメントはありません。普通に使えば大丈夫。