PHP & JavaScript Room :: 設置サンプル

実行結果

最近どぉ!?
まーまーかな。そっちはどうなの?
うーん。至ってふつー。何かいいことあったの?
別に。脳天気なだけだよ。
またー、そんなこといって?ほんとはいい事あったんでしょ!?
相変わらず勘ぐり深いね。。。
ほげ子
最近どぉ!?
ほげ夫
まーまーかな。そっちはどうなの?
ほげ子
うーん。至ってふつー。何かいいことあったの?
ほげ夫
別に。脳天気なだけだよ。
ほげ子
またー、そんなこといって?ほんとはいい事あったんでしょ!?
ほげ夫
相変わらず勘ぐり深いね。。。

ソース

<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>

polarized women