質問編集履歴

2

該当のソースコードを修正しました。

2017/11/21 05:39

投稿

nekoneko22
nekoneko22

スコア6

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,9 @@
24
24
 
25
25
  <div class="video-wrap">
26
26
 
27
- <video class="pc" src="img/top/top.mp4" autoplay loop> <img class="sp" src="img/top/top.jpg" alt="Placeholder"> </video>
27
+ <video class="pc" src="img/top/top.mp4" autoplay loop> <img src="img/top/top.jpg" alt="Placeholder"> </video>
28
+
29
+ <img class="sp" src="img/top/top.jpg" alt="Placeholder">
28
30
 
29
31
  </div>
30
32
 

1

該当のソースコードを記載しました。

2017/11/21 05:39

投稿

nekoneko22
nekoneko22

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ```###前提・実現したいこと
1
+ ###前提・実現したいこと
2
2
 
3
3
 
4
4
 
@@ -15,3 +15,35 @@
15
15
 
16
16
 
17
17
  どのように指定すればよろしいでしょうか?
18
+
19
+
20
+
21
+ ###該当のソースコード
22
+
23
+
24
+
25
+ <div class="video-wrap">
26
+
27
+ <video class="pc" src="img/top/top.mp4" autoplay loop> <img class="sp" src="img/top/top.jpg" alt="Placeholder"> </video>
28
+
29
+ </div>
30
+
31
+
32
+
33
+
34
+
35
+ /* パソコンで見たときは"pc"のclassがついた画像が表示される */
36
+
37
+ .pc { display: block !important; }
38
+
39
+ .sp { display: none !important; }
40
+
41
+ /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
42
+
43
+ @media only screen and (max-width: 750px) {
44
+
45
+ .pc { display: none !important; }
46
+
47
+ .sp { display: block !important; }
48
+
49
+ }