☆ 可愛い枠 ☆




シ ン プ ル
点々の枠
ふ た え
額　縁　風
リ ン ク用
バナーリンク
メニュー用


枠内にスクロールバーを表示させるには？




シンプルな枠

シンプルな枠にお好きなアイコンをトッピング♪　アイコンは素材屋さんからもらってね♪

<!--* Various Colors * シンプルな枠 ここから-->
<CENTER>
<!--この下、bgcolor=枠の色 cellspacing=枠の太さ bordercolor=枠の縁取りの色 border=縁取りの太さ-->
<TABLE bgcolor="#ffe5dd" cellspacing="3" bordercolor="#ffdddd" border="1">
<TBODY>
<TR>
<TD>
<TABLE bgcolor="#ffffff"><!--bgcolor=枠内部の色-->
<TBODY>
<TR>
<TD><IMG src="●●.gif" width="10" height="10" border="0"><!-- IMG src="●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更--></TD>
<TD></TD>
<TD><IMG src="●●.gif" width="10" height="10" border="0"><!-- IMG src="●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更--></TD>
</TR>
<TR>
<TD></TD>
<!--この下、width=表内部の幅　 height=表内部の高さ-->
<TD width="200" height="250">ここに文章を記入</TD>
<TD></TD>
</TR>
<TR>
<TD><IMG src="●●.gif" width="10" height="10" border="0"><!-- IMG src="●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更--></TD>
<TD></TD>
<TD><IMG src="●●.gif" width="10" height="10" border="0"><!-- IMG src="●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更--></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--シンプルな枠 ここまで-->


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。








点々の枠


点々の枠もおしゃれです！点々の大きさを変えても素敵♪

<!--* Various Colors * 点々の枠 ここから-->
<CENTER>
<!--この下、border-color=点々の色 border-width=点々の大きさ　cellpadding=枠内の余白-->
<TABLE style="border-color:#eaa2b4;border-style:dotted;border-width:3px" cellpadding="5">
<TBODY>
<TR>
<!--この下、width=枠の幅 height=枠の高さ-->
<TD width="400" height="300">ここに文章を記入</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--点々の枠 ここまで-->




点線の枠もおしゃれです！点線の太さを変えても素敵♪

<!--* Various Colors * 点線の枠 ここから-->
<CENTER>
<!--この下、border-color=点線の色 border-width=点線の太さ cellpadding=枠内の余白-->
<TABLE style="border-color:#eaa2b4;border-style:dashed;border-width:3px" cellpadding="5">
<TBODY>
<TR>
<!--この下、width=枠の幅 height=枠の高さ-->
<TD width="400" height="300">ここに文章を記入</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--点線の枠 ここまで-->





おしゃれにカスタマイズした点線の枠も素敵！

<!--* Various Colors * おしゃれな点線の枠 ここから-->
<!--この下、bgcolor=縁取りの色 cellpadding=縁取りと点線の間の幅 cellspacing=縁取りの太さ-->
<TABLE bgcolor="#e0c4b0" cellpadding="3" cellspacing="1">
<TBODY>
<TR>
<!--この下、bgcolor=縁取りと点線の間の色-->
<TD bgcolor="#f8f1e7">
<!--この下、border-color=点線の色 border-width=点線の太さ cellpadding=枠内の余白 bgcolor=枠内部の色-->
<TABLE style="border-color:#e0c4b0;border-style:dashed;border-width:1px" cellpadding="3" bgcolor="#fffff8">
<TBODY>
<TR>
<!--この下、width=枠の幅 height=枠の高さ-->
<TD width="200" height="150">
<!--この下、color=文字の色 size=文字の大きさ-->
<FONT color="#b8a8a0" size="2">ここに文章を記入</FONT></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<!--おしゃれな点線の枠 ここまで-->


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。








ふたえの枠


（簡易バージョン）

シンプルで可愛いふたえの枠です。内側の枠線の太さは変えられませんが、お手軽に使えそう。

<!--* Various Colors * ふたえの枠（簡易バージョン） ここから-->
<CENTER>
<!--この下、border=枠線の太さ bordercolor=枠の色 cellpadding=枠内の余白 cellspacing=枠線と枠線の間隔 bgcolor=枠内部の色 width=表の幅 height=表の高さ-->
<TABLE border="5" bordercolor="#eae7ef" cellpadding="7" cellspacing="5" bgcolor="#ffffff" width="300" height="400">
<TBODY>
<TR>
<TD>ここに文章を記入</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--ふたえの枠（簡易バージョン） ここまで-->




（発展バージョン）

基本的には、ふたえの枠（簡易バージョン）と同じものですが、枠線の太さを変えて
行数・列数を増やすとこうなります。

　 　
　 　


<!--* Various Colors * ふたえの枠（発展バージョン） ここから-->
<CENTER>
<!--この下、border=枠線の太さ bordercolor=枠の色 cellpadding=枠内の余白 cellspacing=枠線と枠線の間隔 bgcolor=枠内部の色-->
<TABLE border="1" bordercolor="#c0c0e0" cellpadding="5" cellspacing="2" bgcolor="#ffffff">
<TBODY>
<TR>
<TD>ここに文章を記入</TD>
<TD>ここに文章を記入</TD>
</TR>
<TR>
<TD>ここに文章を記入</TD>
<TD>ここに文章を記入</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--ふたえの枠（発展バージョン） ここまで-->




（カスタマバージョン）

内側の枠線の色と太さを選べるタイプです。

<!--* Various Colors * ふたえの枠（カスタマバージョン） ここから-->
<CENTER>
<!--この下、cellpadding=枠線と枠線の間隔 cellspacing=枠線の太さ（外側） bgcolor=枠線の色（外側） width=表の幅 height=表の高さ-->
<TABLE cellpadding="7" cellspacing="5" bgcolor="#e5ddff" width="300" height="400">
<TBODY>
<TR>
<!--この下、bgcolor=枠線と枠線の間の色-->
<TD bgcolor="#ffffff">
<!--この下、cellpadding=枠内の余白 cellspacing=枠線の太さ（内側） bgcolor=枠線の色（内側）-->
<TABLE cellpadding="10" cellspacing="4" bgcolor="#e5ccee" width="100%" height="100%">
<TBODY>
<TR>
<!--この下、bgcolor=枠内部の色-->
<TD bgcolor="#ffffff">ここに文章を記入</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--ふたえの枠（カスタマバージョン） ここまで-->


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね。








透ける枠

透けてる枠も素敵！opacity=透ける割合です。値を小さくするほど透け方が強くなります。

<!--* Various Colors * 透ける枠 ここから-->
<CENTER>
<!--この下、opacity=透ける割合 width=枠の幅 height=枠の高さ bgcolor=枠内部の色-->
<TABLE style="filter:Alpha(opacity=50)" width="300" height="200" bgcolor="#ffb9b9">
<TBODY>
<TR>
<TD>ここに文章を記入</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--透ける枠 ここまで-->


ページ全体の枠に適用したい場合はこちら♪








額縁風の枠

お好きな壁紙を枠に指定して使います。壁紙とアイコンは素材屋さんからもらってね♪



<!--* Various Colors * 額縁風の枠 ここから-->
<CENTER>
<!--この下､枠の外側のふちです。 cellspacing=外側のふちの太さ-->
<TABLE cellspacing="3" bgcolor="#dfe8bd">
<TBODY>
<TR>
<TD>
<TABLE background="●●.gif" bgcolor="#e5eecc"><!--background="●●.gif"の部分に壁紙画像を指定　bgcolor=壁紙を使わない場合は色を指定-->
<TBODY>
<TR>
<TD></TD>
<TD height="25"><!--枠の上部の壁紙部分--></TD>
<TD></TD>
</TR>
<TR>
<TD width="25"><!--枠の左側の壁紙部分--></TD>
<TD align="center">
<TABLE bgcolor="#e1e9c2" width="100%" cellspacing="2"><!--枠の内側のふちです。 cellspacing=ふちの太さ-->
<TBODY>
<TR>
<TD bgcolor="#ffffff" width="" height=""><!--枠内部です。色を変えても可愛いです。 width=枠内部の幅､height=枠内部の高さ-->
<IMG src="●●.gif" width="10" height="10" border="0" hspace="3" align="right"><!-- IMG src"●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更-->
<IMG src="●●.gif" width="10" height="10" border="0" hspace="3" align="left"><!-- IMG src"●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更-->
<BR><BR>
ここに文章を記入<BR><BR>
<IMG src="●●.gif" width="10" height="10" border="0" hspace="3" align="right"><!-- IMG src"●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更-->
<IMG src="●●.gif" width="10" height="10" border="0" hspace="3" align="left"><!-- IMG src"●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更-->
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD width="25"><!--枠の右側の壁紙部分--></TD>
</TR>
<TR>
<TD></TD>
<TD height="25"><!--枠の下部の壁紙部分--></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--額縁風の枠 ここまで-->


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね








リンク用の枠

お好きな壁紙を枠に指定して使います。壁紙とアイコンは素材屋さんからもらってね♪




これが見本です

ホームページを綺麗に飾る小技を紹介します♪タグをコピーするだけで簡単におしゃれなホームページに変身するよ！




　
<!--* Various Colors * リンク用の枠 ここから-->
<CENTER>
<!--この下 background="●●.gif"の部分に壁紙画像を指定 bordercolor=枠の縁取りの色 cellpadding=枠内の余白 cellspacing=枠の太さ-->
<TABLE background="●●.gif" bordercolor="#cccccc" cellpadding="3" cellspacing="5" border="1">
<TBODY>
<TR>
<TD colspan="2" bgcolor="#fdfffe" align="center" width="476"><!--bgcolor=枠内部の色-->
<BR>
<BR>
<BR>
<TABLE>
<TBODY>
<TR>
<TD><IMG src="●●.gif" width="10" height="10" border="0"><!-- IMG src"●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更--></TD>
<TD><FONT color="#c0b4d8">ここに文章</FONT></TD>
<TD><IMG src="●●.gif" width="10" height="10" border="0"><!-- IMG src"●●.gif"に画像を指定 画像の大きさに合わせて、width="10" height="10" も変更--></TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE>
<TBODY>
<TR>
<TD colspan="3" bgcolor="#c0b4d8"><!--bgcolor=仕切りの色--></TD>
</TR>
<TR>
<TD align="center" height="80" valign="middle">*** ここにバナー ***</TD>
<TD width="10"><!--バナーと説明文の間隔--></TD>
<TD>******** ここに説明文 ********</TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#c0b4d8"><!--bgcolor=仕切りの色--></TD>
</TR>
<TR>
<TD align="center" height="80" valign="middle"></TD>
<TD></TD>
<TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#c0b4d8"><!--bgcolor=仕切りの色--></TD>
</TR>
</TBODY>
</TABLE>
<BR>
<BR>
<BR>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--リンク用の枠 ここまで-->


列を追加する時はこのタグを<TD colspan="3" bgcolor="#c0b4d8"></TD>の後に付ければOK　

　
</TR>
<TR>
<TD align="center" height="80" valign="middle"></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD colspan="3" bgcolor="#c0b4d8"><!--bgcolor=仕切りの色--></TD>


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね








バナーリンク用の枠

お好きな壁紙を枠に指定して使います。壁紙は素材屋さんからもらってね♪


これが見本です


<!--* Various Colors * バナーリンク用の枠 ここから-->
<CENTER>
<!--この下 background="●●.gif"の部分に壁紙画像を指定 bordercolor=枠の縁取りの色 cellpadding=枠内の余白 cellspacing=枠の太さ-->
<TABLE background="●●.gif" border="1" bordercolor="#cccccc" cellpadding="3" cellspacing="5">
<TBODY>
<TR>
<TD bgcolor="#fdfffe" align="center" colspan="3"><BR>
<BR>
<BR>
</TD>
</TR>
<TR>
<TD bgcolor="#fdfffe" align="center" height="65" width="150">ここにバナー</TD>
<TD bgcolor="#f5fefa" align="center" width="150"></TD>
<TD bgcolor="#fdfffe" align="center" width="150"></TD>
</TR>
<TR>
<TD bgcolor="#f5fefa" align="center" height="65"></TD>
<TD bgcolor="#fdfffe" align="center"></TD>
<TD bgcolor="#f5fefa" align="center"></TD>
</TR>
<TR>
<TD bgcolor="#fdfffe" align="center" height="65"></TD>
<TD bgcolor="#f5fefa" align="center"></TD>
<TD bgcolor="#fdfffe" align="center"></TD>
</TR>
<TR>
<TD bgcolor="#f5fefa" align="center" height="65"></TD>
<TD bgcolor="#fdfffe" align="center"></TD>
<TD bgcolor="#f5fefa" align="center"></TD>
</TR>
<TR>
<TD bgcolor="#fdfffe" align="center" height="65"></TD>
<TD bgcolor="#f5fefa" align="center"></TD>
<TD bgcolor="#fdfffe" align="center"></TD>
</TR>
<TR>
<TD bgcolor="#f5fefa" align="center" height="65"></TD>
<TD bgcolor="#fdfffe" align="center"></TD>
<TD bgcolor="#f5fefa" align="center"></TD>
</TR>
<TR>
<TD bgcolor="#fdfffe" align="center" height="65"></TD>
<TD bgcolor="#f5fefa" align="center"></TD>
<TD bgcolor="#fdfffe" align="center"></TD>
</TR>
<TR>
<TD bgcolor="#f5fefa" align="center" height="65"></TD>
<TD bgcolor="#fdfffe" align="center"></TD>
<TD bgcolor="#f5fefa" align="center"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--バナーリンク用の枠 ここまで-->


列を追加する時はこのタグを</TR></TBODY></TABLE></CENTER>の前に付ければOK

　　
</TR>
<TR>
<TD bgcolor="#fdfffe" align="center" height="65"></TD>
<TD bgcolor="#f5fefa" align="center"></TD>
<TD bgcolor="#fdfffe" align="center"></TD>
</TR>
<TR>
<TD bgcolor="#f5fefa" align="center" height="65"></TD>
<TD bgcolor="#fdfffe" align="center"></TD>
<TD bgcolor="#f5fefa" align="center"></TD>


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね








メニュー用の枠

メニューに使うとおしゃれな枠です。

Various Colors
　
　
　
　


<!--* Various Colors * メニュー用の枠 ここから-->
<CENTER>
<!--この下、bgcolor=枠の色 cellpadding=枠内の余白 cellspacing=枠の太さ 壁紙を指定する場合はbackground="●●.gif"の部分で指定-->
<TABLE bgcolor="#d8d8eb" cellpadding="4" cellspacing="4" background="●●.gif">
<TBODY>
<TR>
<!--この下、bgcolor=は枠内部の色 -->
<TD align="center" bgcolor="#fafafc" nowrap>ここに内容を記入</TD>
</TR>
<TR>
<TD align="center" bgcolor="#fafafc" nowrap></TD>
</TR>
<TR>
<TD align="center" bgcolor="#fafafc" nowrap></TD>
</TR>
<TR>
<TD align="center" bgcolor="#fafafc" nowrap></TD>
</TR>
<TR>
<TD align="center" bgcolor="#fafafc" nowrap></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<!--メニュー用の枠 ここまで-->


列を追加する時はこのタグを</TR>の前に付ければOK♪

<TR>
<TD align="center" bgcolor="#fafafc" nowrap></TD>


☆ 赤い文字の所は色なので自分の好きな色に変えて使ってね




Copyright (C) 2001-2014. Various Colors. All rights reserved.