Webデザインテンプレート集 : Templates［飾り枠］

様々な用途に利用出来る飾り枠です。何か囲みたいときにどうぞ。
画像をクリック：プレビュー ／ 各色を見る ／ ソース表示 ／ ダウンロード

カラー選択

CSS

<style type="text/css"> <!-- .box10{ width: 400px;/*全体の幅*/ margin-top: 20px; font-size: 13px;/*文字サイズ*/ border: solid 1px #949494; } .box10 dt{/*タイトル部分の設定*/ position: absolute; width: 150px;/*タイトルの幅*/ font-weight: bold;/*太字*/ margin: -12px 20px 0 20px; padding: 6px 0 4px 1em; border: solid 1px #949494;/*枠の色*/ background: #FFFFFF;/*枠内の背景色*/ } .box10 dd{/*内容部分*/ margin: 0; padding: 1em 0 8px 0; border: solid 1px #BABABD;/*枠の色*/ } .box10 dd p{/*段落*/ padding: 0.7em;/*テキスト部分の余白*/ margin: 0; } --> </style>

HTML

<dl class="box10"> <dt>タイトル</dt> <dd><p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p></dd> </dl>

本体表示