タグで括られた文字や文章、画像などの表示位置を指定する
HTML言語を使用したホームページやブログなどのウェブサイトで ブロックタグやインラインタグで括られた文字や文章、画像などは表示位置を指定することができます。
<タグ名 style="position:表示位置の指定方法 top:上側の位置 left:左側の位置">
- タグ名:P や DIV タグが一般的ですが、ほとんどのブロックタグやインラインタグが使えます。
- 表示位置の指定方法:記から選べます。
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 の高さ % 基準書体のサイズに対する百分率 ※正確にはデバイス依存の相対サイズ
サンプルソースです。
<html>
<head><title>文章の表示位置の指定</title></head>
<body>
文章の表示位置の指定サンプルページ
<div style="position:relative; top:50px; left:100px">
この段落は、直前のブロックタグ(グレーの領域)を原点とする相対座標系で、上から50ピクセル、左から100ピクセルの位置に表示しています。
</div>
</body>
</html>
<head><title>文章の表示位置の指定</title></head>
<body>
文章の表示位置の指定サンプルページ
<div style="position:relative; top:50px; left:100px">
この段落は、直前のブロックタグ(グレーの領域)を原点とする相対座標系で、上から50ピクセル、左から100ピクセルの位置に表示しています。
</div>
</body>
</html>
サンプルページは、こちらです。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス