CSS の position プロパティを使ったレイアウトをお勉強中です。
この方法の利点は、HTML の出現順に左右されないレイアウトができる所です。例えば、HTML の末尾に書いた内容をページの一番上に配置することができます。
以下、簡単にまとめてみました。間違ってたらゴメンナサイ。
プロパティのキーワードについて
キーワード | 意味 | 配置位置 |
---|---|---|
absolute | 絶対配置 | 直前(上位)ブロック要素の左上を基点に絶対配置 |
relative | 相対配置 | 通常の出現位置(ソース上で書かれた所)を基点に相対配置 |
static | 通常配置 | 通常の出現位置(ソース上で書かれた所)を基点に通常配置 |
fixed | 固定配置 | ブラウザの左上を基点に固定配置(スクロールの影響を受けない) |
最後にソースの書き方によって、基点がどう変わるかのサンプルです。
サンプルコード ———————————————————————-
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>position プロパティ – 基点のテスト</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
.Layer1 {
position: relative;
top: 0px;
left: 0px;
width: 600px;
height: 400px;
border: 1px solid red;
}
.Layer2 {
position: absolute;
top: 0px;
left: 300px;
width: 300px;
height: 400px;
border: 1px solid blue;
}
.Layer3 {
position: absolute;
top: 200px;
left: 0px;
width: 300px;
height: 200px;
border: 1px solid orange;
}
-->
</style>
</head>
<body>
<!-- -->
<div class="Layer1">
<pre>
.Layer1 {
position: relative;
top: 0px;
left: 0px;
width: 600px;
height: 400px;
border: 1px solid red;
}
</pre>
</div>
<div class="Layer2">
<pre>
.Layer2 {
position: absolute;
top: 0px;
left: 300px;
width: 300px;
height: 400px;
border: 1px solid blue;
}
</pre>
</div>
<div class="Layer3">
<pre>
.Layer3 {
position: absolute;
top: 200px;
left: 0px;
width: 300px;
height: 200px;
border: 1px solid orange;
}
</pre>
</div>
<!-- -->
<p>上の HTML ソースは以下の様になっています。</p>
<pre>
<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>
</pre>
<p>Layer3 は Layer1 を基点として配置されます。</p>
<!-- -->
<div class="Layer1">
<pre>
.Layer1 {
position: relative;
top: 0px;
left: 0px;
width: 600px;
height: 400px;
border: 1px solid red;
}
</pre>
<div class="Layer2">
<pre>
.Layer2 {
position: absolute;
top: 0px;
left: 300px;
width: 300px;
height: 400px;
border: 1px solid blue;
}
</pre>
<div class="Layer3">
<pre>
.Layer3 {
position: absolute;
top: 200px;
left: 0px;
width: 300px;
height: 200px;
border: 1px solid orange;
}
</pre>
</div>
</div>
</div>
<!-- -->
<p>上の HTML ソースは以下の様になっています。</p>
<pre>
<div id="Layer1">
<div id="Layer2">
<div id="Layer3">
</div>
</div>
</div>
</pre>
<p>Layer3 は Layer2 を基点として配置されます。</p>
<!-- -->
</body>
実際の動作サンプル ———————————————————————-
– サンプル