スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

No.13 画像IMGタグを極める その5 画像を好きな場所に配置する

 今までの画像の配置は、右側とか左側とかテキスト中とか、相対的な配置でしたが、今回は、特定の指定した場所に画像を配置する方法をこのGooブログで紹介する。

 絶対的配置のスタイルは、position:absolute;として、上からの距離がたとえば10ピクセルの位置に画像を配置する場合には top:100px; 左からの距離がたとえば30ピクセルの位置に画像を配置するときは left:30px; とスタイルのなかで記述することで実現する。

実際のタグは次のようになる。
<img src="http://goo.gl/U01z" style="position:absolute; top:100px; left:30px;"/>

 しかしこのままでは察しのよいかたはお気づきと思いますが、ブログのトップからの距離になりますので、記事中ではなくて、ブログのタイトルのあたりに画像が配置されます。

 この問題を解決するために、絶対配置の開始位置の枠組みの領域をまず指定してから、その領域内に画像を配置するようにします。

 領域を指定するタグはDIVタグですから、

<div style="width:600px; height:400px; position:relative;">この中に画像を配置</div>
と、幅600ピクセル、高さ400ピクセルの領域を確保した後、その領域を相対配置(relative)に指定すると、その領域からの絶対的な距離で画像を配置できるようになる。
 ココではわかりやすいように領域の背景色を灰色にする(background-color:#aaaaaa;)


 と、灰色の領域のトップから100ピクセル、左から30ピクセルの位置に画像は配置された。

実際のソースは以下です。

<div style="position:relative; width:600px; height:400px; background-color:#aaaaaa;"><img src="http://goo.gl/U01z" style="position:absolute; top:100px; left:30px;width:200px;"/></div>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。