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

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

新規登録して質問してみよう
ただいま回答率
85.44%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

7931閲覧

レスポンシブ画像と文字の重なり解除

ryouk

総合スコア4

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2020/06/19 08:32

前提・実現したいこと

画面の幅を変えたときに、重なっていた画像と文字の重なりを解除したい。
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1591182041_YTU3NzBhMWNiMjQ4
Airbnbの模写です。全画面表示だと画像と文字が重なっているのですが、画面幅を小さくしていくと画像の下に文字や、テキストボックスが来るようになっています。このようにしたいです。

発生している問題・エラーメッセージ

画面幅を変えても画像と文字が重なっている。

該当のソースコード

html

1<header> 2 <div class="container"> 3 <div class="wrapper"> 4 <ul class="nav"> 5 <img src="images/140717newairbnblogo.jpg"> 6 <li><a href="#">概要</a></li> 7 <li><a href="#">準備</a></li> 8 <li><a href="#">安全</a></li> 9 <li><a href="#">マネープラン</a></li> 10 </ul> 11 </div> 12 <div class="green"> 13 <button class="btn" type="button" onclick="location.href='移動先のファイルのパスを書く'">はじめる</button> 14 </div> 15 </div> 16 </header> 17 <div class="back-img"> 18 19 <div class="text-background"> 20 <div class="text"> 21 <section> 22 <h1 class="host">Airbnbホストになって、暮らしをレベルアップ</h1> 23 24 </section> 25 <div class="iojo"> 26 <p class="stay">宿泊施設の内容を記述</p> 27 <input type="text" class="address" value="大阪" size="35"> 28 <select name="name" class="plan"> 29 30 <option value="enteir_home">まるまる貸切</option> 31 <option value="private_room">個室</option> 32 <option value="share_room">シェアルーム</option> 33 </select> 34 <select name="many-peron" class="person"> 35 <option value="guest1">ゲスト1</option> 36 <option value="guest2">ゲスト2</option> 37 <option value="guest3">ゲスト3</option> 38 39 </select> 40 <button class="btn2" type="button" onclick="location.href='移動先のファイルのパスを書く'">はじめる</button> 41 </div> 42 </div> 43 </div> 44 </div> 45 46header { 47 position:fixed; 48 top: 0; 49 left: 0; 50 width: 100%; 51 height: 12%; 52 border-bottom: 1px solid grey; 53 background-color: white; 54} 55div.container { 56 margin-left: -15px; 57 58} 59/*左上の画像のフォント*/ 60img { 61 height: 40px; 62 width: 80px; 63 margin-top: 30px; 64} 65 66 67/*概要とかのところ*/ 68li a { 69 margin: -3em 0; 70 padding: 5em 1em; 71 display :block; 72 color:rgba(0, 255, 196, 1); 73} 74/*ボタンのところ*/ 75div.green { 76 display: block; 77 margin: 0 0 0 auto; 78} 79.btn{ 80 border-radius: 5px; 81 background-color: green; 82 padding-top: 10px; 83 padding-bottom: 30px; 84 text-align: center; 85 color: white; 86 position: absolute; 87 right: 30px; 88 top: 30px; 89 } 90 91 92 93 94/*背景画像のところ*/ 95.back-img { 96 width: 100%; 97 background-image:url('https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=n:ope,e:fjpeg-c75'); 98 background-size: cover; 99 /*position: absolute;*/ 100 overflow: hidden; 101 margin-bottom: 50px; 102 margin-top: 100px; 103 104} 105 106.host { 107 font-size: 40px; 108 margin-left: 40px; 109 margin-right: 40px; 110 padding: 10px; 111 font-weight: bold; 112 margin-top: 10px; 113} 114 115.stay { 116 margin-left: 50px; 117 font-weight: bolder; 118 border-style: initial; 119} 120 121.address { 122 margin-left: 50px; 123 margin-bottom: 20px; 124 border-radius: 10pxpx; 125} 126.plan { 127 margin-left: 50px; 128 border: ; 129 width: 40%; 130 height: 50px; 131} 132.person { 133 margin-left: 20px; 134 border: ; 135 width: 30%; 136 height: 50px; 137} 138.text-background { 139 background-color: white; 140 float: right; 141 max-width: 460px; 142 margin:78px 92px 143} 144 145@media screen and ( max-width:479px ) 146{ 147 .text-background{ 148 width: 83.33%; 149 float: left; 150 background-color: transparent!important; 151 } 152 153 .green { 154 display: none!important; 155 }

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

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

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

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

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

Lhankor_Mhy

2020/06/19 08:51

元ページ見てきましたが、JavaScriptを使っているんじゃないでしょうか?
ryouk

2020/06/19 12:49

本当ですか。 それは勉強しないとですね。 わざわざありがとうございます。
guest

回答1

0

ベストアンサー

補足依頼欄にも書いた通り、模写元はJavaScriptを使いHTML構造を変更することによって実現していますが、CSSで類似のことをするならば、display: contentsを使ってみるといいかもしれません。
このルールは、その要素をなかったことにします。

サンプル

css

1@media screen and ( max-width:479px ) 2{ 3 .text-background, .back-img{ 4 display: contents; 5 } 6 .text > section { 7 width: 100%; 8 background-image:url('https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=n:ope,e:fjpeg-c75'); 9 background-size: cover; 10 /*position: absolute;*/ 11 overflow: hidden; 12 margin-bottom: 50px; 13 margin-top: 100px; 14 15 } 16 17 .green { 18 display: none!important; 19 }

参考:
<display-box> - CSS: カスケーディングスタイルシート | MDN


または、all: unsetという方法もあるかもしれません。
このルールは、その要素のルールを全てリセットします。

サンプル

css

1@media screen and ( max-width:479px ) 2{ 3 .text-background, .back-img{ 4 all: unset; 5 } 6 .text > section { 7 width: 100%; 8 background-image:url('https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=n:ope,e:fjpeg-c75'); 9 background-size: cover; 10 /*position: absolute;*/ 11 overflow: hidden; 12 margin-bottom: 50px; 13 margin-top: 100px; 14 15 } 16 17 .green { 18 display: none!important; 19 }

参考:
all - CSS: カスケーディングスタイルシート | MDN


個人的には、後者はユーザーエージェントのデフォルトCSSまでリセットしてしまうので副作用が大きいと思いますから、前者をおすすめします。
all: revertが使えるなら後者がいいと思うのですが……

投稿2020/06/20 01:37

Lhankor_Mhy

総合スコア36261

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

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

ryouk

2020/06/21 14:15

やってもたのですが、display: contents;だけ反映されないのはなぜでしょうか?
Lhankor_Mhy

2020/06/22 00:44

「display: contents;だけ反映されない」というのは、何が起きていますか? それは回答でご提示したサンプルページで「重なり解除」ができていない、ということですか?
ryouk

2020/06/22 04:17

背景の上に、同じ背景が表示され、背景が二枚重なっている状態になっています。
Lhankor_Mhy

2020/06/22 04:41

それは私が見ているものと違いますね。 環境の問題でしょうか。当方は、Win10、Chrome83 Firefox77 で検証しています。
ryouk

2020/06/22 05:44

chromeで見るとできました。 ありがとうございます。 Interunet Exprorerで見ると、できませんでした。 何か違いがあるのでしょうか。 私もWin10を使用しています。
ryouk

2020/06/22 10:26

本当ですか! ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問