ドリル式ホームページの作り方

絶対配置と相対配置

ドリル式ホームページの作り方TOP  >>  Lesson7〜positionを使ったレイアウト〜  >>  絶対配置と相対配置

絶対配置と相対配置(position)

IDとclass付けをする前に、positionタグについて説明します。絶対配置は容易に理解できると思いますが、相対配置はヒトによっては理解しづらいと思うので、ちょっと気を引き締めて聞いてください。

絶対配置(absolute)

絶対配置(absolute)というのは、パソコン画面左上を基点として、指定した座標に配置させることを意味します。

div {
position:absolute;
top:20px;
left:20px;
}

たとえば、下のようにdivでくくられたboxが並んでいるとします。

このうちdivAに対してposition:absoluteを指定すると、divAが画面左上を基点に、指定された座標に移動します。

divAのボックスが移動すると、それよりも下のボックスはdivAを無視してその分繰り上がって配置されます。

相対配置(relative)

一方、相対配置(relative)というのは、通常配置される場所を基点として、配置する方法です。

下記のhtmlとcssを実行してみると、このようになります。→サンプル

<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style7.1.css" media="all" />
</head>
<body>
<div id="a1">
<p>あいうえお</p>
</div>
<div id="a2">
<p>かきくけこ</p>
</div>
<div id="a3">
<p>さしすせそ</p>
</div>
</body>
</html>

div {
border:solid 1px #000;
width:200px;
height:50px;
}
div#a2 {
position:relative;
top:20px;
left:20px;
}

相対配置の一般的な使い方

相対配置を指定するrelativeタグは、実際に上の例のような使い方をするのはほとんどありません。(まったくないかもしれません・・・)

ではどんなときに使うのかと申しますと、「IE6のバグの対処」と「absoluteの基点変更」の2つのケースです。

「IE6のバグの対処」については、これ以降のlessonで述べることにして、ここでは、よく使う「absoluteの基点変更」について説明します。

下の図のような、divAを固定した上で、divaの位置を指定する場合に使用します。

div.A {
position:relative;
}
div.a {
position:absolute;
top:20px;
left:20px;
}

divAに対して、relativeを指定すると、基点がPC画面左上から、通常配置の時のdivAの左上に移動します。

その後に、divaをdivAの左上を基点に絶対配置させています。

この方法は、タイトルロゴの右に、サイト内検索ボタンやsitemapを置くときなんかに非常によく使われる手法です。


Lesson7〜positionを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. divタグを理解する
  3. div骨格にコンテンツを挿入する
  4. 絶対配置と相対配置
  5. divのスタイルを指定する
  6. 他のタグのスタイルを指定する
  7. スクロールボックスを設置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.