実行結果
ソース
<style>
dialog { margin:10px 0; padding:10px; border:1px solid #ccc; display:block; }
dialog dt { margin:0; padding:0 0 5px 21px; font-weight:normal; color:#ff6699; background:transparent url(/content/img/icon/color/female.png) no-repeat 0 center; }
dialog dd { margin:0; padding:0 0 5px 21px; font-weight:normal; color:#56a1fe; background:transparent url(/content/img/icon/color/male.png) no-repeat 0 center; }
dialog#timeline dt { color:#666; font-family:monospace; font-size:80%; background-image:url(/content/img/icon/color/comments.gif); }
dialog#timeline dd { background:none; color:#000; }
dialog#timeline time { padding-right:10px; }
</style>
<dialog>
<dt>最近どぉ!?</dt>
<dd>まーまーかな。そっちはどうなの?</dd>
<dt>うーん。至ってふつー。何かいいことあったの?</dt>
<dd>別に。脳天気なだけだよ。</dd>
<dt>またー、そんなこといって?ほんとはいい事あったんでしょ!?</dt>
<dd>相変わらず勘ぐり深いね。。。</dd>
</dialog>
<dialog id="timeline">
<dt><time>14:22</time>ほげ子</dt>
<dd>最近どぉ!?</dd>
<dt><time>14:23</time>ほげ夫</dt>
<dd>まーまーかな。そっちはどうなの?</dd>
<dt><time>14:23</time>ほげ子</dt>
<dd>うーん。至ってふつー。何かいいことあったの?</dd>
<dt><time>14:24</time>ほげ夫</dt>
<dd>別に。脳天気なだけだよ。</dd>
<dt><time>14:25</time>ほげ子</dt>
<dd>またー、そんなこといって?ほんとはいい事あったんでしょ!?</dd>
<dt><time>14:26</time>ほげ夫</dt>
<dd>相変わらず勘ぐり深いね。。。</dd>
</dialog>