文章の表示順序(奥行き)を指定する
HTML言語を使用したホームページやブログなどのウェブサイトでは、
<タグ名 style="position:表示位置の指定方法; top:上側の位置; left:左側の位置; z-index:Z座標位置; ">
- タグ名: p または div タグで指定できます。spanタグ使えますが、InternetExplorerが対応していません。
- 表示位置の指定方法:記から選べます。
static HTMLレイアウト規則にしたがって自動的に決められる座標系 absolute BODYの左上が原点の絶対座標系 relative 直前のブロックタグが原点の相対座標系 - 上側の位置/左側の位置:表示位置の指定方法で指定した座標系を基準として、表示位置を指定します。px(ピクセル)指定が一般的ですが、下記の絶対サイズまたは相対サイズで指定できます。
絶対
サイズ意味 in インチ( 1 in = 25.4 mm ) cm センチメートル mm ミリメートル pt ポイント( 1 pt = 1/72 in) pc パイカ( 1 pc = 12 pt ) px※ ピクセル(表示上の 1 ドット幅) 相対
サイズ意味 em 基準書体の文字の高さ ex 基準書体の文字 x の高さ % 基準書体のサイズに対する百分率 ※正確にはデバイス依存の相対サイズ
- Z座標位置:表示順序(奥行き)を、単位なしの数値で指定します。数字が大きいほど手前に表示されます。Netscapeでは、負数(マイナスの数値)は使えません。
サンプルです。
この文章は、手前に表示されます。通常は、HTMLソースで先に記述した段落が
奥に表示されますが、このサンプルは、z-index で手前に指定しています。
この文章は、奥に表示されます。この文章は、奥に表示されます。この文章は、奥に表示されます。
この文章は、奥に表示されます。この文章は、奥に表示されます。この文章は、奥に表示されます。
この文章は、奥に表示されます。この文章は、奥に表示されます。この文章は、奥に表示されます。
このソースは、次のようになっています。
<div style="position:relative; top:0; left:0; z-index:1; width:250px; height:80px; padding:5px; background-color:#98FB98;">
<div style="position:relative; top:-70px; left:15px; z-index:0; width:350px; height:90px; padding:5px; background-color:#228B22; color:#FFFFFF;">
この文章は、手前に表示されます。通常は、HTMLソースで先に記述した段落が
奥に表示されますが、このサンプルは、z-index で手前に指定しています。
</div><div style="position:relative; top:-70px; left:15px; z-index:0; width:350px; height:90px; padding:5px; background-color:#228B22; color:#FFFFFF;">
この文章は、奥に表示されます。この文章は、奥に表示されます。この文章は、奥に表示されます。
この文章は、奥に表示されます。この文章は、奥に表示されます。この文章は、奥に表示されます。
この文章は、奥に表示されます。この文章は、奥に表示されます。この文章は、奥に表示されます。
</div>
通常は、後ろに記述したブロックタグの文章が手前に表示されますから、奥行きの指定をしなくても表示したい順序を考慮して文章を記述すればよいわけですが、ホバーウィンドウなどが後ろに表示されてしまう場合などに z-index を指定すると便利です。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス