g006
画像の上に文字や画像を重ねる
Copyright(C) 2004 web工房 All Rights Reserved
action
 
|
|
■<div>〜</div>を用いて文字や画像を重ねる方法(actionの上のケース)
◆手順1【画像設置】
※画面上<body>〜</body>間に文字を重ねる画像を位置する
◆手順2【文字の配置】
※<div>〜<div>を用いて文字を配置する
※<div style="position:absolute; width="レイヤー幅(px)" height="レイヤー高(px)"
top:(ウィンドウ上からのレイヤーの距離(px));
left:(ウィンドウ左からのレイヤーの距離(px)); z-index:(レイヤーの重なり順)">
※レイヤーの位置(top,left)及び重なり順を調整する
※<b></b>でフォントを太字に設定
※<font〜>にてフォントの色・サイズを設定
-----次の行から(copy)-----
<div style="position:absolute; width:***px; height:**px; top:***px;
left:***px; z-index:1;" id="Layer1" align="center">
<b><font color="#ffffff" size="5">八王子の月は丸いか？</font></b></div>
-----上の行まで(copy)-----
◆手順3【画像の配置】
※<div>〜<div>を用いて画像を配置する
※複数の文字・画像の重なりの順序は z-index により指定します。
数値が大きいものが上になります([技m009]参照)。
-----次の行から(copy)-----
<div style="width:***px; height:***px; top:***px; left:***px; position:absolute;
z-index:2;" id="Layer4" align="center">
<img src="photo/002.JPG" height="76" width="200" alt="八王子の虹もご覧ください"><div>
-----上の行まで(copy)-----
◆手順1【画像設置】(左)
※2つの画像を設置する
※2つの画像は左側のように単純に連続して並べて配置される
-----次の行から(copy)-----
<img src="photo/102.gif" ><img src="photo/101.gif">
-----上の行まで(copy)-----
◆手順2【画像を重ねる】(右)
※重ねられる画像にスタイル属性 style="z-index" を設定する
([技m009]参照)
※重ねる方の画像にスタイル属性 style="position:relative; top:**; left:**; z-index:2;"を記述する
([技m014]参照)
※右側の画像が右に移動して左側の画像の上に配置される
※重ねる画像のz-index値は重ねられる画像のz-index値より大きいこと
※style="position:relative;"によって、重ねる画像は最初の位置を基準としてtop/left指定した分だけ移動する
-----次の行から(copy)-----
<img src="photo/102.gif" style="z-index:12;">
<img src="photo/101.gif" style="position:relative; top:-10; left:-150; z-index:2;">
-----上の行まで(copy)-----
◆画像に文字を書き込まず、html上で画像の上に文字を重ねます。
◆文字の配置は<div>の表示位置を設定します。
※複数の文字・画像の重なりの順序は z-index により指定します。
数値が大きいものが上になります([技m009]参照)。
【類似技】
◆[技m009]重なりあった複数画像でマウスが重なった画像を一番手前に表示する
◆[技m014]画像にマウスが重なったら画像が飛び上がる(画像の移動)
を参照すると、より理解が深まると思います。
◇div◇z-index◇position◇relative
history
◇(2004.09.26)一部修正
◇(2004.06)設置
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----
