Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

要素を相対配置する

要素は、通常はページの流れの中の自然な位置に置かれます。この元の位置を基準にして要素を移動することを「相対配置」と言います。相対は位置を指定するには、positionプロパティにrelativeを設定します。相対配置の場合、周囲の要素には全く影響がありません。

■ 要素を相対配置するには

1.  position:relative と入力します。 (セミコロンも忘れずに入力します)

2. toprightbottomleftと入力します。 それぞれ上、右、下、左に移動することを示します。

3. :v と入力します。 vの部分には、もともとの位置からの移動距離(絶対値または相対地)を単位つきで入力します。(10pxなど)

4. 必要であれば、; (セミコロン)を入力して 2.〜3.を繰り返し、別の方向への移動距離を指定します。

■ 補足

・上の3.では絶対値又は相対地のどちらかを入力します。単位は、相対単位と絶対単位の2種類に分類されます。

相対単位

em:要素のフォントサイズ値を表します。

ex:関連フォントの「x-height」(各フォントで定義されていて、小文字のxに近い高さ)を表します。

px:ピクセル、表示に使う装置の解像度を表します。

絶対単位

in:インチ(1in=2.54cm)

cm:センチメートル

mm:ミリメートル

pt:ポイント(1/72in)

pc:パイカ(1pc=12pt)

・相対配置では、親要素ではなくその要素自信のもともとの位置が基準となります。ほかの要素に対して相対的に要素を移動することはできません。要素は、自分自身の本来の位置に対して相対的に移動します。

・相対配置を指定してもほかの要素には影響ありません。ほかの要素はその要素を含むボックスを基準に配置されます。要素同士がかさなることもあります。

・テキストをほかの要素の周りに回りこませるには、その要素を相対配置する必要があります。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box