　枠を使ったレイアウト　

今度は、色々なレイアウトを工夫するために
枠を使う説明です。

ＢＯＤＹの中に次のソースを書き入れます。

　　　　　<DIV style="LEFT: 120px; WIDTH: 100px; COLOR: #ff0000;
　　　　　POSITION: absolute; TOP: 10px; HEIGHT: 150px;
　　　　　BACKGROUND-COLOR: #0000ff">
　　　　　</DIV>

　　　　　解説します。
　　　　　　　　これで「枠」が出来上がります。　この枠には背景、画像、文字
　　　　　　　　などを入れる事が出来ます。
　　　　　　　　以下、何処にどんな大きさの枠なのか説明します。

　　　　　　　　ＬＥＦＴ：　１２０ｐｘ　　　　　　　画面の左から１２０ｐｘのところから
　　　　　　　　ＷＩＤＴＨ：　１００ｐｘ　　　　　　枠の横幅が１００ｐｘで
　　　　　　　　ＴＯＰ：　１０ｐｘ　　　　　　　　　上から１０ｐｘのところから
　　　　　　　　ＨＥＩＧＨＴ：　１５０ｐｘ　　　　　縦幅が１５０ｐｘの大きさの枠です。

　　　　　　　　ＣＯＬＯＲ：　＃ＦＦ００００　　　　　　　　　　　　　　　文字色は赤
　　　　　　　　ＢＡＣＫＧＲＯＵＮＤ－ＣＯＬＯＲ：　＃００００ＦＦ　　背景色は青
　　　　　　　　　　（この背景は消してしまえば透明です）

　　　　　これを使ってちょっと遊んで見ます。

　　　　　ちょっと長いですがソースを書いて見ます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-2022-jp"><BASE
href="file://C:\Program Files\Common Files\Microsoft Shared\Stationery\">
<META content="MSHTML 6.00.2712.300" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#000000>
<DIV><FONT face="ＭＳＰゴシック" size=2></FONT> </DIV>
<DIV><FONT size=2></FONT> </DIV>
<DIV align=right><BR> </DIV>
<DIV
style="LEFT: 120px; WIDTH: 100px; COLOR: #ff0000; POSITION: absolute; TOP: 10px; HEIGHT: 150px; BACKGROUND-COLOR: #0000ff">
<DIV>1111111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>1111111</DIV></DIV>
<DIV
style="LEFT: 300px; WIDTH: 150px; COLOR: #ff0000; POSITION: absolute; TOP: 100px; HEIGHT: 200px; BACKGROUND-COLOR: #00ff00">
<DIV>111111111</DIV>
<DIV>1111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111111111</DIV></DIV>
<DIV
style="LEFT: 250px; WIDTH: 400px; COLOR: #00ff00; POSITION: absolute; TOP: 10px; HEIGHT: 200px; BACKGROUND-COLOR: #ff0000">
<DIV>1111111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>11111111111111111111111111111111</DIV></DIV>
<CENTER>
<DIV
style="WIDTH: 100px; COLOR: #6699ff; POSITION: absolute; HEIGHT: 150px; BACKGROUND-COLOR: #0000ff">
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV>
<DIV>111</DIV></DIV></CENTER></BODY></HTML>

　　　　　枠が重なった場合はソースで下（後）にあるものが上になります。
　　　　　これを応用すれば背景の上に画像や文字が幾重にも重ねて表示できます。
　　　　　また、画像の左右の文字の回り込みも簡単に処理できます。

　　　　　色々と応用してみて下さい。　　　　

　次はスクロールバー付きの枠（テキストボックス）

<P align=center><TEXTAREA style="FONT-SIZE: 10pt; WIDTH: 401px; COLOR: #000000; HEIGHT: 157px;
BACKGROUND-COLOR: #bce0f6" name=information rows=5 readOnly cols=47></TEXTAREA>
</P>　

　　　　　　