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

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

カラー選択

CSS

<STYLE type="text/css"> <!-- DIV{ font-size : 13px; } --> </STYLE>

HTML

<TABLE width="400"><TR><TD> <DIV style="width : 400px"> <!--↓一番外側の枠--> <DIV style="border-width : 1px;border-color : #7171FF ;border-style : solid"> <!--↓立体感を出すために、右下ボーダーを濃い色に、左上ボーダーを薄い色に設定--> <DIV style="border-width : 1px;border-color : #ECECFF #9696FF #9696FF #ECECFF;border-style : solid;"> <!--↓のbackground-colorで枠の色を、paddingで枠の太さを設定--> <DIV style="background-color : #D6D6FF;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <!--↓上のと反対に右下と左上の枠色を設定--> <DIV style="border-width : 1px;border-color : #9696FF #ECECFF #ECECFF #9696FF;border-style : solid;"> <!--↓内容を書く場所の背景色と余白を設定--> <DIV style="border : 1px #7171FF solid;background-color : #FFFFFF;padding : 10px;"> 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</DIV> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE>

本体表示