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

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

カラー選択

CSS

<style type="text/css"> <!-- .box25{ width: 380px;/*全体の幅*/ font-size: 10pt;/*文字サイズ*/ } .box25 dt{/*タイトル部分の設定*/ color: #454142;/*文字色*/ background-color: #FCFCFE;/*背景色*/ font-weight: bold; width: 11em;/*タイトルの幅（文字数）*/ position: relative; z-index: 2; padding: 0.3em 1em 0.2em 0.3em; border-style: solid; border-color: #6A6FBE;/*枠の色*/ border-width: 1px 2px 2px 1px; } .box25 dt span{ padding-left: 8px; border-left: 4px solid #AAAFEC;/*タイトル部の左縦線*/ } .box25 dd{/*内容部分*/ position: relative; z-index: 1; top: -0.9em; margin: 0 0 0 0.9em; border: solid 1px #8A8FBE;/*枠の色*/ } .box25 dd .text { padding: 1.7em 0.5em 1em 1em;/*テキスト部分の余白*/ border-left: solid 30px #D4D6EC;/*左側の着色部分*/ } --> </style>

HTML

<dl class="box25"> <dt><span>タイトル</span></dt> <dd><div class="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 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</div></dd> </dl> <dl class="box25"> <dt><span>タイトル</span></dt> <dd><div class="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 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</div></dd> </dl>

本体表示