|
|
|
ボックスについて
ボックスとは、その名のとおり箱です。よくプログラミング言語などでは変数を箱にたとえますが、ボックスは物理的（というより視覚的）な箱です。
ボックスは主にブロック要素の構造を指します。
ブロック要素にはデフォルトでマージン、
パディング、ボーダー
などが設定されていて、2次元の箱のように見えます。
といっても、<p>タグをいくらみてもそんなものが存在するようには見えません。そこで次のタグをコピー＆ペーストしてこれらの存在を確かめてください。
<p style="background-color:#FFFFCC; border:#CC0000 2px solid;">
ボックス１</p>
<p style="background-color:#FFFFCC; border:#CC0000 2px solid;">
ボックス２</p>
ボックスとボックスの間の間隔がマージン、枠線と文字の間の間隔がパディングです。ボーダーはデフォルトでは0pxになっていて、
border属性を用いることでそれを表すことができます。
また、マージンやパディングの間隔を設定することも出来て、それぞれmargin属性、padding属性を用います。
ボックスには幅や高さを設定することも出来ます。
<div align="center" style="width:720px">
<p style="background-color:#FFFFCC; border:#CC0000 2px solid; width:700px; height:300px;">ボックス１</p>
<p style="background-color:#FFFFCC; border:#CC0000 2px solid; width:350px; height:700px; float:left;">ボックス２</p>
<p style="background-color:#FFFFCC; border:#CC0000 2px solid; width:350px; height:700px;">ボックス３</p>
</div>
ボックスを使った簡単なデザイン例です。ボックスの幅はwidth属性、高さはheight属性を用いて設定します。
また、float属性は要素の回り込みを設定する属性で、詳しくはポジション関連の
要素の回り込みの設定で述べています。
ボックス同士を重ね合わせてデザインすることも可能です。
<p style="background-color:#FFFFCC; border:#CC0000 2px solid; width:300px; height:300px; position:absolute; top:150px; left:250px;">
ボックス１</p>
<p style="background-color:#FFFFCC; border:#CC0000 2px solid; width:350px; height:400px; float:left; position:absolute; top:200px; left:300px;">
ボックス２</p>
これを応用することで、文字に影をつけたりなどのレイアウトが実現できます。詳しくはポジション関連で扱っています。
また、ボックスはインライン要素にも設定でき、文字の周りに破線を引く、などの使い方が主です。IEではwidth属性を上手に使えば
ブロック要素並のデザインをインラインでも出来ますが、NNの場合width属性などをインラインではうまく認識してくれないため、
ブロックレベル要素を使用するようにしましょう。
|
ボックス関連