質問編集履歴

3

こっちがの修正の事かな

2019/05/18 07:58

投稿

TMaaaaaaaaaaaaa
TMaaaaaaaaaaaaa

スコア15

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- ```
17
+
18
18
 
19
19
  google chromeの検証機能でレスポンシブを見ようとすると、
20
20
 
@@ -42,7 +42,7 @@
42
42
 
43
43
 
44
44
 
45
- ```
45
+
46
46
 
47
47
  ![イメージ説明](27aab3805d4e5ef436e44991a113c429.png) 
48
48
 

2

コード部分の指摘を受け削除

2019/05/18 07:58

投稿

TMaaaaaaaaaaaaa
TMaaaaaaaaaaaaa

スコア15

test CHANGED
File without changes
test CHANGED
@@ -74,230 +74,6 @@
74
74
 
75
75
 
76
76
 
77
- ### 該当のソースコード
78
-
79
- html, body,
80
-
81
- ul, ol, li,
82
-
83
- h1, h2, h3, h4, h5, h6, p, div {
84
-
85
- margin: 0;
86
-
87
- padding: 0;
88
-
89
- }
90
-
91
- *{box-sizing:border-box;}
92
-
93
-
94
-
95
- body {
96
-
97
- font-family: 游ゴシック, YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, Verdana, Arial, Helvetica, sans-serif;
98
-
99
- text-align:center;
100
-
101
-
102
-
103
- position:absolute; /* */
104
-
105
- left: 50%; /* */
106
-
107
- margin-left: -2500px; /*3500の半分*/ /* 拡大時の中央固定 */
108
-
109
- max-width: 5000px; /*fslidesのwidth */ /* */ /* */
110
-
111
- }
112
-
113
-
114
-
115
- /*崩れた原因はwidthが5千でなくなったから、?
116
-
117
- calcでmax-width÷2を計算すればいいのか?
118
-
119
- どうやって元々の全体表示を現在の中央部分表示に切り替えたのか?
120
-
121
- */
122
-
123
- li {
124
-
125
- list-style: none;
126
-
127
- }
128
-
129
-
130
-
131
- a {
132
-
133
- text-decoration: none;
134
-
135
- }
136
-
137
-
138
-
139
- body { overflow-x: hidden; }
140
-
141
- /*横スライドバー非表示 */
142
-
143
-
144
-
145
- .clear{clear:both;}
146
-
147
-
148
-
149
- .container {
150
-
151
- /* slickにコンテナは指定するとダメみたい */
152
-
153
- margin: 0 auto ; /* どうして反映されないのか */
154
-
155
- max-width: 1020px;
156
-
157
- }……
158
-
159
-
160
-
161
-
162
-
163
- ```ここに言語を入力
164
-
165
- <html>
166
-
167
- <head>
168
-
169
- <meta charset="utf-8">
170
-
171
- <title>タイトル</title>
172
-
173
- <link rel="stylesheet" href="./stylesheet.css">
174
-
175
- <link rel="stylesheet" href="./responsive.css">
176
-
177
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
178
-
179
- <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
180
-
181
- <!-- slick -->
182
-
183
- <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
184
-
185
- <!-- slick -->
186
-
187
- <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
188
-
189
- </head>
190
-
191
-
192
-
193
- <body>
194
-
195
- <div id="fb-root"></div>
196
-
197
- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.3"></script>
198
-
199
-
200
-
201
- <header class="tophead">
202
-
203
- <div class="container">
204
-
205
- <div class="header1">
206
-
207
- <img src="image/logo.png">
208
-
209
-
210
-
211
- <ul class="headnav1">
212
-
213
- <li><a href="#" class="inquiry">お問い合わせ</a></li>
214
-
215
- <li><a href="#" class="menzei">免税店</a></li>
216
-
217
- <li class="eng1"><a href="#" class="eng">ภาษาไทย</a></li>
218
-
219
- <li class="eng1"><a href="#" class="eng">한국</a></li>
220
-
221
- <li class="eng1"><a href="#" class="eng">English</a></li>
222
-
223
- <li class="eng1"><a href="#" class="eng">簡体字</a></li>
224
-
225
- <li class="eng1"><a href="#" class="eng">繁体字</a></li>
226
-
227
- </ul>
228
-
229
-
230
-
231
- </div>
232
-
233
-
234
-
235
-
236
-
237
- <ul class="headnav2">
238
-
239
- <li><a href="#" class="info centerInfo">お知らせ</a></li>
240
-
241
- <li><a href="#" class="info">店舗・チラシ検索</a></li>
242
-
243
- <li><a href="#" class="info">イベント・キャンペーン</a></li>
244
-
245
- <li><a href="#" class="info">コラム</a></li>
246
-
247
- <li><a href="#" class="info">サービス</a></li>
248
-
249
- <li><a href="#" class="info">採用情報</a></li>
250
-
251
- <li><a href="#" class="info">サツドラ会員</a></li>
252
-
253
- </ul>
254
-
255
-
256
-
257
-
258
-
259
-
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
- </div>
270
-
271
- </header>
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
- <div class="fslide-wrap">
284
-
285
-
286
-
287
- <ul class="fslides">
288
-
289
-
290
-
291
- <li class="fslide"><p class="smoke "><img src="image/0a9717d280bc72536f3f9bdcd730023a.jpg"></p>
292
-
293
- <div class="under"><a class="campaign">キャンペーン</a>
294
-
295
- <a class="promote">敏感を愛そう。 フリープライスキャンペーン</a>
296
-
297
-
298
-
299
- ```
300
-
301
77
 
302
78
 
303
79
 

1

画像が表示されていなかったため編集しました

2019/05/18 07:56

投稿

TMaaaaaaaaaaaaa
TMaaaaaaaaaaaaa

スコア15

test CHANGED
File without changes
test CHANGED
@@ -40,6 +40,10 @@
40
40
 
41
41
  レスポンスの検証中でも強制的に全体表示にならないような方法があれば教えてください。
42
42
 
43
+
44
+
45
+ ```
46
+
43
47
  ![イメージ説明](27aab3805d4e5ef436e44991a113c429.png) 
44
48
 
45
49
  ↑PC用画面
@@ -48,264 +52,254 @@
48
52
 
49
53
  ↑検証機能画面
50
54
 
51
-
55
+ ### 試したこと
56
+
57
+
58
+
52
-
59
+ レスポンシブ画面時に崩れたレイアウトを全て中央に戻しましたが、
60
+
53
-
61
+ 全体表示そのものは消えず、見づらいままでした。
62
+
54
-
63
+ その上pc画面のレイアウトが崩れたため元に戻しました。
64
+
65
+
66
+
55
-
67
+ コードを何度か書き換えようとしましたが、
68
+
56
-
69
+ 正常に表示されているPC用画面の方が崩れてしまうので
70
+
57
-
71
+ 上手く書き換えられない状態です
58
72
 
59
73
  ```
60
74
 
61
- ### 試したこと
62
-
63
-
64
-
65
- レスポンシブ画面時に崩れたレイアウトを全て中央に戻しましたが、
66
-
67
- 全体表示そのものは消えず、見づらいままでした。
68
-
69
- その上pc画面のレイアウトが崩れたため元に戻しました。
70
-
71
-
72
-
73
- コードを何度か書き換えようとしましたが、
74
-
75
- 正常に表示されているPC用画面の方が崩れてしまうので
76
-
77
- 上手く書き換えられない状態です
75
+
76
+
77
+ ### 該当のソースコード
78
+
79
+ html, body,
80
+
81
+ ul, ol, li,
82
+
83
+ h1, h2, h3, h4, h5, h6, p, div {
84
+
85
+ margin: 0;
86
+
87
+ padding: 0;
88
+
89
+ }
90
+
91
+ *{box-sizing:border-box;}
92
+
93
+
94
+
95
+ body {
96
+
97
+ font-family: 游ゴシック, YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, Verdana, Arial, Helvetica, sans-serif;
98
+
99
+ text-align:center;
100
+
101
+
102
+
103
+ position:absolute; /* */
104
+
105
+ left: 50%; /* */
106
+
107
+ margin-left: -2500px; /*3500の半分*/ /* 拡大時の中央固定 */
108
+
109
+ max-width: 5000px; /*fslidesのwidth */ /* */ /* */
110
+
111
+ }
112
+
113
+
114
+
115
+ /*崩れた原因はwidthが5千でなくなったから、?
116
+
117
+ calcでmax-width÷2を計算すればいいのか?
118
+
119
+ どうやって元々の全体表示を現在の中央部分表示に切り替えたのか?
120
+
121
+ */
122
+
123
+ li {
124
+
125
+ list-style: none;
126
+
127
+ }
128
+
129
+
130
+
131
+ a {
132
+
133
+ text-decoration: none;
134
+
135
+ }
136
+
137
+
138
+
139
+ body { overflow-x: hidden; }
140
+
141
+ /*横スライドバー非表示 */
142
+
143
+
144
+
145
+ .clear{clear:both;}
146
+
147
+
148
+
149
+ .container {
150
+
151
+ /* slickにコンテナは指定するとダメみたい */
152
+
153
+ margin: 0 auto ; /* どうして反映されないのか */
154
+
155
+ max-width: 1020px;
156
+
157
+ }……
158
+
159
+
160
+
161
+
162
+
163
+ ```ここに言語を入力
164
+
165
+ <html>
166
+
167
+ <head>
168
+
169
+ <meta charset="utf-8">
170
+
171
+ <title>タイトル</title>
172
+
173
+ <link rel="stylesheet" href="./stylesheet.css">
174
+
175
+ <link rel="stylesheet" href="./responsive.css">
176
+
177
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
178
+
179
+ <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
180
+
181
+ <!-- slick -->
182
+
183
+ <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
184
+
185
+ <!-- slick -->
186
+
187
+ <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
188
+
189
+ </head>
190
+
191
+
192
+
193
+ <body>
194
+
195
+ <div id="fb-root"></div>
196
+
197
+ <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.3"></script>
198
+
199
+
200
+
201
+ <header class="tophead">
202
+
203
+ <div class="container">
204
+
205
+ <div class="header1">
206
+
207
+ <img src="image/logo.png">
208
+
209
+
210
+
211
+ <ul class="headnav1">
212
+
213
+ <li><a href="#" class="inquiry">お問い合わせ</a></li>
214
+
215
+ <li><a href="#" class="menzei">免税店</a></li>
216
+
217
+ <li class="eng1"><a href="#" class="eng">ภาษาไทย</a></li>
218
+
219
+ <li class="eng1"><a href="#" class="eng">한국</a></li>
220
+
221
+ <li class="eng1"><a href="#" class="eng">English</a></li>
222
+
223
+ <li class="eng1"><a href="#" class="eng">簡体字</a></li>
224
+
225
+ <li class="eng1"><a href="#" class="eng">繁体字</a></li>
226
+
227
+ </ul>
228
+
229
+
230
+
231
+ </div>
232
+
233
+
234
+
235
+
236
+
237
+ <ul class="headnav2">
238
+
239
+ <li><a href="#" class="info centerInfo">お知らせ</a></li>
240
+
241
+ <li><a href="#" class="info">店舗・チラシ検索</a></li>
242
+
243
+ <li><a href="#" class="info">イベント・キャンペーン</a></li>
244
+
245
+ <li><a href="#" class="info">コラム</a></li>
246
+
247
+ <li><a href="#" class="info">サービス</a></li>
248
+
249
+ <li><a href="#" class="info">採用情報</a></li>
250
+
251
+ <li><a href="#" class="info">サツドラ会員</a></li>
252
+
253
+ </ul>
254
+
255
+
256
+
257
+
258
+
259
+
260
+
261
+
262
+
263
+
264
+
265
+
266
+
267
+
268
+
269
+ </div>
270
+
271
+ </header>
272
+
273
+
274
+
275
+
276
+
277
+
278
+
279
+
280
+
281
+
282
+
283
+ <div class="fslide-wrap">
284
+
285
+
286
+
287
+ <ul class="fslides">
288
+
289
+
290
+
291
+ <li class="fslide"><p class="smoke "><img src="image/0a9717d280bc72536f3f9bdcd730023a.jpg"></p>
292
+
293
+ <div class="under"><a class="campaign">キャンペーン</a>
294
+
295
+ <a class="promote">敏感を愛そう。 フリープライスキャンペーン</a>
296
+
297
+
78
298
 
79
299
  ```
80
300
 
81
301
 
82
302
 
83
- ### 該当のソースコード
84
-
85
- html, body,
86
-
87
- ul, ol, li,
88
-
89
- h1, h2, h3, h4, h5, h6, p, div {
90
-
91
- margin: 0;
92
-
93
- padding: 0;
94
-
95
- }
96
-
97
- *{box-sizing:border-box;}
98
-
99
-
100
-
101
- body {
102
-
103
- font-family: 游ゴシック, YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, Verdana, Arial, Helvetica, sans-serif;
104
-
105
- text-align:center;
106
-
107
-
108
-
109
- position:absolute; /* */
110
-
111
- left: 50%; /* */
112
-
113
- margin-left: -2500px; /*3500の半分*/ /* 拡大時の中央固定 */
114
-
115
- max-width: 5000px; /*fslidesのwidth */ /* */ /* */
116
-
117
- }
118
-
119
-
120
-
121
- /*崩れた原因はwidthが5千でなくなったから、?
122
-
123
- calcでmax-width÷2を計算すればいいのか?
124
-
125
- どうやって元々の全体表示を現在の中央部分表示に切り替えたのか?
126
-
127
- */
128
-
129
- li {
130
-
131
- list-style: none;
132
-
133
- }
134
-
135
-
136
-
137
- a {
138
-
139
- text-decoration: none;
140
-
141
- }
142
-
143
-
144
-
145
- body { overflow-x: hidden; }
146
-
147
- /*横スライドバー非表示 */
148
-
149
-
150
-
151
- .clear{clear:both;}
152
-
153
-
154
-
155
- .container {
156
-
157
- /* slickにコンテナは指定するとダメみたい */
158
-
159
- margin: 0 auto ; /* どうして反映されないのか */
160
-
161
- max-width: 1020px;
162
-
163
- }……
164
-
165
-
166
-
167
-
168
-
169
- ```ここに言語を入力
170
-
171
- <html>
172
-
173
- <head>
174
-
175
- <meta charset="utf-8">
176
-
177
- <title>タイトル</title>
178
-
179
- <link rel="stylesheet" href="./stylesheet.css">
180
-
181
- <link rel="stylesheet" href="./responsive.css">
182
-
183
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
184
-
185
- <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
186
-
187
- <!-- slick -->
188
-
189
- <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
190
-
191
- <!-- slick -->
192
-
193
- <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
194
-
195
- </head>
196
-
197
-
198
-
199
- <body>
200
-
201
- <div id="fb-root"></div>
202
-
203
- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.3"></script>
204
-
205
-
206
-
207
- <header class="tophead">
208
-
209
- <div class="container">
210
-
211
- <div class="header1">
212
-
213
- <img src="image/logo.png">
214
-
215
-
216
-
217
- <ul class="headnav1">
218
-
219
- <li><a href="#" class="inquiry">お問い合わせ</a></li>
220
-
221
- <li><a href="#" class="menzei">免税店</a></li>
222
-
223
- <li class="eng1"><a href="#" class="eng">ภาษาไทย</a></li>
224
-
225
- <li class="eng1"><a href="#" class="eng">한국</a></li>
226
-
227
- <li class="eng1"><a href="#" class="eng">English</a></li>
228
-
229
- <li class="eng1"><a href="#" class="eng">簡体字</a></li>
230
-
231
- <li class="eng1"><a href="#" class="eng">繁体字</a></li>
232
-
233
- </ul>
234
-
235
-
236
-
237
- </div>
238
-
239
-
240
-
241
-
242
-
243
- <ul class="headnav2">
244
-
245
- <li><a href="#" class="info centerInfo">お知らせ</a></li>
246
-
247
- <li><a href="#" class="info">店舗・チラシ検索</a></li>
248
-
249
- <li><a href="#" class="info">イベント・キャンペーン</a></li>
250
-
251
- <li><a href="#" class="info">コラム</a></li>
252
-
253
- <li><a href="#" class="info">サービス</a></li>
254
-
255
- <li><a href="#" class="info">採用情報</a></li>
256
-
257
- <li><a href="#" class="info">サツドラ会員</a></li>
258
-
259
- </ul>
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
- </div>
276
-
277
- </header>
278
-
279
-
280
-
281
-
282
-
283
-
284
-
285
-
286
-
287
-
288
-
289
- <div class="fslide-wrap">
290
-
291
-
292
-
293
- <ul class="fslides">
294
-
295
-
296
-
297
- <li class="fslide"><p class="smoke "><img src="image/0a9717d280bc72536f3f9bdcd730023a.jpg"></p>
298
-
299
- <div class="under"><a class="campaign">キャンペーン</a>
300
-
301
- <a class="promote">敏感を愛そう。 フリープライスキャンペーン</a>
302
-
303
-
304
-
305
- ```
306
-
307
-
308
-
309
303
 
310
304
 
311
305
  ### 補足情報(FW/ツールのバージョンなど)