質問編集履歴

1

先程、入力途中で投稿してしまい入力内容が反映されなかったため編集いたしました。お手数おかけいたしますがよろしくお願いいたします。

2020/05/20 10:02

投稿

icchiman
icchiman

スコア3

test CHANGED
File without changes
test CHANGED
@@ -1,37 +1,379 @@
1
- ### 前提・実現したいこと
1
+ # 前提・実現したいこと
2
-
2
+
3
- ブレイクポイント641pxまでメニュー部分```<div class="logo_and_title">がカラム落ちしないように設定したいです。
3
+ ブレイクポイント641pxまでメニュー部分```<div class="logo_and_title">```がカラム落ちしないように設定したいです。
4
-
4
+
5
+
6
+
5
- ここに質問の内容を詳く書いくださ
7
+ #発生している問題
6
-
8
+
7
- #ブラウザ環境(chrome)幅が647PXでカラム落ちが発生します。
9
+ 補足情報にある添付画像のようにトップのメニューがブラウザ環境(chrome)幅が647pxでカラム落ちが発生します。
10
+
11
+
12
+
13
+
14
+
15
+
16
+
8
-
17
+ # 試したこと
18
+
19
+ ①```manu_button li{float:left;}```の代わりにdisplay:inline-block;を入れてみる。
20
+
21
+ ②floatが入っているロゴ[.top_logo_nav h1]とメニュー[<div class="logo_and_title">]にwidthを設定してみる。
22
+
9
- ### 発生している問題・エラメッセ
23
+ ### 該当のソスコ
24
+
25
+
26
+
10
-
27
+ ```HTML
28
+
11
-
29
+ <!DOCTYPE html>
30
+
31
+ <html lang="ja">
32
+
33
+
34
+
35
+ <head>
36
+
37
+ <meta charset="UTF-8">
38
+
39
+ <meta name="viewport" content="width=device-width, initial-scale=1">
40
+
41
+ <link rel="stylesheet" href="css/reset.css">
42
+
43
+ <link rel="stylesheet" href="css/style.css">
44
+
45
+ <title>baaa_corporation</title>
46
+
47
+ </head>
48
+
49
+
50
+
51
+ <body>
52
+
53
+ <div id="wrap">
54
+
55
+ <!-- <div class="main"> -->
56
+
57
+ <div class="top_logo_nav clearfix">
58
+
59
+ <h1>BAAA Corporation</h1>
60
+
61
+ <div class="logo_and_title">
62
+
63
+ <ul class="manu_button clearfix">
64
+
65
+ <li><a href="#">会社概要</a></li>
66
+
67
+ <li><a href="#">事業紹介</a></li>
68
+
69
+ <li><a href="#">採用情報</a></li>
70
+
71
+ <li><a href="#">お問い合わせ</a></li>
72
+
73
+ </ul>
74
+
75
+ </div>
76
+
77
+ </div>
78
+
79
+ </body>
80
+
81
+
82
+
83
+ </html>
12
84
 
13
85
  ```
14
86
 
87
+
88
+
89
+ ```CSS
90
+
91
+ .clearfix::after {
92
+
93
+ content: "";
94
+
95
+ display: block;
96
+
97
+ clear: both;
98
+
99
+ }
100
+
101
+
102
+
103
+
104
+
105
+ img {
106
+
107
+ width: 100%;
108
+
109
+ height: auto;
110
+
111
+ }
112
+
113
+
114
+
115
+ * {
116
+
117
+ box-sizing: border-box;
118
+
119
+ }
120
+
121
+
122
+
123
+
124
+
125
+
126
+
127
+
128
+
129
+ a {
130
+
131
+ text-decoration: none;
132
+
133
+ color: #fff;
134
+
135
+ }
136
+
137
+
138
+
139
+ /* ------------------------------------------ */
140
+
141
+
142
+
143
+
144
+
145
+ body {
146
+
147
+ margin: 0 auto;
148
+
149
+ }
150
+
151
+
152
+
153
+ #wrap {
154
+
155
+ width: 1200px;
156
+
157
+ max-width: 100%;
158
+
159
+ margin: auto;
160
+
161
+ font-size: 16px;
162
+
163
+ }
164
+
165
+
166
+
167
+ .main {
168
+
169
+ width: 100%;
170
+
171
+ max-width: 1200px;
172
+
173
+ }
174
+
175
+
176
+
177
+ .top_logo_nav {
178
+
179
+ width: 960px;
180
+
181
+ max-width: 100%;
182
+
183
+ margin: 20px auto 20px auto;
184
+
185
+ position: relative;
186
+
187
+ }
188
+
189
+
190
+
191
+ .top_logo_nav h1 {
192
+
193
+ font-size: 28px;
194
+
195
+ font-weight: bold;
196
+
197
+ float: left;
198
+
199
+ }
200
+
201
+
202
+
203
+
204
+
205
+
206
+
207
+ .logo_and_title {
208
+
209
+ float: right;
210
+
211
+ box-sizing: border-box;
212
+
213
+ /* margin-right: 5.5rem; */
214
+
215
+ }
216
+
217
+
218
+
219
+
220
+
221
+ .manu_button {
222
+
223
+ font-size: 0;
224
+
225
+ line-height: 2.5;
226
+
227
+ list-style: none;
228
+
229
+ overflow: hidden;
230
+
231
+ /* float: right; */
232
+
233
+ /* position: relative; */
234
+
235
+ }
236
+
237
+
238
+
239
+ .manu_button li {
240
+
241
+ width: 110px;
242
+
243
+ max-width: 100%;
244
+
245
+ float: left;
246
+
247
+ font-size: 14px;
248
+
249
+ font-weight: bold;
250
+
251
+ /* margin-right: 10px; */
252
+
253
+ }
254
+
255
+
256
+
257
+ .manu_button li a {
258
+
259
+ text-decoration: none;
260
+
261
+ color: #000;
262
+
263
+ margin-left: 20px;
264
+
265
+ }
266
+
267
+
268
+
269
+ .manu_button li a::before {
270
+
271
+ position: absolute;
272
+
273
+ content: "";
274
+
275
+ display: block;
276
+
277
+ margin-top: 11px;
278
+
279
+ /* margin-left: -14px;消 */
280
+
281
+ /* top: 7.5%; 削除*/
282
+
283
+ left: auto;
284
+
285
+ height: 0;
286
+
15
- エラーメッセージ
287
+ width: 0;
288
+
289
+ border-style: solid;
290
+
291
+ border-width: 6px 0 6px 10px;
292
+
293
+ border-color: transparent transparent transparent #006699;
294
+
295
+ }
296
+
297
+
298
+
299
+
300
+
301
+
302
+
303
+
304
+
305
+ @media screen and (max-width: 641px) {
306
+
307
+
308
+
309
+ section h2 {
310
+
311
+ padding-bottom: 20px;
312
+
313
+ }
314
+
315
+
316
+
317
+ section h3 {
318
+
319
+ margin:
320
+
321
+ 105px auto 35px;
322
+
323
+ }
324
+
325
+
326
+
327
+ #wrap {
328
+
329
+ width: 100%;
330
+
331
+ }
332
+
333
+
334
+
335
+ .top_logo_nav {
336
+
337
+ width: 100%;
338
+
339
+ /*width:100%;→①manu_buttonのリストをカラム落ちさせないために試しに設定*/
340
+
341
+ }
342
+
343
+
344
+
345
+ .logo_and_title {
346
+
347
+ float: right;
348
+
349
+ margin-right: 55px;
350
+
351
+ /* */
352
+
353
+ }
354
+
355
+
356
+
357
+
358
+
359
+ .manu_button li {
360
+
361
+ max-width: 100%;
362
+
363
+ }
364
+
365
+
366
+
367
+
368
+
369
+ }
16
370
 
17
371
  ```
18
372
 
19
373
 
20
374
 
21
- ### 該当のソースコード
22
-
23
-
24
-
25
- ```ここに言語名を入力
26
-
27
- ソースコード
28
-
29
- ```
30
-
31
-
32
-
33
- ### 試したこと
34
-
35
-
36
-
37
- ここに問題に対して試したことを記載してください。
375
+ ### 補足情報(FW/ツールのバージョンなど)
376
+
377
+
378
+
379
+ ![イメージ説明](624205202fc6d7b0250637c8714d3d28.png)