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

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

カラー選択

CSS

<style type="text/css"> <!-- .box17{ width: 400px;/*枠全体の幅*/ font-size: 13px;/*文字サイズ*/ border-top: solid 12px #5858A8; margin-top: 15px; } .box17 dt{/*タイトル部分の設定*/ position: relative; z-index: 1; top: -17px; left: 8px; width: 382px;/*left×2＋width＋2＝.box17のwidth*/ height: 14px; border: solid 1px #5858A8; padding: 3px 0; text-align: center;/*中央寄せ*/ background-color: #FFFFFF; } .box17 dd{/*内容文の設定*/ border-style: dashed; border-width: 0 2px 2px 2px;/*枠の太さ*/ border-color: #BDBDED;/*枠色*/ margin: -22px 4px 6px 4px; padding: 23px 15px 15px 15px;/*内部の余白*/ } --> </style>

HTML

<dl class="box17"> <dt>タイトル</dt> <dd>SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText SampleText</dd> </dl>

本体表示