第33回 CSSのpositionに挑戦テーブルレイアウトを卒業しよう

CSSのpositionに挑戦

CSSをつかってレイアウトをする際、floatやmargin、padding等のプロパティを使いますが、その他にもpositionプロパティというのがあります。若干ややこしいので慣れが必要ですが、使いこなせればより自由度の高いレイアウトが可能になります。

positionプロパティ

positionプロパティは配置をどこにするかを定めるプロパティです。値は配置の基準点を定める次の4つがあります。基準点を定めた後、top,right,bottom,leftプロパティを使い、配置箇所を決めます。

static
初期値。positionを指定しない場合の通常通りの配置で、位置指定は無効です。
relative
相対配置。staticの際に表示される、通常配置の場所を基準として配置します。
absolute
絶対配置。positionプロパティで位置指定された親要素、または指定がない場合はブラウザのウィンドウを基準として配置します。
fixed
絶対配置+位置固定。absoluteと同じ位置に配置されますが、位置が固定され、ページをスクロールしても常にウィンドウ内の同じ位置に配置されます。(IE6未対応)
※基準…ブラウザのウィンドウまたは親要素の左上の角。

サンプルファイルを見る

ソースコードは以下。

<body>
<div id="box1">box1-static</div>
<div id="box2">box2-relative</div>
<div id="box3">
<p>box3-absolute</p>
</div>
<div id="box4">box4-fixed</div>
<img src="logo_m-School.jpg" width="150" height="66" alt="ロゴ" />
</body>
body {
margin: 0px;
padding: 0px;
height:9999px;
background-image: url(grid.jpg);
background-repeat: no-repeat;
}
div {
width: 148px;
height: 98px;
background: #FFC;
border: 1px solid #FC3;
}
#box1 {
position: static;
top: 50px; /*位置指定は無効*/
left: 50px; /*位置指定は無効*/
}
#box2 {
position: relative;
top: 50px; /*通常位置基準*/
left: 50px; /*通常位置基準*/
}
#box3 {
position: absolute;
top: 250px; /*ブラウザのウィンドウ基準*/
left: 250px; /*ブラウザのウィンドウ基準*/
}
#box3 p {
margin: 0px;
padding: 0px;
position: absolute;
top: 50px; /*#box3基準*/
left: 50px; /*#box3基準*/
border: 1px solid #FC3;
}
#box4 {
position: fixed;
top: 0px; /*ブラウザのウィンドウ基準 + 固定*/
left: 200px; /*ブラウザのウィンドウ基準 + 固定*/
}
img {
position: absolute;
top: 434px; /*ブラウザのウィンドウ基準*/
left: 350px; /*ブラウザのウィンドウ基準*/
}

まず、body要素には配置位置がわかりやすいようにグリッド状の背景画像をおいています。1マス50ピクセルです。そして、fixedの効果がわかりやすいようにheightに大きい数値をいれて無理矢理スクロールできるようにしました。

body要素以下には、4つのdiv要素(box1~4)とimg要素を置いています。

box1はstaticにしているため、位置指定をしても無効です。

box2はrelativeで、これはposition指定をしない場合に通常配置される場所を基準として配置されます。

box3はabsoluteで、positionプロパティで位置指定された親要素、または指定がない場合はブラウザのウィンドウを基準として配置します。今回このbox3の親は特にないため、ウィンドウを基準にしています。

box3の中にあるp要素もabsoluteですが、box3にはpositionの指定があるため、box3を基準に配置されます。

box4はfixedで、absoluteと同様の基準で配置されますが、スクロールしても常にウィンドウ内の同じ場所に配置されます。IE6は対応していないため、static扱いになります。

img要素などのインライン要素も、同様にpositionでの位置指定が可能です。

基準点を考えるのが少しだけややこしいですが、分かってしまえば難しいことはありません。使いこなせれば、要素を自由自在に配置できるため、とても便利です。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
初心者のためのWeb用語集
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読