文字を表示する場合は文章の長さに合わせて[width="0"]の数字を 大きくして横幅の調整をする(横幅を指定しないと縦に文章がのびてしまいます) 画像タグと</div>の間で改行すると表示したときに画像下の部分と 枠の間に間隔ができてしまうのでご紹介しているタグを改行しないで下さい ([src="画像URL"]の部分に画像のURLを挿入すれば画像の大きさに合わせて枠がつきます) 枠の太さ[thick=太い]/[medium=中間]/[thin=細い] (ここではすべて[thick=太い]にしてあります)

==枠無し==
枠が見えなくてもレイアウトとして使用できます


<div style="border:NONE;width:横幅;"> ここに文章</div>


<div style="border:NONE;width:横幅;"> <img src="画像ＵＲＬ"></div>







==実線枠==


<div style="border:thick solid カラーコード;width:横幅;"> ここに文章</div>


<div style="border:thick solid カラーコード;width:横幅;"> <img src="画像ＵＲＬ"></div>







==二重線枠==


<div style="border:thick double カラーコード;width:横幅;"> ここに文章</div>


<div style="border:thick double カラーコード;width:横幅;"> <img src="画像ＵＲＬ"></div>







==点線枠==


<div style="border:thick dotted カラーコード;width:横幅;"> ここに文章</div>


<div style="border:thick dotted カラーコード;width:横幅;"> <img src="画像ＵＲＬ"></div>







==破線枠==


<div style="border:thick dashed カラーコード;width:横幅;"> ここに文章</div>


<div style="border:thick dashed カラーコード;width:横幅;"> <img src="画像ＵＲＬ"></div>







==へこみ線枠==


<div style="border:thick groove カラーコード;width:横幅;"> ここに文章</div>


<div style="border:thick groove カラーコード;width:横幅;"> <img src="画像ＵＲＬ"></div>







==立体線枠==


<div style="border:thick ridge カラーコード;width:横幅;"> ここに文章</div>


<div style="border:thick ridge カラーコード;width:横幅;"> <img src="画像ＵＲＬ"></div>







==上部に影のある線枠==


<div style="border:thick inset カラーコード;width:横幅;"> ここに文章</div>


<div style="border:thick inset カラーコード;width:横幅;"> <img src="画像ＵＲＬ"></div>







==下部に影のある線枠==


<div style="border:thick outset カラーコード;width:横幅;"> ここに文章</div>


<div style="border:thick outset カラーコード;width:横幅;"> <img src="画像ＵＲＬ"></div>