blockquoteはもう古い〜fieldsetの伝説(legend)!!

見栄えが好いので、blockquote の代わりに fieldset を使っちゃうなんて、素敵。

地獄変00:blockquoteはもう古い〜fieldsetの伝説(legend)!!

<fieldset><legend>地獄変00</legend>地獄変00(ダブルオー)が世界の覇者となるまでの軌跡</fieldset>

いくらなんでも、そりゃないよ。ってことで、妥当なマークアップのサンプル。

<blockquote title="地獄変00" cite="foo.com">
<p class="Cite"><cite>地獄変00</cite></p>
<p>地獄変00(ダブルオー)が世界の覇者となるまでの軌跡</p>
</blockquote>

『れじぇんど』と同じになるように、これに適用させるスタイルのサンプル。

blockquote{
    font-size : 100% ;
    border : 1px dashed #399 ;
    padding : 0 1em 0.5em 1em ;
    margin : 2em 0 2em 0 ;
}

blockquote p{
    color : #399 ;
    margin : 0 ;
    line-height : 150% ;
}

p.Cite{
    font-size : 100% ;
    color : #399 ;
    margin : 0 ;
    padding : 0 ;
    line-height : 100% ;
}

p.Cite cite{
    font-style : normal ;
    font-weight : bold ;
    position : relative ;
    bottom : 0.5em ;
    background-color : white ;
    padding : 0 0.5em 0 0.5em ;
    margin : 0 0 0 1em ;
}

てな感じで。