質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2846閲覧

CSSで画像を重ねたい

ariel200

総合スコア33

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/10/03 13:17

皆様よろしくお願いします。

レスポンシブサイトで画像を重ねる必要があり、まずは以下のように画像を縦に並べるシンプルなサンプルコードを書きました。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style type="text/css"> 6 .container { 7 width: 100%; 8 margin: 0 auto; 9 background-color: green; 10 } 11 12 .parent img { 13 width: 100%; 14 } 15</style> 16</head> 17<body> 18 19<div class="container"> 20 <div class="top">トップ</div> 21 <div class="parent"> 22 <!-- img1とimg2は同じサイズ --> 23 <img src="img1.jpg"> 24 <img src="img2.jpg"> 25 </div> 26 <div class="bottom">ボトム</div> 27</div> 28 29</body> 30</html>

上記から以下のようにCSSのpositionを使うと、.parent内で重ねることはできたのですが、.bottomブロックが消えてしまいました。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style type="text/css"> 6 .container { 7 width: 100%; 8 margin: 0 auto; 9 background-color: green; 10 } 11 12 .parent img { 13 width: 100%; 14 position: absolute; /* ← 追加 */ 15 } 16 17 /* ↓追加 */ 18 .parent { 19 position: relative; 20 } 21</style> 22</head> 23<body> 24 25<div class="container"> 26 <div class="top">トップ</div> 27 <div class="parent"> 28 <!-- img1とimg2は同じサイズ --> 29 <img src="img1.jpg"> 30 <img src="img2.jpg"> 31 </div> 32 <div class="bottom">ボトム</div> 33</div> 34 35</body> 36</html> 37

Chromeの検証ツールを使って調べてみると、.bottomブロックも重なってしまう?のか、画面の位置では.topブロックの下、
つまり重なった画像の背面に入ってしまいました。

.topブロック
2枚の画像
.bottomブロック

のように表示するにはどうしたらいいのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

CSS

1 .parent img { 2 width: 100%; 3 } 4 .parent img + img { /* 後の画像(緑)を浮かす */ 5 position: absolute; 6 left: 0; 7 top: 0; 8 } 9 .parent { 10 position: relative; 11 } 12```**動くサンプル:**[https://jsfiddle.net/a39ck7du/](https://jsfiddle.net/a39ck7du/)

投稿2017/10/03 15:37

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ariel200

2017/10/03 16:16

正常に動作しました、ご回答ありがとうございました!
guest

0

.parentに高さ指定していないからでは?

投稿2017/10/03 13:48

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ariel200

2017/10/03 13:58

ご回答ありがとうございます。 レスポンシブサイトのため、.parent配下の画像は横幅が可変になり、高さもそれに応じて変わると思うのですが、.parentの高さはどのように指定すればいいのでしょうか?
LibertyBell3

2017/10/03 14:05

全てを可変にしなくてはならないと思うので、絶対に「px」は使うべきではないでしょう。 そういう案件やったことは無いのですが(大抵はスマホは別ページにしていた)、 画面サイズに影響されない単位で指定することになると思います。 「em」「%」場合によっては、「vw」「vh」ですかね。
ariel200

2017/10/03 14:21

もう少し調べてみます。ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問