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

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

カラー選択

CSS

<STYLE type="text/css"> <!-- TD{ font-size : 13px; } .corner{ font-size : 6px; color : #7BDECE; } .linet{ width : 100px; border-top : 1px solid #A6E6DB; margin : 1px; } .linel{ height : 100px; width : 2px; border-left : 1px solid #A6E6DB; margin : 1px; } .liner{ height : 100px; width : 2px; border-right : 1px solid #A6E6DB; margin : 1px; } .lineb{ width : 100px; border-bottom : 1px solid #A6E6DB; margin : 1px; } --> </STYLE>

HTML

<DIV style="border : 1px solid #7BDECE;width : 400px;"> <TABLE border="0" width="400" cellpadding="0" cellspacing="0"> <TR> <TD class="corner" nowrap>□□□<BR> □□<BR> □</TD> <TD align="left" valign="top"> <DIV class="linet"><BR> </DIV> </TD> <TD></TD> </TR> <TR> <TD valign="top" align="left"> <DIV class="linel"><BR> <BR><BR> </DIV> </TD> <TD>幅変更の時はDIVとTABLE両方のwidthを同じ値にして下さい<BR> <BR> 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 SampleText SampleText SampleText SampleText SampleText</TD> <TD align="right" valign="bottom"> <DIV class="liner"><BR><BR><BR> </DIV> </TD> </TR> <TR> <TD></TD> <TD align="right" valign="bottom"> <DIV class="lineb"><BR> </DIV></TD> <TD class="corner" align="right" nowrap>□<BR> □□<BR> □□□</TD> </TR> </TABLE> </DIV>

本体表示