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

角丸ボックス:背景画像・table要素使用

実行結果

ここに文章などを記述します。
テーブルサイズは自由に設定可。
幅はTABLEタグのwidth属性で400pxに指定しています。
高さは文字の量に合わせて伸縮します。

ソース

<style type='text/css'>
    div.km img          { border:none; display:block; }
    div.km table {
        margin:0; padding:0;
        border:0;
        border-collapse:collapse;
    }
    div.km table th,
    div.km table td {
        margin:0; padding:0;
        border:0;
    }
    /* 左上角 */
    div.km td.top_left  { background:url(/content/img/css/km_top_left.gif) no-repeat; }
    /* 右上角 */
    div.km td.top_right { background:url(/content/img/css/km_top_right.gif) no-repeat; }
    /* 左下角 */
    div.km td.btm_left  { background:url(/content/img/css/km_btm_left.gif) no-repeat; }
    /* 右下角 */
    div.km td.btm_right { background:url(/content/img/css/km_btm_right.gif) no-repeat; }
    /* 上部、下部 */
    div.km td.center    { background:url(/content/img/css/km_center.gif) repeat-x; }
    /* 左部、右部 */
    div.km td.side      { background:url(/content/img/css/km_side.gif) repeat-y; }
    /* 中身 */
    div.km td.content   { background-color:#bddfff; line-height:1.5; } 
</style>

<div class="km">
    <table width="80%">
        <tr>
            <td class="top_left" width="10"><img src='/content/img/clr.gif' width="10" height="10" alt="" /></td>
            <td class="center" width="*"></td>
            <td class="top_right" width="10"><img src='/content/img/clr.gif' width="10" height="10" alt="" /></td>
        </tr>
        <tr>
            <td class="side" width="10"></td>
            <td class="content">
                ここに文章などを記述します。<br>
                テーブルサイズは自由に設定可。<br>
                幅はTABLEタグのwidth属性で400pxに指定しています。<br>
                高さは文字の量に合わせて伸縮します。
            </td>
            <td class="side" width="10"></td>
        </tr>
        <tr>
            <td class="btm_left" width="10"><img src='/content/img/clr.gif' width="10" height="10" alt="" /></td>
            <td class="center" width="*"></td>
            <td class="btm_right" width="10"><img src='/content/img/clr.gif' width="10" height="10" alt="" /></td>
        </tr>
    </table>
</div>

polarized women