Cascading Style Sheet

Part 5

ここでは、ポジショニングの各プロパティについて説明します。

配置方法を設定する。

ボックスの表示位置を決定するための配置方法を指定することができます。次のプロパティを使います。

position : 値

値には次のものがあります。

static（特に配置方法を指定しない標準の状態に設定します。）
relative（標準の位置からの相対位置で配置するように指定します。）
absolute（このボックスを含む１つ外側にあるボックスからの位置で配置するように指定します。）
fixed（このボックスを含む１つ外側にあるボックスからの位置で配置するように指定します。absoluteとの違いは、absoluteがそのあとに続く他の要素のレイアウトに影響を与えないのに対し、fixedは一度指定された要素はその位置で固定され、スクロールなどをしても常に同じ位置に表示されます。
inherit（親（祖先）要素の値を継承します。）

上下左右からの位置を設定する。

positionで、static以外の値を指定した場合に、上下左右からの位置を指定することができます。次のプロパティを使います。

top
bottom
left
right

値は次のものがあります。

数値＋単位で指定
パーセントで指定
auto（要素やボックスのタイプに応じて自動的に調整されます。）
inherit

具体的には次のように設定します。

<DIV STYLE=": position : absolute; bottom : 10%; left : 100px; color : #f33; font-size : x-large">
Positionの具体例
</DIV>

「Positionの具体例」という文字が下から10%、左から100pxの位置に、色が#f33で、フォントサイズがx-largeで表示されているはずです。（但し、IE4とNN4のみ）

Positionの具体例

文字を重ねるには？

z-indexで重なりの順序を指定します。番号が大きいほど手前にきます。

<p>
<span style="position:relative; top:0ex; left:0ex;
z-index:3; font-size: xx-large;
background-color: blue">HTMLについて</span>
<br>
<span style="position:relative; top:0.5ex; left:3em;
z-index:2; background-color: red; font-size:xx-large;">
のメモ</span>
<br>
<span style="position:relative; top:1ex; left:3.5em;
z-index:1; font-size:xx-large; background-color: green;">
です。</span>
</P>

以上を、HTMLファイルに記述すると、以下の表示が得られます。（CSSファイルではないので注意して下さい。）

HTMLについて
のメモ
です。

文字を重ねるには？（マージンを使う方法）

マージンを使って、文字を重ねることもできます。

まず、CSSファイルに以下のように書いておきます。

.t1 {
   font : italic 72px/72px Times, serif; 
   color : rgb(0,90,156); 
   text-align : center; 
   text-shadow : 0.2em 0.2em; 
   margin-top : 20px; 
}

.t2 {
   font : bold 60px/60px Times, serif; 
   color : silver; 
   text-align : center; 
   text-shadow : 0.2em 0.2em; 
   margin-top : -60px; 
   margin-bottom : 10px; 
}

次に、HTMLファイルには以下のように書きます。

<H1 CLASS="t1">Cascading Style Sheet</H1>
<H1 CLASS="t2">Part 1</H1>

すると、次のように表示されます。

Cascading Style Sheet

Part 1

top up index new search mail