どうして、わざわざ絶対配置をするか?

Web ページは、基本的に HTML で書いた順に表示されます。表示される上から順番に内容を書いていけば、簡単に思い通りの表示をさせることができます。
人間が見る場合には、上から順に書く方法で全く問題はありませんが、Google や Yahoo などの検索エンジンも、検索する際上から順番に読みます。通常、Web ページの上の方にはメニューなどのすぺてのページに共通な記述が置かれています。ページ数の多いサイトほど、このメニューの記述は長くなります。すると、そのページ本来の内容は、メニューの後になりますので、検索エンジンなかなかそのページのキーワードを拾うことができません。
そこで、メニューなどの各ページ共通の記述は、HTML の下の方に書き、CSS で表示するときだけ絶対配置を使い上の方に持ってきます。そうすると、検索エンジンは、直ぐに各ページ特有のキーワードを拾えるようになり、検索サイトの検索で上位表示しやすくなります。

絶対配置のノウハウ

position:absorute は、要素を絶対位置配置します。単純に一つの要素だけを、position:absorute 指定後、要素の配置位置を指定をすると、基準は一番上位の要素 <body> になります。
position:absorute の配置の基準は、「親要素」に対して絶対的に配置という決まりです。基準としたい親要素は、position 指定した最初に出てくる親要素になります。position 指定した親要素を通常とおり配置したい場合は、単純に、position:relative と指定すれば OK です。position:relative を指定した要素内に position:absorute の子要素を作れば、position:relative を指定した要素を基準に、絶対位置が指定できます。

 

絶対配置のサンプル

position:absorute を理解するためのサンプルを示します。
このサンプルは、 <body> 要素の中に <div id="no1"> から <div id="no5"> の要素が順番にかかれています。<div id="no3"> と <div id="no4"> は、<div id="no2"> の中に配置されています。すなわち、id="no3"> と <div id="no4"> の絶対配置の親要素は、何も指定が無ければ <body> になりますが、<div id="no2"> に position:relative を指定すれば、<div id="no2"> が親要素になります。
サンプルのラジオボタンを押して、絶対配置の指定の仕方を確認してください。
サンプル: 絶対配置のサンプル

絶対配置のサンプルのソースコード

サンプルのソースコードは、次の通りです。
ソースコードには、CSS の切り替え部分が多くなってしまいましたが、<div id="・・・"> 要素のところに、注目してくださいね。

絶対配置を指定するソースコード

<!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=utf-8"> 
<meta http-equiv="content-style-type" content="text/css">
<link  href="position.css" rel="stylesheet" type="text/css">
<link  href="" rel="stylesheet" type="text/css" id="mystyle">
<script type="text/javascript"><!--
   function changesytle(cssfile) {
      document.getElementById('mystyle').href = cssfile;
      }
   function pulldown(id_name) {
      document.getElementById(id_name).style.display = "block";
   }
   function dspnone(id_name) {
      document.getElementById(id_name).style.display = "none";
   }
// --></script>
<title>CSS 絶対配置</title>
</head>
<body> 

<div id="no1"><p>一番上</p></div>

<div id="no2">

<p>二番目</p>
<p>「三番目」と「四番目」は、マウスを乗せるとプルダウン表示します。
スタイルの変更で選択すると、position:absorute でレイアウト配置を変更します。</p>
スタイルの変更:<br>
<input type="radio" name="abso" onclick="changesytle('');" checked>①div の色だけ指定<br>
<input type="radio" name="abso" onclick="changesytle('abso1.css');">②三番目だけを絶対指定<br>
<input type="radio" name="abso" onclick="changesytle('abso12.css');">③二番目を相対指定して三番目を絶対指定<br>
<input type="radio" name="abso" onclick="changesytle('abso12p.css');">④二番目を相対指定とpaddingし三番目を絶対指定<br>
<input type="radio" name="abso" onclick="changesytle('abso34.css');">⑤三番四番の順で上に<br>
<input type="radio" name="abso" onclick="changesytle('abso43.css');">⑥四番三番の順で上に<br>

<div id="no3"><p><a href="#" onmouseover="pulldown('no3_hide')" onmouseout="dspnone('no3_hide')">三番目</a></p><p id="no3_hide">三番目のプルダウン</p></div>

<div id="no4"><p><a href="#" onmouseover="pulldown('no4_hide')" onmouseout="dspnone('no4_hide')">四番目</a></p><p id="no4_hide">四番目のプルダウン</p></div>

</div>

<div id="no5"><p>五番目</p></div>

</body>
</html>

ラジオボタンの②から⑤に対応した、CSS のソースコードです。①は単に背景色と横幅を指定しているだけなので、掲載は省略しました。
①div の色だけ指定
<div id="no3"> と <div id="no4"> は、マウスを乗せると隠れている部分が表示され、表示された下の要素は下にずれます。
②三番目だけを絶対指定
<div id="no3"> に position:absorute 指定をしたので、<body> の一番上に移動します。絶対配置にしたので、<div id="no3"> にマウスを乗せても、それより下の要素はずれません。
③二番目を相対指定して三番目を絶対指定
<div id="no2"> に position:relative 指定をします。すると、<div id="no3"> は、親要素が <div id="no2"> になったので、その最上位に移動します。
④二番目を相対指定とpaddingし三番目を絶対指定
<div id="no3"> が移動し <div id="no2"> の部分が隠れてしまったので、padding で隠れた部分だけ、下にずらします。
⑤三番四番の順で上に
<div id="no3"> と <div id="no4"> を position:absorute で移動します。<div id="no3"> の方が、HTML で先に記述されているので、プルダウンした部分は <div id="no4"> に隠れてしまいます。
⑥四番三番の順で上に
<div id="no4"> 、<div id="no3"> の順になるように position:absorute で移動します。HTML で後に記述された <div id="no4"> を上にしたので、プルダウンした部分は 両方とも有効になりました。

abso1.css のソースコード

@charset "utf-8";
#no3 { position:absolute; top:0; left:0;}

abso12.css のソースコード

@charset "utf-8";
#no2 { position:relative; }
#no3 { position:absolute; top:0; left:0;}

abso12p.css のソースコード

@charset "utf-8";
#no2 { position:relative; }
#no3 { position:absolute; top:0; left:0;}
#no2 { padding-top:1.15em; }

abso34.css のソースコード

@charset "utf-8";
#no2 { position:relative; }
#no3 { position:absolute; top:0; left:0;}
#no4 { position:absolute; top:1.15em; left:0;}
#no2 { padding-top:2.3em; }

abso43.css のソースコード

@charset "utf-8";
#no2 { position:relative; }
#no3 { position:absolute; top:1.15em; left:0;}
#no4 { position:absolute; top:0; left:0;}
#no2 { padding-top:2.3em; }

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > CSS > 絶対配置