CSS の position を使ったレイアウトのサンプル

↓この記事が気に入ったら、ぜひシェアをお願いします!

CSS の position プロパティを使ったレイアウトをお勉強中です。

この方法の利点は、HTML の出現順に左右されないレイアウトができる所です。例えば、HTML の末尾に書いた内容をページの一番上に配置することができます。

以下、簡単にまとめてみました。間違ってたらゴメンナサイ。

スポンサーリンク

プロパティのキーワードについて

キーワード 意味 配置位置
absolute 絶対配置 直前(上位)ブロック要素の左上を基点に絶対配置
relative 相対配置 通常の出現位置(ソース上で書かれた所)を基点に相対配置
static 通常配置 通常の出現位置(ソース上で書かれた所)を基点に通常配置
fixed 固定配置 ブラウザの左上を基点に固定配置(スクロールの影響を受けない)

最後にソースの書き方によって、基点がどう変わるかのサンプルです。

サンプルコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>
&lt;div id=&quot;Layer1&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;Layer2&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;Layer3&quot;&gt;&lt;/div&gt;
</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>
&lt;div id=&quot;Layer1&quot;&gt;
  &lt;div id=&quot;Layer2&quot;&gt;
    &lt;div id=&quot;Layer3&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Layer3 は Layer2 を基点として配置されます。</p>
<!--  -->
</body>
</html>

実際の動作サンプル

スポンサーリンク

↓この記事が気に入ったら、ぜひシェアをお願いします!

↓ブログをフォローすると更新情報が届きます。

スポンサーリンク

コメント

  1. MKK より:

    border の 1px 分、width と height を調節しないと、はみ出しちゃいますね。WindowsのIEだと、見え方が違うのでしょうか?

  2. Bowz より:

    あっ!ホントだ! テストだと思って適当に書いてます。ゴメンナサイ…。 ご指摘ありがとうございます。