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

実行結果

▼dl+dt+ddの例

項目A
項目Aの内容
項目B
項目Bの内容
項目C
項目Cの内容

▼dialog+dt+ddの例

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

ソース

<style>
    dialog { margin:10px 0; padding:10px; border:1px solid #ccc; display:block; }
    dl { margin:0 0 20px 0; padding:0; }
    dt { margin:0 0 10px 0; padding:0; }
    dd { margin:0 0 10px 1em; padding:0; }
    dialog dt { margin:0; padding:0 0 0 21px; color:#ff6699; background:transparent url(/content/img/icon/color/female.png) no-repeat 0 center; }
    dialog dd { margin:0; padding:0 0 0 21px; color:#56a1fe; background:transparent url(/content/img/icon/color/male.png) no-repeat 0 center; }
</style>

<p>▼dl+dt+ddの例</p>
<dl>
    <dt>項目A</dt>
        <dd>項目Aの内容</dd>
    <dt>項目B</dt>
        <dd>項目Bの内容</dd>
    <dt>項目C</dt>
        <dd>項目Cの内容</dd>
</dl>

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

polarized women