CSSで画像を同じ位置に重なり合わせる方法

2012/01/12 01:59

このQ&Aのポイント

CSSで画像を同じ位置に重なり合わせる方法について説明します。
z-indexとposition:relativeを使用することで、画像を重ねて配置することができます。
画像の配置時に生じる空きをなくす方法についても解説します。

toonie
お礼率26% (55/210)

CSS
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/01/13 19:30 回答No.4

＞調べているうちに気が付いたのですが、sectionプロパティもnavプロパティも＞HTML5のみの対応で、　きちんと正確に!!。「sectionプロパティもnavプロパティ」じゃありません。・section要素、nav要素はHTML5から採用される要素です。　文書は色々な要素で組み立てていて、それをタグを用いてどの要素かを示します。　p要素は、それでマークされていれば、囲まれた部分がp要素であることを示します。・HTML4では、文書構造を示す要素が不足していたため、class名やIDをつけていました。『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』・・・top_img_a,img_top,flameというclass名じゃ、おかしいでしょ。そもそも、まったく必要ないのですよ。　私は原則として、class名にHTML5で登場する要素名を使用しています。それは先でHTML5でページを作成するときに、スムーズに移項できるからですし、本来、HTML4でも望まれる名前だからです。　ですから、別にHTML4.01だろうが、XHTML1.0だろうが、class名として使うなら問題ありません。　ただし、HTML4.01であってもXHTML1.0であっても、必ずstrictで作らなきゃダメです。　もしくはXHTML1.1。なぜなら、HTML4.01の勧告(1999/12)以来、『著者・・・【中略】・・・　HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』となっていたはずです。予告どおり、XHTML1.1HTML5では、transotinalな要素、属性は削除されています。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 最後に、検証済みのソースを示しておきます。スタイルシートなしで表示してもよい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h1>サンプル2</h1> ＿＿<div class="section"> ＿＿＿<p class="sample"><img src="images/dammy_img02.jpg" width="480" height="360" alt="サンプル画像"></p> ＿＿＿<h2>用意する画像</h2> ＿＿＿<dl> ＿＿＿＿<dt>images/dammy_img02.jpg</dt> ＿＿＿＿<dd>480px巾、360px高さの画像を用意する。</dd> ＿＿＿＿<dt>images/new_entries_img_flame.gif</dt> ＿＿＿＿<dd>内寸480×360pxが透明な枠用画像</dd> ＿＿＿＿<dt>../images/dawnmenu_button.gif</dt> ＿＿＿＿<dd>巾140,高60pxの吹き出し画像</dd> ＿＿＿</dl> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="/">TOP</a></li> ＿＿＿＿<li><a href="./profile">会社情報</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="./profile/index.html">会社概要</a></li> ＿＿＿＿＿＿<li><a href="./profile/office.html">営業所</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="./B">Bボタン</a></li> ＿＿＿＿<li><a href="./C">Cボタン</a></li> ＿＿＿＿<li><a href="./D">Dボタン</a></li> ＿＿＿＿<li><a href="./E">Eボタン</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> </body> </html>

質問者

お礼 2012/01/16 19:04

いつも詳しく検証用のソースも書いてくださり感謝します。アドバイスをもとに思う通りに実装することができました。基本から勉強していこうと思います。ありがとうございました。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/01/13 01:13 回答No.3

＞そのドロップボタンが今回絶対は位置した２つの画像の下に表示され、隠れてしまいます。　一番良い解決方法は、ドロップダウンメニューを作るこのCSSどこが変？ - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7229595.html ) 　で示したように、ナビゲーションをページの最後に記述することです。　ナビゲーションは、HTMLの文書構造上、本文の前にあるのは変です。　今回のrelative内でabsoluteさせる方法も、本来の方法ではなくあくまで抜け道です。いずれの問題も、「文書構造に従ったHTMLを作成しない」「デザインのためにHTMLを書く」と言うのが、本当の原因なのです。ドロップダウンメニューを作るこのCSSどこが変？ - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7229595.html )で示した、サンプルソースの<div class="section">内に、先の回答の <div class="section"> <p class="sample"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" width="480" height="360" alt="サンプル画像" /></p> <h2>記事の見出し</h2> <p>段落</p> </div> 　を入れた場合、問題は起きないはずです。　最初にHTMLを書くとき、デザインのことは一切考えずに、ひたすら文書構造をマークアップすることに徹して、その後スタイルシートでデザインするという開発方法にするのが良いです。

質問者

お礼 2012/01/13 16:11

回答ありがとうございます。調べているうちに気が付いたのですが、sectionプロパティもnavプロパティもHTML5のみの対応で、現在私が記述しているDOCTYPE宣言のXHTML1.0には非対応みたいですね。うーん、困りましたね、そうしたらいいのでしょうか。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/01/12 09:31 回答No.2

　上に重ねる画像を、position:relative;の親コンテナブロック内でposition:absoluteで配置すれば良いですし、後から登場するものなのでz-indexも不要です。 #top_img_a{ width:900px;margin:0;padding:0;margin:0 auto; position:relative; } #top_img_a p{margin:0;paddin:0;} #top_img_a p.flame{ position:absolute;top:-5px;left:-5px; } ★まず参考にすべきは仕様書です。 9.3.1 配置体系を選択する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position ) のrelativeには、「ボックスの位置はまず通常フローにて計算され（この計算で得られた位置を通常位置と呼ぼう）、その通常位置から相対的に配置される。なお、あるボックスBが相対配置される場合、それに後行するボックスの位置は、Bが相対配置されていないかのように計算される。」 ★しかし、もっとも基本的な部分で間違っています。　HTMLは、あくまで文書構造を示すもので、スタイルシートはそのデザインをするためのものです。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )］より　質問文だけでは、それぞれの文書内での構造的意味合いがわからないのですが、示された二つの画像は、文書内ではまったく意味のないもの、あるいは、最初の画像は単なるサンプルかもしれません。　後者だとするとHTML上は <div class="section"> <p class="sample"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" width="480" height="360" alt="サンプル画像" /></p> <h2>記事の見出し</h2> <p>段落</p> </div> とかになるはずです。スタイルシートも画像も読み込まないユーザーエージェントや検索エンジンでも意味がわかるように記述すると言うことです。 ★枠の画像は、線幅5pxとして画像サイズ+10pxのものを用意したとします。　そのうえでスタイルシートで div.section{width:900px;margin:0 auto;} p.sample img{ display:block; margin:0 auto;padding:5px; background-image:url(images/new_entries_img_flame.gif) } 　HTMLもCSSも極めてわかりやすく、書くのが簡単になるでしょう。　そしてなによりも、HTMLがデザインと独立していますから、先でどのようにもデザインを変えることが出来ます。　ためしに、最初のものをスタイルシートなしで表示したものと比べてみてください。これがまさにHTMLとCSSの役割分担です。 div.section{width:900px;margin:0 auto;} p.sample img{ display:block; margin:0 auto;padding:5px; background-image:url(images/new_entries_img_flame.gif) } #top_img_a{ width:900px;margin:0;padding:0;margin:0 auto; position:relative; } #top_img_a p{margin:0;paddin:0;} #top_img_a p.flame{ position:absolute;top:-5px;left:-5px; } <body> <h1>サンプル1</h1> <div id="contens"> <div id="top_img_a"> <p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p> <p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p> <h2>記事の見出し</h2> <p>段落</p> </div> <h1>サンプル2</h1> <div class="section"> <p class="sample"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" width="480" height="360" alt="サンプル画像" /></p> <h2>記事の見出し</h2> <p>段落</p> </div> </body>

質問者

お礼 2012/01/12 23:45

いつも詳しく回答くださり本当に感謝致します。一番簡単なposition:relative;の親コンテナブロック内でposition:absoluteしたところ思う通りに配置できました。ありがとうございます。ひとつ疑問なのですが、その上部のheaderのボタン類にはドロップダウンメニューが<ul><li>によって配置されhover時に表示されるようになっているのですが（その問題に関してもORUKA1951様に回答いただきありがとうございます）そのドロップボタンが今回絶対は位置した２つの画像の下に表示され、隠れてしまいます。ボタン類は画像の上部に表示させたいのですが...この問題の原因はなんでしょうか。よければ教えてください。

noname#163110

2012/01/12 02:40 回答No.1

これでどうですか？（contents→containerにして、下の文章をcontentsにしてます。） relative内でabsolute指定していくんだったと思いますが・・【html】 <div id="container"> <div id="top_img_a"> <p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p> <p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p> </div> <div id="contents"> <p>下の文章</p> </div> </div> 【css】 #container{ position:relative; margin:0 auto; width:900px; } #top_img_a{ width:900px; height:●px;//高さを入力 position:relative; } .img_top { position:absolute; z-index:1; top:0px; left:25px; } .flame { position:absolute; z-index:2; top:0px; left:25px; } #contents{ position:relative; }

質問者

お礼 2012/01/12 23:47

回答ありがとうございます。ちょっと思うような形になりませんでしたが、感謝致します。

CSSで画像を同じ位置に重なり合わせる方法

CSSで画像を同じ位置に重なり合わせるには？