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

<style type="text/css">
    #dlist {
        margin:10px 0; padding:0;
    }
        #dlist dt {
            margin:5px 0 0 10px;
            padding:0 0 0 16px; /* 背景画像があるため、左余白をあける */
            background-image:url(/content/img/icon/gray/diamonds_2.gif); /* 背景画像を指定 */
            background-position:left center; /* 背景画像は「左中央」に表示 */
            background-repeat:no-repeat; /* 背景画像を繰り返して表示しない */
        }
        #dlist dd {
            margin:0 0 0 20px; /* インデント */
            padding:0 0 0 16px; /* 背景画像があるため、左余白をあける */
            background-image:url(/content/img/icon/gray/diamonds_1.gif); /* 背景画像を指定 */
            background-position:left center; /* 背景画像は「左中央」に表示 */
            background-repeat:no-repeat; /* 背景画像を繰り返して表示しない */
        }
</style>

<div id="dlist">
    <dl>
        <dt>りんご</dt>
            <dd>果皮の色は赤もあれば青もあります。</dd>
            <dd>芯に近い部分の蜜が甘いです。</dd>
        <dt>みかん</dt>
            <dd>ビタミンが豊富に含まれています。</dd>
            <dd>食べ過ぎると手が黄色くなります。</dd>
        <dt>メロン</dt>
            <dd>高級フルーツです。</dd>
    </dl>
</div>