TOPページ >  段落の表示(表示位置、表示/非表示など...) > タグで括られた文字や文章、画像などの表示位置を指定する

タグで括られた文字や文章、画像などの表示位置を指定する

HTML言語を使用したホームページやブログなどのウェブサイトで ブロックタグやインラインタグで括られた文字や文章、画像などは表示位置を指定することができます。

<タグ名 style="position:表示位置の指定方法 top:上側の位置 left:左側の位置">
  1. タグ名:P や DIV タグが一般的ですが、ほとんどのブロックタグやインラインタグが使えます。
  2. 表示位置の指定方法:記から選べます。
    static HTMLレイアウト規則にしたがって自動的に決められる座標系
    absolute BODYの左上が原点の絶対座標系
    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 の高さ
    %基準書体のサイズに対する百分率

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

サンプルソースです。

<html>
<head><title>文章の表示位置の指定</title></head>
<body>
文章の表示位置の指定サンプルページ
<div style="position:relative; top:50px; left:100px">
この段落は、直前のブロックタグ(グレーの領域)を原点とする相対座標系で、上から50ピクセル、左から100ピクセルの位置に表示しています。
</div>

</body>
</html>

サンプルページは、こちらです。

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

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