ページレイアウトに使えるCSSプロパティ

クロスブラウザなレイアウトデザインテクニック 第6回

ポジショニングで細かくレイアウト（position、top、right、bottom、leftプロパティ）

　floatプロパティに比べ、さらに細かく配置方法や位置などを指定をすることができるのが、positionプロパティおよびtop、right、bottom、leftの各プロパティを利用する方法です。

positionプロパティ

　positionプロパティは、ボックスの配置方法を指定するプロパティです。値には、通常配置の「static」、相対配置の「relative」、絶対配置の「absolute」、固定配置の「fixed」を指定することができます。実際の配置位置については、次項で説明するtop、right、bottom、leftの各プロパティで指定します。

　図5のように、positionプロパティで「relative」を指定した場合、要素本来の位置が基準となって配置されるのに対し、「absolute」や「fixed」では親ボックスの位置が基準となる、という点に注意しましょう。「fixed」では、さらにスクロールに対して固定的に配置されます。

図5：positionプロパティによる配置方法と基準位置

top、right、bottom、leftプロパティ

　ボックスの実際の配置位置については、top、right、bottom、leftの各プロパティで指定します。基準となるボックスから、指定した要素のボックスのマージンの外側までの距離を指定します。

　各プロパティは値として、「実数値＋単位」や「%値」、初期値の「auto」を指定することができます。

top、right、bottom、leftプロパティの値と説明

値	説明
実数値＋単位	相対配置のときはその要素本来の位置からの距離、絶対配置や固定配置のときは包含ブロックの四辺からの距離を基準として指定する。
%値	相対配置のときはその要素自体の幅または高さを、絶対配置や固定配置のときは包含ブロックの幅または高さを基準とする。topとbottomは高さに対する割合、leftとrightは幅に対する割合で指定する。基準となるボックスの高さが明確に指定されていない場合は、「auto」を指定した場合と同じ結果になる。
auto	初期値。要素やボックスの種類などに応じて自動的に調整される。

相対配置の例

　では、「相対配置」の実際のサンプルをみていきましょう。

［リスト6］XHTMLソース／03.html

<h1>position: relative</h1>
<h2>相対配置</h2>
<p>「position:relative」は、要素本来の位置が基準になります。</p>

　h2に「position: relative」および「top: -60px」を指定します。この場合、h2要素は本来の位置から上に60px移動して表示されます。後に続くp要素のボックスの位置は、h2要素のボックスが本来の位置から移動していないものとして計算されます。

［リスト7］CSSソース：相対配置の例／03.css

h1 {
  color: blue;
  font-size: 50px;
}
h2 {
  position: relative;  /* 相対配置 */
  top: -60px;
  background-color: black;
  color: white;
}

図6：相対配置の例（左：適用前、右：適用後）

　「position:relative」の適用前と適用後を重ねて移動距離を示したものが、次の図7になります。

図7：「position:relative」の適用前と適用後

　ここでは、topプロパティを使用していますが、他のプロパティの位置指定については、次の表を参考にしてください。

top、right、bottom、leftプロパティの説明

プロパティ	説明
top	基準となるボックスの上から指定したボックスの上までの距離を指定
right	基準となるボックスの右から指定したボックスの右までの距離を指定
bottom	基準となるボックスの下から指定したボックスの下までの距離を指定
left	基準となるボックスの左から指定したボックスの左までの距離を指定

　このサンプルでは、ブラウザのデフォルトスタイルを特に考慮していませんが、実際には、ブラウザによってデフォルトスタイルシートが異なる場合もあります。必要に応じて、margin、padding、width、height、line-heightなどの各プロパティを指定すると良いでしょう。