質問編集履歴

1

試したコードに変更。

2020/09/07 18:40

投稿

takawork
takawork

スコア95

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  もしくはもともとの問い合わせフォームを消して、新しく画像を表示するのでしょうか?
4
4
 
5
-
5
+ https://fastcoding.jp/blog/all/frontend/responsive_img/
6
+
7
+ このサイトを参考にclassにpcとspと入れて見たのですが、スマホ用サイズにしても問い合わせフォームが表示されたままでした。
6
8
 
7
9
  ```
8
10
 
@@ -18,7 +20,9 @@
18
20
 
19
21
  <div class="form">
20
22
 
21
- <a href="#">問い合わせフォーム</a>
23
+ <a class="pc" href="#">問い合わせフォーム</a>
24
+
25
+ <img class="sp" href="#" src="/img/fire.png">
22
26
 
23
27
  </div>
24
28
 
@@ -26,11 +30,11 @@
26
30
 
27
31
  </section>
28
32
 
29
-
30
-
31
- ```
33
+ ```
32
-
34
+
33
- ```
35
+ ```
36
+
37
+ @charset "UTF-8";
34
38
 
35
39
  * {
36
40
 
@@ -224,6 +228,12 @@
224
228
 
225
229
  }
226
230
 
231
+ .header-main .form img {
232
+
233
+ width: 20px;
234
+
235
+ }
236
+
227
237
  .header-main .form:hover {
228
238
 
229
239
  background-color: #ffcc00;
@@ -246,6 +256,38 @@
246
256
 
247
257
  }
248
258
 
259
+ /* パソコンで見たときは"pc"のclassがついた画像が表示される */
260
+
261
+ .pc {
262
+
263
+ display: none !important;
264
+
265
+ }
266
+
267
+ .sp {
268
+
269
+ display: block !important;
270
+
271
+ }
272
+
273
+ }
274
+
275
+
276
+
277
+ /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
278
+
279
+ .pc {
280
+
281
+ display: block !important;
282
+
283
+ }
284
+
285
+
286
+
287
+ .sp {
288
+
289
+ display: none !important;
290
+
249
291
  }
250
292
 
251
293
  /*# sourceMappingURL=style.css.map */