<HTML>画像の表示とグーグルマップの配置がウィンドウの大きさによって崩れてしまう問題点

実現したいことに対しての誤り箇所

HTMLを記述しているエディタはVSCodeでMicrosoft Egeでindex.htmlを開きました。モバイルでは正常に動いていることは確認済みです。すると以下の2つの修正したい箇所が発見できましたが一人で修正することができませんでした。お手数ですが知識不足の私にアドバイスを頂けないでしょうか。
➀横3枚ずつ並べられるように追記していく毎に左から詰めるようにしたいのですがなぜか下のように2行目だけ左と右が空白になってしまいます。さらに追記していけば3枚横並びになるのですがどこをいじればメニューの幅が増えいくつもの画像を張り付けることができるのでしょうか。思いつく限りCSSの幅や高さ等を変更してみたのですが自分ではよく分かりませんでした。
![
②ウィンドウを縮小すると下のような正しく表記したいものになるのですが最大化すると下のように崩れてしまいます。これは何が原因なのでしょうか。マップに関して色々いじったのですが治すことが出来ませんでした。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>HTML</title>
7    <link rel="stylesheet" href="css/style.css">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9</head>
10
11<body>
12    
13    <header>
14        <div class="container">
15            <div id="site_logo">
16                <h1> <img src="images/logo.jpg"></h1>
17            </div>
18            <div id="site_reserve">
19                <p>質問はこちらから</p>
20                <p class="site_Twitter">Twitter:@aaaaaaa</p>
21            </div>
22            <div class="clearlist"></div>
23        </div>
24        <nav>
25            <div class="container">
26                <ul>
27                    <li><a href="#">トップ</a></li>
28                    <li><a href="#concept">コンセプト</a></li>
29                    <li><a href="#menu">メニュー</a></li>
30                    <li><a href="#access">アクセス</a></li>
31                </ul>
32            </div>
33        </nav>
34    </header>
35
36    <main>
37        <!-- メイン -->
38        <section id="main_image">
39            <img src="images/top_image.png">
40        </section>
41        <!-- コンセプト -->
42        <section id="concept">
43            <div class="container">
44                <img id="concept_logo" src="images/concept_image.png">
45                <h2>コンセプト</h2>
46                <img id="concept_icon" src="images/concept_image2.PNG">
47                <p>自分で作った料理を自己満でアップしていくだけです。更新は不定期です。</p>
48            </div>
49        </section>
50        <!-- メニュー -->
51        <section id="menu">
52            <div class"container">
53                <img id="menu_logo" src="images/menu_image.png">
54                <h2>メニュー</h2>
55
56                <div class="menu_box">
57                    <img src="images/spongecake.JPG">
58                    <h3>スポンジケーキ</h3>
59                </div>
60                <div class="menu_box">
61                    <img src="images/chicken.PNG">
62                    <h3>タンドリーチキン</h3>
63                </div>
64                <div class="menu_box">
65                    <img src="images/hamburg.JPG">
66                    <h3>ハンバーグ</h3>
67                </div>
68                <div class="menu_box">
69                    <img src="images/meronpan.PNG">
70                    <h3>クッキー</h3>
71                </div>
72                <div class"clearlist"></div>
73            </div>
74        </section>
75        <!-- アクセス -->
76        <section id="access">
77            <div class="container">
78                <img id="access_logo" src="images/access_image.png">
79                <h2>アクセス</h2>
80                <div id="access_map">
81                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d813.6797006302967!2d139.64584114971103!3d35.33780369979939!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1628385719541!5m2!1sja!2sjp" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
82                </div>
83                <div id="access_txt">
84                    <p>〒000-0000　神奈川県</p>
85                    <p>TEL:000-0000-0000</p>
86                    <p>Twitter:@aaaaaa</p>
87                    <p>映える料理を作りたい</p>
88                </div>
89                <div class"clearlist"></div>
90                <div id="access_reserve">
91                <p>質問はこちらからでも可能です</p>
92                <p class="site_question">TEL:000-0000-0000</p>
93                </div>
94            </div>
95        </section>
96    </main>
97
98<footer>
99    <img src="images/logo.jpg">
100    <p>Copyright(c) </p>
101</footer>
102
103</body>
104</html>

css
1@charset "utf-8";
2
3/* 余白リセット */
4*{
5    margin: 0;
6    padding: 0;
7}
8
9body{
10    font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif;
11
12}
13
14.container{
15    max-width: 1000px;
16    margin: 0 auto;
17}
18
19.clearlist{
20    content: "";
21    display: block;
22    clear: both;
23}
24
25#site_logo{
26    float: left;
27    width: 65%;
28}
29
30#site_reserve{
31    float: right;
32    width: 35%;
33    text-align: right;
34    margin-top: 10px;
35}
36
37.site_Twitter,.site_question{
38    font-size: 1.5em;
39    color: #0d3dc2;
40}
41
42nav{
43    background-color: #0d10c2;
44}
45
46nav ul{
47    list-style: none;
48}
49
50nav ul::after{
51    content: "";
52    display: block;
53    clear: both;
54}
55
56nav li{
57    float: left;
58    width: 25%;
59    text-align: center;
60}
61
62nav a{
63    display: black;
64    text-decoration: none;
65    color: #fff;
66}
67
68nav a:hover{
69    opacity: 0.7;
70}
71
72#main_image img{
73    width: 100%;
74}
75
76#concept{
77    text-align: center;
78    margin-bottom: 40px;
79}
80
81h2{
82    font-size: 2.0em;
83}
84
85#concept_logo{
86    margin-bottom: -40px;
87}
88
89#concept h2{
90    margin-right: 25px;
91}
92
93#menu{
94    background-color: #F5FFFA;
95    text-align: center;
96}
97
98#menu_logo{
99    margin-bottom: -40px;
100}
101
102.menu_box{
103    width: 29%;
104    float: left;
105    margin-left: 3%;
106    margin-bottom: 30px;
107}
108
109.menu_box img{
110    width: 100%;
111    max-width: 300px;
112}
113
114#access{
115    text-align: center;
116}
117
118#access iframe{
119    width: 70%;
120}
121
122#access_logo{
123    margin-bottom: -40px;
124}
125
126#access_map{
127    float: left;
128    width: 50%;
129}
130
131#access_txt{
132    float: right;
133    width: 50%;
134    text-align: left;
135    margin-top: 60px;
136}
137
138#access_reserve{
139    margin-top: 30px;
140    margin-bottom: 30px;
141}
142
143footer{
144    background-color: #fff;
145    color: rgb(0, 0, 0);
146    text-align: center;
147}
148
149
150@media only screen and (max-width: 680px){
151    .container {
152		margin: 0 10px;
153	}
154
155	#site_logo {
156		float: none;
157		width: 100%;
158	}
159
160	#site_logo img {
161		width: 90%;
162		max-width: 420px;
163	}
164
165	#site_reserve {
166		float: none;
167		width: 100%;
168		font-size: 0.8em;
169		margin-top: 0;
170		margin-bottom: 10px;
171	}
172
173	.site_tel {
174		font-size: 1.2em;
175	}
176
177	nav a {
178		font-size: 0.8em;
179	}
180
181	#concept_logo {
182		width: 70%;
183	}
184	#concept h2 {
185		font-size: 1.5em;
186	}
187
188	#concept_icon {
189		width: 70%;
190	}
191
192	#concept p {
193		font-size: 0.8em;
194		width: 100%;
195	}
196
197	#menu_logo {
198		width: 70%;
199	}
200
201	.menu_box {
202		float: none;
203		width: 100%;
204		margin: 0;
205	}
206
207	.menu_box img {
208		max-width: 480px;
209	}
210
211	.menu_box ul {
212		margin: 0 30px;
213	}
214
215	#access_logo {
216			width: 70%;
217	}
218
219	#access_map {
220		float: none;
221		width: 100%;
222	}
223
224	#access_txt {
225		float: none;
226		width: 90%;
227		margin-left: 30px;
228	}
229
230	#access iframe {
231		width: 100%;
232	}
233
234	footer img {
235		width: 90%;
236	}
237}

行動規範の内容に同意します

回答1件

ベストアンサー

(1)はそれぞれの画像の高さが違うためです。特にハンバーグの画像の高さが低いので、左に行きたくても引っかかって
いる状態です。すべての画像の大きさを同じにすれば良いです。

(2)全体的にfloatを多用しておりレイアウトが操作しづらい状態だと思います。(1)の問題にも関わりますが、floatは扱いづらく、今は横並びにする場合はdisplay: flexを使用することが多いと思います。
正解のレイアウトがイマイチわかりませんが、floatをやめて、組み方を変えないと治すのが難しい状態に感じます。

投稿2021/08/08 14:55