HTMLレスポンシブ方法

HTML
1コード
2<!DOCTYPE html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0">
6<title></title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="head-image">
11  <img src="images/1607574834.jpeg" alt="森の家" title="森の家" width="100%" height="548px">
12</div>
13<div class="text">
14  ホストになる<br>
15  <div class="text1">
16    <strong>お部屋のタイプは？</strong><br>
17    <u><strong>まるまる貸切</strong></u><br>
18
19    <strong>宿泊可能な人数は？</strong><br>
20    <u><strong>ゲスト4人</strong></u><br>
21
22    <strong>どこにありますか？</strong><br>
23    <u><strong>Anjo</strong></u><br>
24    <strong>ひと月あたり最大<span>￥49,879</span>の収入*</strong><br>
25  </div>
26  <div class="button">
27    <a href="#">はじめる</a><br>
28  </div>
29    <u>予想ホスティング収入額の計算方法</u>
30</div>
31  <main-visual>
32  <div class="main-visual">
33    <h1>ホスティングで実<br>
34      現する、自分らし<br>
35      いライフスタイル
36    </h1>
37  </div>
38  <div>
39    <h2>ホスティングで広がる可能性</h2>
40    <p>柔軟な働き方を楽しみながら、ホスティン<br>
41      グを通して、好きな事をするた<br>
42      めの収入アップや長く続く友情関係にめぐ<br>
43      りあう機会を得てみませんか。</p>
44      <b><u>ホスティングの世界を知ろう</u></b>
45  </div>
46  <div>
47    <h2>安心のホスティング</h2>
48    <p>24時間365日対応サポート、頼れるホスト<br>
49      コミュニティからツールのカスタム設定、<br>
50      ヒント・実践アドバイスのご提供まで、<br>
51      Airbnbが全良でホストの成功をサポートし<br>
52      ます。</p>
53      <b><u>Airbnbによるホストのサポート体制</u></b>
54  </div>
55
56  </main-visual>
57  <main>
58  <div class="main">
59    <div>
60      <img src="images/mens.jpeg" alt="" width="612px" height="472px">
61    </div>
62    <div>
63      <div class="main-content">
64        ホスティングのおかげで、自分<br>
65        の創造性を活かすことができ、<br>
66        また家族と過ごす時間も増えました。<br>
67      </div>
68      <p>Darrelさん<br>
69        米ショージア州アトランタのホスト
70      </p>
71    </div>
72  </div>
73  <div class="main-image">
74    <div class="text-message">
75      <div class="host">
76        <b>ホストになる</b><br>
77      </div>
78      <div></div>
79      
80      <div class="room">
81      <b>お部屋のタイプは？</b><br>
82      <u><b>まるまる貸切</b></u><br>
83      </div>
84      <div class="gest">
85      <b>宿泊可能な人数は？</b><br>
86      <u><b>ゲスト4人</b></u><br>
87      </div>
88      <div class="where">
89      <b>どこにありますか？</b><br>
90      <u><b>Anjo</b></u><br>
91      </div>
92      <div class="month">
93      <b>ひと月あたり最大<span>¥51,059</span>の収入*</b><br>
94      </div>
95      <div class="start">
96        <a href="#">はじめる</a><u>予想ホスティング収入額の計算方法</u><br>
97      </div>
98    </div>
99  </div>
100  <div class="hosting">
101  <h1>ホスティングをはじめる前に...</h1>
102  </div>
103  <div class="images">
104    <div class="image">
105      <img src="images/4.webp" alt="" width="322px" height="200px">
106      <h3>Airbnbでホスティングする理由</h3>
107      <p>リスティングの方法からお部屋の準備まで、ホスティングの始め方を学びましょう。</p>
108    </div>
109    <div class="image">
110      <img src="images/3.webp" alt="" width="322px" height="200px">
111      <h3>Airbnbでホスティングをはじめるには</h3>
112      <p>料金設定と受け取り金についてホスト全員が知っておくべき点。</p>
113    </div>
114    <div class="image">
115      <img src="images/2.webp" alt="" width="322px" height="200px">
116      <h3>Airbnbで収入を得る方法</h3>
117      <p>どんなお部屋にもぴったりのゲストがいます。重要なのは、お部屋についてゲストに正しくお伝えておくことです。</p>
118    </div>
119    <div class="image">
120      <img src="images/1.webp" alt="" width="322px" height="200px">
121      <h3>Airbnbで貸し出すお部屋に求められる条件は？</h3>
122      <p>迅速な対応からキャンセル回避まで、重要なポイントを以下にご紹介します。</p>
123    </div>
124  </div>
125  <div class="support-title">
126    <h1>Airbnbのサポート体制</h1>
127  </div>
128    <div class="supports">
129    <div class="support">
130      <h3>ホストを守るプログラム</h3>
131      <p>万が一の事故の際にホストのみなさまをお<br>
132        守りするため、Airbnbのほおトンドの予約に<br>
133        はそれぞれUS$1,000,000を限度とする物損<br>
134        補償と賠償責任保険が自動付帯されます。<br>
135      </p>
136      ホストを守るAirbnbの取り組み
137    </div>
138    <div class="support">
139      <h3>新型コロナウィルスの安全ガイドライン</h3>
140      <p>コミュニティのみなさまの健康を守るた<br>
141        め、Airbnbは専門家と連携し、メンバー全<br>
142        員のための安全対策とホスト向けの清掃ス<br>
143        タンダートを作成しました。<br>
144      </p>
145      Airbnb清掃スタンダードについて知る
146    </div>
147    <div class="support">
148      <h3>高いゲスト基準</h3>
149      <p>ホストの皆様にご按針いただくため、<br>
150        Airbnbでは、予約前にゲストに身分証明書<br>
151        の提示を求め、過去のホストによるゲスト<br>
152        のレビューを閲覧できるようにしていま<br>
153        す。Airbnbの新しいゲスト基準ポリシー<br>
154        は、これまで以上に高い行動基準をゲスト<br>
155        に求めるものです。<br>
156      </p>
157      安心してホスティングしていただくための取り組み
158    </div>
159    </div>
160  </main>
161  <footer>
162  <footer-top>  
163  <div class="footer-image">
164    <!-- <img src="images/3-1-1.jpeg" alt="" width="100%" height="400px"> -->
165  </div>
166  </footer-top>
167  <div class="message">
168    <h1>ホスティングをはじめよう</h1>
169    <p>さっそく、リスティングを作成してみましょう。</p>
170    <div class="start">
171      <a href="#">はじめる</a>
172    </div>
173  </div>
174  <div class="details">
175    <div class="detail">
176      <h1>詳細を確認して熟練ホ<br>
177        ストつながろう</h1>
178      <p>ホスティングに役立つ情報ならびに経験豊富なホストがみなさまの<br>
179        質問にお答えするライブ配信のオンラインセミナーへのアクセスを<br>
180        提供いたします。ご希望の方は必要事項をご記入ください。<br>
181      </p>
182    </div>
183    <div class="inputs">
184      <div class="_d1user"></div>
185      <div class="input">
186        <input type="email" class="" id="email" value autocomplete="off" aria-describedby placeholder="メールアドレス"><br>
187        <input type="tel"　class＝”” id="" placeholder="電話番号（任意）">
188      </div>
189      <div>
190        <input type="checkbox" name="" value="">
191        Airbnbから不定期に配信されるホスティングのヒントやお役たち情報の受<br>
192        信を希望します。また、配信解除はいつでもできる事を理解しました。<br>
193        <div class="registration">
194          <a href="#">登録する</a><br>
195        </div>
196        <div class="none">
197          私は「登録する」を選択することで、<a href="#">Airbnbの個人情報保護ポリシー</a>に従って<br>
198          Airbnbが私の個人情報を処理することに同意します。
199        </div>
200      </div>
201    </div>
202  </div>
203  <hr>
204  <div class="footer-details">
205    <div class="footer-detail">
206      <b>企業情報</b>
207      <p>Airbnbのご利用方法</p>
208      <p>ニュースルーム</p>
209      <p>株主・投資家のみなさまへ</p>
210      <p>Airbnb Plus</p>
211      <p>Airbnb Luxe</p>
212      <p>HotelTonight</p>
213      <p>Airbnbビジネスプログラム</p>
214      <p>ホストのおもてなしがもたらす、特別な旅</p>
215      <p>採用情報</p>
216      <p>共同創業者からの手紙</p>
217    </div>
218    <div class="footer-detail">
219      <b>コミュニティ</b>
220      <p>ダイバーシティ&ビロンギング</p>
221      <p>アクセシビリティ対応</p>
222      <p>Airbnbアソシエイト</p>
223      <p>ゲストの紹介</p>
224      <p>Airbnb.org</p>
225    </div>
226    <div class="footer-detail">
227      <b>ホスト</b>
228      <p>宿泊をホストする</p>
229      <p>オンライン体験をホストする</p>
230      <p>体験をホストする</p>
231      <p>責任あるホスティング</p>
232      <p>リソースセンター</p>
233      <p>コミュニティセンター</p>
234    </div>
235    <div class="footer-detail">
236      <b>サポート</b>
237      <p>Airbnbの新型コロナウィルスに対する取り組み</p>
238      <p>ヘルプセンター</p>
239      <p>キャンセルオプション</p>
240      <p>近隣コミュニティーサポート</p>
241      <p>信頼&安全</p>
242    </div>
243  </div>
244  <hr>
245  <div class="airbnb">
246    Airbnb Global Services Limited<br>
247    観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)<br>
248    ©️2021Airbnb,Inc.・プライバシー・利用規約・サイトマップ・企業情報<br>
249    <div class="jp">
250      <a href="#">日本語(JP)</a>
251      <a href="#">¥JPY</a>
252      <img src="images/facebook.jpeg" alt="">
253      <img src="images/twitter.jpeg" alt="">
254      <img src="images/instagram1.jpeg" alt="">
255    </div>
256  </div>
257  </footer>
258</body>
259
260
261body{
262  margin: 0;
263  
264}
265
266.head-image {
267  position: relative;
268}
269.text {
270  color: white;
271  font-size: 18px;
272  position: absolute;
273  top:120px;
274  left:50px;
275}
276strong {
277  font-size: 23px;
278}
279span {
280  color: red;
281}
282p {
283  font-size: 15px;
284}
285
286.button a {
287  color: white;
288  border-radius: 5px;
289  background-color: red;
290  padding: 10px 30px;
291  text-decoration: none;
292  
293}
294h1 {
295  font-size: 32px;
296}
297.button {
298  margin: 10px 0;
299}
300main-visual {
301  display:flex;
302  justify-content: space-evenly;
303}
304.main {
305  display:flex;
306  justify-content: space-evenly;
307  margin: 120px 0;
308}
309.main-content {
310  font-size: 32px;
311}
312.main-image {
313  margin: 0 60px 60px 60px;
314  border-radius: 5px;
315  background-image: url("images/img森.jpg");
316  height: 400px;
317  width: 100%;
318  background-position: center;
319  background-size:cover;
320  color: white;
321  padding: 40px 70px;
322}
323.start a {
324  color: white;
325  background-color: red;
326  padding: 10px 30px;
327  margin-right: 40px;
328}
329
330span {
331  color: red;
332}
333.host {
334  margin: 20px 0;
335}
336.hosting {
337  margin: 0 50px;
338}
339.room, .gest, .where, .month {
340  font-size: 25px;
341}
342.images {
343  display:flex;
344  margin-bottom: 30px;
345}
346.image {
347  margin: 30px;
348}
349.supports {
350  display: flex;
351}
352.support {
353  margin: 60px;
354}
355.support-title {
356  margin: 0 50px;
357}
358
359.details {
360  display: flex;
361  margin: 50px 50px;
362}
363.detail {
364  margin-right: 250px;
365}
366input[type=checkbox] {
367  width: 20px;
368  height: 20px;
369}
370input {
371  padding: 20px;
372  padding-right: 290px;
373  border-radius: 5px;
374}
375
376.footer-details {
377  display: flex;
378}
379.footer-detail {
380  margin: 20px 50px;
381}
382.registration a {
383  margin: 20px 0;
384  background-color: black;
385  padding: 15px 20px;
386  text-decoration: none;
387  color: white;
388  border-radius: 5px;
389}
390.registration {
391  margin: 30px 0 30px 0;
392}
393.none {
394  font-size: 12px;
395}
396.message {
397  background-image: url("images/3-1-1.jpeg");
398  background-position:center;
399  background-size:cover;
400  width: 100%;
401  height: 400px;
402  color: white;
403  padding: 90px 30px;
404}
405.start a {
406  background-color: red;
407  padding: 15px 30px;
408  color: white;
409  border-radius: 5px;
410  text-decoration: none;
411}
412.start {
413  margin: 30px 0;
414}
415.airbnb {
416  margin: 0 50px;
417  display: flex;
418}
419.jp {
420  padding-left: 500px;
421}
422.jp img {
423  padding: 8px;
424}
425.social i {
426  color:black;
427}
428@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
429#menu-bg {
430background-color: #00FF00; /*緑色*/
431display:none;
432}
433.airbnb {
434  width: auto;
435  float: none;
436  max-width: 1000px;
437width: 100%;
438margin-left: auto;
439margin-right: auto;
440}
441img {
442  max-width: 100% ;
443  height: auto;
444  }
445}

前提・実現したいこと

レスポンシブサイト作成
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

ネットサイトを見てもうまくいかずです。

エラーメッセージ

該当のソースコード

HTML
1ソースコード

試したこと

viewportとメディアクエリを導入して必要箇所をCSSで変更したが、解決せず。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

K_3578

2021/04/12 07:20

html,cssは別の<code>ブロック内に分けてください。分ける際は、ブロック間は1行空けて下さい。

Lhankor_Mhy

2021/04/12 07:27

どのようなレイアウトにしたいのか、ご提示ください。レスポンシブデザインとは、スクリーンサイズに応じてレイアウトを変更するデザインのことです。どのように変更をしたいのか、ということが決まらないと何ともならないと思います。

toshiaki4

2021/04/12 07:53

ご指摘いただきありがとうございます。スマホサイズに適したレイアウトにしたいです。回答になっておりますでしょうか。ご不便おかけしますが、よろしくお願いいたします。

K_3578

2021/04/12 07:56

質問に補足する内容は質問文に書いて頂けると。他の方が見られると時に追記修正依頼欄から探すより本文に書いてある方が分かりやすいので。

Lhankor_Mhy

2021/04/12 08:11

私が、「現在の表示でスマホサイズに適したレイアウトだと思います」と回答したらご納得いただけるのでしょうか？納得できないですよね？であれば、toshiaki4さんが「スマホサイズに適したレイアウト」を決めるしかないですよね？ --- ご提示のコードを拝見する限り、模写なんだと思います。そうであれば、お手本はあるのではないですか？お手本と比べて、「ここをこうしたいが上手くいかない」みたいな、具体的な問題に落とし込む作業をする必要がありませんか？ --- もし、具体的な問題にならないのであれば、一般論的なふんわりとした回答になると思いますが、それでもいいですか？

toshiaki4

2021/04/12 08:55

ご不便をおかけして申し訳ございません。一度出直します。ご指摘いただきありがとうございます。

K_3578

2021/04/12 08:58 編集

わざわざ出直す必要ないと思うけどなぁ。折角の機会だし。それと、質問の編集の方法わかります？

toshiaki4

2021/04/12 09:25

すみません、見習い中のため、質問の仕方すら把握できておらず、申し訳ございません。

K_3578

2021/04/13 00:32

流石に利用する以上、使い方は理解しときましょう。 https://teratail.com/help ヘルプページ貼っとくのでとりあえず読んでみましょう。