propertyhardtoget
分かり難いCSSの属性
ここで取り上げる最初の属性は「position」です。
この属性「position」の構文は、以下の通りです。
position: （位置）
（位置）＝表示位置の指定方法
（static、relative、absolute、fixed）
positionは、段落や特定範囲などコンテンツ内容を任意のポジション(位置）に
表示するための、指定方法を示す属性（プロパティ、property）です。
以下の値から指定できます。今回は「absolute」について学びます。
●static
標準の配置指定。無指定の場合と同じ。
●relative
標準の配置指定を基準にして、相対的にシフトする相対位置指定。
位置指定には、left、top、right、bottomを使用。
後続の要素は、これが標準配置になっているものとして、
通常配置に配置されます。
●absolute
親要素のブロックに対する絶対位置指定。
位置指定には、left、top、right、bottomを使用。
●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=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>属性値absoluteの使い方</title>
<style type="text/css">
<!--
#display {
position:absolute;
left:120px;
top:260px;
width:340px;
height:350px;
padding-left:10px;
background-color:#FF66FF;
font-size:200%
}
#place{
position:absolute;
left:500px;
top:50px;
width:500px;
height:650px;
padding-left:10px;
background-color:#22ff99;
}
.setumei{
font-size:50%;
}
-->
</style>
</head>
<body>
<div id="place">
●このブロック(背景色は緑）位置の指定方法はid属性「#plase」で指定しています。親要素は画面の左上（０，０）の座標が基点と成ります。
<br />
内容は下記の通りです。<br />
#place｛<br />
position:absolute；<br />
left:500px；<br />
top:50px；<br />
width:500px;<br />
height:650px;<br />
padding=left:10px;<br />
background-color:#22ff99;<br />
}<br />
<div id="display">
<div class="setumei">
●ここのブロック（背景色はピンク）位置の指定方法はid属性「#display」で指定しています。親要素は背景色緑の左上(500px、50px）が基点と成ります。（<br />
内容は下記の通りです。<br />
#display｛<br />
position:absolute;<br />
left:120px;<br />
top:260px;<br />
width:340px;<br />
height:350px;<br />
padding=left:10px;<br />
background-color:#FF66FF;<br />
font-size:200%；<br />
｝<br />
</div>
</div>
<div style="position:absolute;bottom:30px">
<a href="http://makehp.mitioka.com/index.php?propertyhardtoget#absTexec"><span style="color:red;font-weight:bold;font-size:18px">戻る</span></a>
</div>
</div>
</body>
</html>
【 注意 】
この小プログラムをコピーして、エディタに貼り付けてもいいですが、その時注意すべきことは、
貼り付けた後、そのプログラムの各文頭には「全角スペース」が入っているので、それらを全て
「半角スペース」に全置換してから、ファイル名を付けて、デスクトップに保存します。
その後、保存したそのファイルをクリックすると、webページに結果が表示されます。
