ホームページを自作します。エディタを使って自分でつくるオリジナルなホームページの作り方を説明します。SEO対策webサイトを作ります。

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>は入れ子構造の閉めの部分です。


以上です。
お疲れ様でした!。



 戻 る 


powered by QHM 6.0.4 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional