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

propertyhardtoget

WEBデザインCSSの基礎分かり難いCSSの属性

分かり難い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」で指定しています。親要素は画面の左上(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="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ページに結果が表示されます。

 
このプログラムの解説を見る


 

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

最新の更新 RSS  Valid XHTML 1.0 Transitional