teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

CSSを追加しました

2018/10/12 02:10

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -3,4 +3,426 @@
3
3
  コンソール内のエラー確認ページでは、スマホだとヘッダー画像がCSSが反映されていない状態ではみ出ていました。
4
4
  実際公開しているサイト上では問題なく表示されています。また、エラーが出ているページはwordpressで作成した個別記事ページの1記事で、ほかの記事ページにはエラーは出ていません。
5
5
  同じ条件で制作した他の記事ページにはエラーが出ず、エラーが出たページも実際は問題なく表示されている場合、どの部分を修正すればエラーが消えるのでしょうか。
6
- 詳しい方、ご教授ください。
6
+ 詳しい方、ご教授ください。
7
+
8
+ ---------------------追記---------------------
9
+ @media screen and ( max-width:960px) {
10
+ /* 画面サイズが960px以下はここを読み込む */
11
+
12
+ /*================== header ==================*/
13
+
14
+
15
+ header h1 img {
16
+ width: 180px;
17
+ height: auto;
18
+ }
19
+
20
+ header .sns {
21
+ padding:0.8rem 0.5rem;
22
+ }
23
+
24
+ header .sns li {
25
+ width: 35px;
26
+ padding: 0.3rem 0 0 0.5rem;
27
+ list-style: none;
28
+
29
+ }
30
+
31
+ header {
32
+ padding: 1.3rem 1rem ;
33
+ }
34
+
35
+ #pc_nav {
36
+ display: none
37
+ }
38
+
39
+ /*================== nav ==================*/
40
+
41
+ header nav {
42
+ padding:1.5em;
43
+ position: absolute;
44
+ top:0;
45
+ left:0;
46
+ display: flex;
47
+ }
48
+
49
+ #nav-drawer {
50
+ position: relative;
51
+ }
52
+
53
+ /*チェックボックス等は非表示に*/
54
+ .nav-unshown {
55
+ display:none;
56
+ }
57
+
58
+ /*アイコンのスペース*/
59
+ #nav-open {
60
+ display: inline-block;
61
+ width: 30px;
62
+ height: 22px;
63
+ vertical-align: middle;
64
+ }
65
+
66
+ /*ハンバーガーアイコン*/
67
+ #nav-open span, #nav-open span:before, #nav-open span:after {
68
+ position: absolute;
69
+ height: 3px;/*線の太さ*/
70
+ width: 25px;/*長さ*/
71
+ border-radius: 3px;
72
+ background: #000;
73
+ display: block;
74
+ content: '';
75
+ cursor: pointer;
76
+ }
77
+
78
+ #nav-open span:before {
79
+ bottom: -8px;
80
+ }
81
+
82
+ #nav-open span:after {
83
+ bottom: -16px;
84
+ }
85
+
86
+ /*閉じる用の薄黒カバー*/
87
+
88
+ #nav-close {
89
+ display: none;/*はじめは隠しておく*/
90
+ position: fixed;
91
+ z-index: 99;
92
+ top: 0;/*全体に広がるように*/
93
+ left: 0;
94
+ width: 100%;
95
+ height: 100%;
96
+ background: black;
97
+ opacity: 0;
98
+ transition: .3s ease-in-out;
99
+ }
100
+
101
+ /*中身*/
102
+ #nav-content {
103
+ overflow: auto;
104
+ position: fixed;
105
+ top: 0;
106
+ left: 0;
107
+ z-index: 9999;/*最前面に*/
108
+ width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
109
+ max-width: 330px;/*最大幅(調整してください)*/
110
+ height: 100%;
111
+ background: #fff;/*背景色*/
112
+ transition: .3s ease-in-out;/*滑らかに表示*/
113
+ -webkit-transform: translateX(-105%);
114
+ transform: translateX(-105%);/*左に隠しておく*/
115
+ }
116
+
117
+ /*チェックが入ったらもろもろ表示*/
118
+ #nav-input:checked ~ #nav-close {
119
+ display: block;/*カバーを表示*/
120
+ opacity: .5;
121
+ }
122
+
123
+ #nav-input:checked ~ #nav-content {
124
+ -webkit-transform: translateX(0%);
125
+ transform: translateX(0%);/*中身を表示(右へスライド)*/
126
+ box-shadow: 6px 0 25px rgba(0,0,0,.15);
127
+ }
128
+
129
+ header nav .menu {
130
+ font-weight: bold;
131
+ font-size: 2em;
132
+ padding: 1.1em;
133
+ }
134
+
135
+ header nav li {
136
+ padding: 1em;
137
+ font-size: 1.3rem;
138
+ }
139
+
140
+ header nav a {
141
+ text-decoration: none;
142
+ color:#000;
143
+ font-weight: bold;
144
+ }
145
+
146
+ header nav .sub {
147
+ display: flex;
148
+ justify-content: space-between;
149
+ padding: 2rem;
150
+ }
151
+
152
+ header nav .sub li {
153
+ font-size: 0.8rem;
154
+ }
155
+
156
+ /*ラベル*/
157
+ .accbox label {
158
+ display: block;
159
+ cursor :pointer;
160
+ transition: all 0.5s;
161
+ }
162
+
163
+
164
+ /*チェックは隠す*/
165
+ .accbox input {
166
+ display: none;
167
+ }
168
+
169
+ /*中身を非表示にしておく*/
170
+ .accbox .accshow {
171
+ height: 0;
172
+ padding: 0;
173
+ overflow: hidden;
174
+ opacity: 0;
175
+ transition: 0.8s;
176
+ }
177
+
178
+ .accbox .accshow p {
179
+ padding:0.4rem;
180
+ }
181
+
182
+ .accbox .accshow a {
183
+ font-size:0.9rem;
184
+ font-weight:normal;
185
+ font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
186
+ }
187
+
188
+ /*クリックで中身表示*/
189
+ .cssacc:checked + .accshow {
190
+ height: auto;
191
+ padding: 5px;
192
+ opacity: 1;
193
+ }
194
+
195
+
196
+
197
+ /*================== wrapper ==================*/
198
+
199
+
200
+ /*================== banner ==================*/
201
+
202
+
203
+ .banner img {
204
+ width: 100%;
205
+ }
206
+
207
+ /*================== footer ==================*/
208
+
209
+ footer .sitemap li {
210
+ display: none;
211
+ }
212
+
213
+ footer .sitemap {
214
+ display: flex;
215
+ flex-wrap: wrap;
216
+ padding-top: 1rem;
217
+ }
218
+
219
+ footer .sitemap_menu {
220
+ width: 50%;
221
+ text-align: center;
222
+ padding: 0.8rem 0;
223
+ }
224
+
225
+ footer .sitemap_menu a {
226
+ color:#777676;
227
+ text-decoration:none;
228
+ }
229
+
230
+ footer .map {
231
+ width: 100%;
232
+ padding: 1rem 2rem ;
233
+ }
234
+
235
+ footer .map p {
236
+ display: none;
237
+ }
238
+
239
+ footer iframe {
240
+ height: 250px;
241
+ }
242
+
243
+ footer .sitemap2 li {
244
+ list-style: none;
245
+ font-size: 0.7rem;
246
+ }
247
+
248
+ footer .sitemap2 li a {
249
+ text-decoration: none;
250
+ }
251
+
252
+ footer .sitemap2_wrap {
253
+ padding: 3rem 2rem;
254
+ }
255
+
256
+ footer .shop_deta {
257
+ text-align: center;
258
+ padding-bottom: 2rem;
259
+ }
260
+
261
+ footer .shop_deta li {
262
+ padding-bottom: 0.5rem;
263
+ }
264
+
265
+ footer .shop_deta img {
266
+ margin-bottom: 1rem;
267
+ }
268
+
269
+ footer .copy {
270
+ text-align: center;
271
+ }
272
+
273
+ footer .copy ul {
274
+ text-align: center;
275
+ }
276
+
277
+ footer .copy li {
278
+ display: inline-block;
279
+ }
280
+
281
+ .single .navigation {
282
+ margin-top: 4rem;
283
+ line-height: 1.6rem;
284
+ }
285
+
286
+ .description .post img {
287
+ width: 100%;
288
+ height: auto;
289
+ }
290
+
291
+
292
+ .single .entry-content img {
293
+ width: 100%;
294
+ height: auto;
295
+ }
296
+
297
+ .single h1.entry-title {
298
+ text-align: center;
299
+ padding:3rem 0 0.5rem 0;
300
+ font-size: 5vmin;
301
+ line-height:1.6rem;
302
+ }
303
+
304
+ .single .entry-meta {
305
+ text-align: center;
306
+ }
307
+
308
+ .home .entry-content {
309
+ display:none;
310
+ }
311
+
312
+ .sp_main img {
313
+ height:100vh;
314
+ }
315
+
316
+ #main_img {
317
+ display: none;
318
+ }
319
+
320
+ .news_area {
321
+ padding: 2rem 0 3rem 0;
322
+ }
323
+
324
+ .news_wrap {
325
+ margin: 0 auto;
326
+ padding: 0 2rem;
327
+ }
328
+
329
+ .test {
330
+ display: flex;
331
+ flex-direction: column;
332
+ flex-wrap: wrap;
333
+ height: 100px;
334
+ }
335
+
336
+ .easy {
337
+ font-size: 6vw;
338
+ white-space: nowrap;
339
+ }
340
+
341
+ .easy_text {
342
+ font-size: 0.8rem;
343
+ line-height: 1.6rem;
344
+ width: 75%;
345
+ margin: 0 auto;
346
+ }
347
+
348
+ .order {
349
+ padding: 2rem 1rem;
350
+ }
351
+
352
+ .order img {
353
+ width: 80%;
354
+ }
355
+
356
+ .order .easy {
357
+ display: none;
358
+ }
359
+
360
+
361
+ .inner {
362
+ width: 200px;
363
+ }
364
+
365
+ .tel_pc {
366
+ display: none;
367
+ }
368
+
369
+ .contact_area .tel a {
370
+ text-decoration: none;
371
+ color: #000;
372
+ }
373
+
374
+ .news_area .date {
375
+ padding-right:0.5rem;
376
+ }
377
+
378
+ .metaslider .flexslider {
379
+ margin-bottom: 0 !important;
380
+ }
381
+
382
+ .title {
383
+ line-height:1.5rem;
384
+ }
385
+
386
+ .toriatukai {
387
+ display: none!important;
388
+ }
389
+
390
+ .sp_toriatukai {
391
+ padding:0 2rem 3rem 2rem;
392
+ }
393
+
394
+ .sp_toriatukai img {
395
+ width: 100%;
396
+ }
397
+
398
+ .toriatukai_img {
399
+ background-color:#e2e3e3;
400
+ }
401
+
402
+ .toriatukai_text {
403
+ background-color:#e2e3e3;
404
+ padding:2rem;
405
+ color:#908f8f;
406
+ font-size:0.8rem;
407
+ text-align:center;
408
+ line-height:1.3rem;
409
+ }
410
+
411
+ .toriatukai_text .more {
412
+ margin-top:1rem;
413
+ display:block;
414
+ background-color:#908f8f;
415
+ padding: 0.7rem 1.5rem;
416
+ color: #FFF;
417
+
418
+ }
419
+
420
+ .toriatukai_text img {
421
+ margin-bottom:0.8rem;
422
+ }
423
+
424
+ .toriatukai .inner .more a {
425
+ text-decoration:none;
426
+ color:#FFF;
427
+ }
428
+ }