TOPページ >  段落の表示(表示位置、表示/非表示など...) > 文章の表示順序(奥行き)を指定する

文章の表示順序(奥行き)を指定する

HTML言語を使用したホームページやブログなどのウェブサイトでは、ブロックタグで括られた文章の表示順序(奥行き)を指定することができます。

<タグ名 style="position:表示位置の指定方法; top:上側の位置; left:左側の位置; z-index:Z座標位置; ">
  1. タグ名: p または div タグで指定できます。spanタグ使えますが、InternetExplorerが対応していません。
  2. 表示位置の指定方法:記から選べます。
    staticHTMLレイアウト規則にしたがって自動的に決められる座標系
    absoluteBODYの左上が原点の絶対座標系
    relative直前のブロックタグが原点の相対座標系
  3. 上側の位置/左側の位置:表示位置の指定方法で指定した座標系を基準として、表示位置を指定します。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 の高さ
    %基準書体のサイズに対する百分率

    ※正確にはデバイス依存の相対サイズ

  4. 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;">
この文章は、手前に表示されます。通常は、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 を指定すると便利です。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
文章の表示方法を指定する(ブロック/インライン/非表示)
文章の表示順序(奥行き)を指定する
表示位置の指定を使って文字を影付きにする1
タグで括られた文字や文章、画像などの表示位置を指定する
段落の表示位置を指定する際の指定方法
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス