超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ 位置を指定する方法

HTML で位置を指定するときは<center>タグを使ったり、align 属性または valign 属性などを使って、左寄せ、右寄せ、上に配置、下に配置、中央に配置などを指定しました。CSS を使うと、上・下・左・右・中央といったおおまかな位置指定だけではなく、長さの単位を用いた位置指定ができます。前のページで勉強したボックスのマージンと合わせて使えば、かなり詳細な位置指定ができるようになります。

プロパティ説明
positionabsolute絶対的な位置指定
relative相対的な位置指定
top
left
right
bottom
単位mm,cm,pt,pxなど
親要素の指定値に対する割合
auto自動調整
z-index番号数字123
auto自動調整

◆絶対的な位置指定

position プロパティは位置の指定方法を決めます。絶対的な位置を指定するときは、プロパティ値を absolute にします。
絶対的な位置は、まわりの段落(ブロック)や画像などに関係なく、ある基準(通常は画面の端)からどのくらい離れているかで決定されます。

<html>
<head>
<title>絶対的な位置指定</title>
<style type="text/css">
<!--
div{
 background-color:#60f;
 color:#fff;
 width:300px;
 padding:10px;
 position:absolute;
}
 .position1{
 background-color:#f60;
 top:200px;
 left:150px;
}
 .position2{
 background-color:#080;
 top:300px;
 left:300px;
}
-->
</style>
</head>
<body>
<div>
CSS での位置指定は、まず position プロパティで「絶対的な指定」か「相対的な指定」かを決定し、その後 top left right bottom プロパティで上からの位置、左からの位置などを指定します。<br>
ここは位置指定をしていません。
</div>
<div class="position1">
ここは上から200px、左から150pxの位置になります。
</div>
<div class="position2">
ここは上から300px、左から300pxの位置になります。
</div>
</body>
</html>

ページはこのように表示されます。指→ ★ absolute1

このページのクラスを下のように変えてみます。

.position1{
 background-color:#f60;
 top:135px;
 left:150px;
}
.position2{
 background-color:#080;
 top:180px;
 left:300px;
}

ページはこのように表示されます。ボックスが重なって表示されていますね。
指→ ★ absolute2


◆相対的な位置指定

相対的な位置指定には、position プロパティの値として、relative を使います。相対的な位置は、何も指定しないで HTML を記述していったときの位置からどのくらい離れているかで指定します。
最初に HTML で記述してブラウザで確認してから、左に50pxずらしてみようと思ったら left プロパティの値を -50px とし、100px 下げようと思ったら top プロパティの値を 100px とします。

<html>
<head>
<title>相対的な位置指定</title>
<style type="text/css">
<!--
div{
 background-color:#60f;
 color:#fff;
 width:300px;
 padding:10px;
 position:relative;
}
.position3{
 background-color:#f60;
}
.position4{
 background-color:#f60;
 top:50px;
 left:150px;
}
.position5{
 background-color:#f60;
 top:100px;
 left:300px;
}
-->
</style>
</head>
<body>
<div>
相対的な位置指定を行う場合は、まず何も考えずに HTML で記述してブラウザで位置を確認してみます。
</div>
<div class="position3">
ここが特に位置を指定しないときの位置です。ここが基準となります。
</div>
<div class="position4">
ここは下に50px、右に150pxずらした位置になります。ボックスの幅が300pxですから、このボックスの左端は基準となるボックスのちょうど真ん中になりますね。
</div>
<div class="position5">
ここは下に100px、右に300pxずらした位置になります。このボックスの左端は基準となるボックスのちょうど右端になります。
</div>
</body>
</html>

ページはこのように表示されます。指→ ★ relative

top プロパティを使って上にずらしたいときの値はマイナス(−)、left プロパティを使って左にずらしたいときの値はマイナス(−)です。間違えないようにして下さいね。
もちろんプロパティ値によっては、重ね合わせることもできます。



このように画像の位置指定もできます。 女の子 犬

◆重ね合わせの順番を指定する

段落(ブロック)や画像が重なったとき、通常は HTML ファイルにあとから記述した方が前に来ます。
z-index プロパティを使えば、重ね合わせの順番を指定することができます。プロパティ値として数字を使いますが、数が大きい方が前になります。最初が1でなくてもかまいません。とにかく数が大きいほど前に来ます。
先ほど「絶対的な位置指定」で使ったファイル( absolute2 )を使ってみます。 CSS を記述した部分に下のように、z-index プロパティを書き加えてみて下さい。

div{
 background-color:#60f;
 color:#fff;
 width:300px;
 padding:10px;
 position:absolute;
 z-index:6;
}
.position1{
 background-color:#f60;
 top:135px;
 left:150px;
 z-index:5;
}
.position2{
 background-color:#080;
 top:180px;
 left:300px;
 z-index:4;
}

ページはこのように表示されます。上のブロックの方がプロパティ値が大きいので、前面に来ましたね。
指→ ★ z-index



犬が後ろに行ったわ 女の子 犬 いつか食べてやる