A.T-MOON

contents

パンくずリスト

メッセージエリア



    表示と配置の指定@

メッセージエリア

マーク 位置の指定 position: A;B: C;

 埋め込み: {position: A;B: C;}
 インライン: <○○ style="position: A;B: C;">ここに配置したいもの</○○>


position属性の値を使って、要素を指定した位置で配置します。
その部分は通常の配置とは別に扱われるようになるため、他の要素の配置には一切影響を与えなくなります。
距離は全て親ボックスからの距離となります。
Aにはstaticrelativeabsolutefixedが入ります。
Bにはtopbottomleftrightz-index:○が入ります。
Cにはpx(ピクセル)が入ります。

A 表示の設定
static デフォルト
relative 相対位置指定
absolute 絶対位置指定
fixed 絶対位置指定(スクロールしても移動しない)
B どこからの位置か
top 上から
bottom 下から
left 左から
right 右から
z-index:○ 重なる順序を○に数値で指定
B 親ボックスからの距離
px ピクセルで数値を指定

※例)
これが埋め込みスタイルシートで指定した
上から730px、左230pxの位置に表示された
幅300px、パディング20px、border-styleはridge、
border-widthはthinのボックスです。
線の種類を指定しないと線が出ませんよ

これがインラインスタイルシートで指定した
上から870px、左230pxの位置に表示された
幅300px、パディング20px、border-styleはdotted、
border-widthはthinのボックスです。
線の種類を指定しないと線が出ませんよ
<html>
 <head>
 <style type="text/css">
 <!--

 .sample_box9{
  position: absolute;;
  top: 730px;
  left: 230px;
  width: 300px;
  border-style: ridge;
  border-width: thin;
  padding: 20px;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font>
  <div class="sample_box9">
  これが埋め込みスタイルシートで指定した<br>
  上から730px、左230pxの位置に表示された<br>
  幅300px、パディング20px、border-styleはridge、<br>
  border-widthはthinのボックスです。<br>
  線の種類を指定しないと線が出ませんよ <br>
  </div>

 <br>
  <div style="position: absolute; top: 870px; left: 230px; width: 300px;border-style: dotted;border-width: thin;padding: 15px;">
 これがインラインスタイルシートで指定した<br>
 上から870px、左230pxの位置に表示された<br>
 幅300px、パディング20px、border-styleは<br>
 dotted、<br>
 border-widthはthinのボックスです。<br>
 線の種類を指定しないと線が出ませんよ <br>
 </div>

 </body>
</html>

まずは埋め込みスタイルシートです。
要素名を付けましょう。ここではsample_box9と名付けました。
セレクタの種類の所で説明しましたが
クラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
よってここではクラスセレクタを使用します。
埋め込みスタイルシート内のsample_box9でボックスの表示位置を指定をします。
この時枠線の種類を忘れず指定しましょう。記述しないとデフォルトが適用され、枠線が表示されません。
body内の表示したい所に範囲を指定して記述します。(範囲の指定はコチラ→範囲の指定

次にインラインスタイルシートです。
body内の表示したい所に範囲を指定して記述するのは同じなのですが、指定範囲に直接、styleの記述します。
<style="">という形で記述していきます。
それぞれのプロパティを;(半角セミコロン)で区切って記述します。

ページTOP

マーク 要素の重なる順番を指定 position: absolute;z-index: A;

 埋め込み: {position: absolute;z-index: A;}
 インライン: <○○ style="position: absolute;z-index: A;">ここに文字</○○>


上の【位置の指定】のところで出てきたz-indexですが
position属性の値であるz-indexを記述することにより
いくつかある要素を重なる順番を指定して重ねることができます。
Aに数値を記述します。
通常表示されるものを0として、値が大きいものほど上に(重ねられた状態で)表示されます。



※例)
z-index1〜3を埋め込みスタイルシートで指定。
z-index4〜6をインラインスタイルシートで指定しています。
z-index:1
z-index:2
z-index:3

z-index:4
z-index:5
z-index:6
<html>
 <head>
 <style type="text/css">
 <!--

 .sample_box10{
  position: absolute;
  z-index: 1;
  top: 2230px;
  left: 270px;
  width: 80px;
  height: 80px;
  background-color: black;
  color: silver;
  border-style: ridge;
  border-width: thin;
  padding: 10px;
  }

 .sample_box11{
  position: absolute;
  z-index: 2;
  top: 2260px;
  left: 340px;
  width: 80px;
  height: 80px;
  background-color: red;
  color: silver;
  border-style: ridge;
  border-width: thin;
  padding: 10px;
  }

 .sample_box12{
  position: absolute;
  z-index: 3;
  top: 2300px;
  left: 310px;
  width: 80px;
  height: 80px;
  background-color: blue;
  color: silver;
  border-style: ridge;
  border-width: thin;
  padding: 10px;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font>
  <div class="sample_box10">
  z-index1
  </div>

  <div class="sample_box11">
  z-index2
  </div>

  <div class="sample_box12">
  z-index3
  </div>

 <br>
  <div style="position: absolute;z-index: 4; top: 2280px; left: 240px; width: 80px; height: 80px; background-color: green; color: silver; border-style: inset; border-width: medium; padding: 10px; border-style: inset;">
 z-index:4
 </div>

  <div style="position: absolute;z-index: 5; top: 2310px; left: 410px; width: 80px; height: 80px; background-color: yellow; color: silver; border-style: inset; border-width: medium; padding: 10px; border-style: inset;">
 z-index:4
 </div>

  <div style="position: absolute;z-index: 6; top: 2340px; left: 370px; width: 80px; height: 80px; background-color: pink; color: silver; border-style: inset; border-width: medium; padding: 10px; border-style: inset;">
 z-index:4
 </div>

 </body>
</html>

まずは埋め込みスタイルシートです。
要素名を付けましょう。ここではsample_box10sample_box11sample_box12と名付けました。
セレクタの種類の所で説明しましたが
クラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
よってここではクラスセレクタを使用します。
埋め込みスタイルシート内のsample_box10sample_box11sample_box12で枠の要素の重なる順番を指定をします。
この時枠線の種類を忘れず指定しましょう。記述しないとデフォルトが適用され、枠線が表示されません。
body内の表示したい所に範囲を指定して記述します。(範囲の指定はコチラ→範囲の指定

次にインラインスタイルシートです。
body内の表示したい所に範囲を指定して記述するのは同じなのですが、指定範囲に直接、styleの記述します。
<style="">という形で記述していきます。
それぞれのプロパティを;(半角セミコロン)で区切って記述します。

ページTOP

BOXの内側の余白を指定 表示と配置の指定A