absoluteTestkaisetu
position:absolute;を使った「例 小プログラム」の解説
では、「例 小プログラム」の解説に入ります。
まず、
<!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>
この部分は、ホームページ作成の書き出し最初の部分です。
言わば「おまじない」みたいなものですね。(ヘッダー部の詳細はこちら を参照!)
続いて、
<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>
この部分は、ヘッダー部の後半部分です。
ここに、CSSとして、2つのid属性と、1つのクラス属性が定義されています。
この2つの「position:absolute;」は、プログラムを記述する位置関係によってブロック(範囲)が異なってきます。
2つのブロック部分は「入れ子構造」になっています。(CSSの詳細は、こちら)
次は<body>部分です。
まず、外側のブロックのstyleのid属性を決めます。背景色は緑色です。
<body>
<div id="place">
●このブロック位置の指定はid属性「#plase」で指定しています。親要素は画面の左上(0,0)の座標が基点と成ります。<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="place">~</div>)になります。背景色は緑色です。
ブロック部分を閉じる記号(</div>)は、次の「入れ子構造」が終わった後に書いてあります。
まずこの親ブロック(#place)では最初に、id属性「#place」の内容が表示されています。
各行文の最後に改行タグ(<br />)が追加されているのは、webページで見るとき、改行表示されていなければならないからです。
次は、内側のブロック部分(子ブロック)になります。背景色はpinkです。
<div id="display">
<div class="setumei">
●ここのブロック位置の指定はid属性「#display」です。親要素は背景色緑の左上(500px、50px)が基点と成ります。<br />
内容は下記の通り。<br />
#display{<br />
position:absolute;<br />
left:120px;
top:260px;
width:340px;
height:350px;
padding=left:10px;<br />
background-color:#FF66FF;<br />
font-size:200%;<br />
}<br />
</div>
</div>
「 <div id="display">
<div class="setumei">」
この「子ブロック」(#display)の背景色はpink色です。
このブロック部分(<div id="display">)の最初に説明文があります。
説明文を入れるためのブロック(孫ブロック)が(<div class="setumei">)です。
説明文の文字サイズを普通サイズ(100%)にするため、200%に対しての半分(font-size:50%;)にします。
そのため、クラス属性「<div class="setumei">」が必要です。
さて最後の部分は、お決まりの閉じ方ですね。
</div>
</body>
</html>
</div>は入れ子構造の閉めの部分です。
以上です。
お疲れ様でした!。