[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。

レイアウトテクニックあれこれ

絶対指定と相対指定の違いは？

　要素が表示される位置をピクセル単位で指定するには、「position」プロパティを使用します。このプロパティで実際によく使用される値は「relative」（相対指定）と「absolute」（絶対指定）の２つです。

デフォルトでボックスを４つ並べる

　サンプルとして、ブラウザのウィンドウ枠に見立てたグレーの枠の中に、縦50ピクセル、横100ピクセルのボックスを４つ並べました。<DIV>要素は前後に改行が入るブロックレベル要素なので、デフォルトでは以下のように縦に並びます。

div001
div002
div003
div004
＜サンプルコード＞

<form>
<label for="name">お名前</label>
<input id="name" name="name"><br />
<label for="address">住所</label>
<input id="address" name="address"><br />
<label for="phone">電話番号</label>
<input id="phone" name="phone"><br />
</form>

ボックス002を絶対指定にすると？

　薄緑色■のボックス002を絶対指定で縦に50ピクセル、横に150ピクセルの位置指定を行いました。絶対指定されたボックスは、あたかも独立したレイヤー上に配置されたように扱われるため、残りのボックスは薄緑色■のボックス002を無視する形で通常配置されます。

div001
div002
div003
div004
＜サンプルコード＞

<div style="width:100px; height:50px;">div001</div>
<div style="width:100px; height:50px;
position:absolute; top:50px; left:150px;">div002</div>
<div style="width:100px; height:50px;">div003</div>
<div style="width:100px; height:50px;">div004</div>

ボックス003を相対指定にすると？

　今度は、薄オレンジのボックス003を相対指定で縦に20ピクセル、横に30ピクセル位置指定してみるとこうなります。絶対指定の時とは異なり、赤いボックス004は薄オレンジ色■のボックス003の元の位置を認識した上で通常の位置に表示されていることが分かります。

div001
div002
div003
div004
＜サンプルコード＞

<div style="width:100px; height:50px;">div001</div>
<div style="width:100px; height:50px;
position:absolute; top:50px; left:150px;">div002</div>
<div style="width:100px; height:50px;
position:relative; top:20px; left:30px;">div003</div>
<div style="width:100px; height:50px;">div004</div>

サイトトップページへ戻る