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

質問編集履歴

2

さらに見やすくしました。

2021/01/08 05:32

投稿

tyd
tyd

スコア0

title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,7 @@
8
8
  ある程度はできましたが、”次へ”、”戻る”ボタンが機能しません。
9
9
 
10
10
  サンプルはこれです。
11
- http://taihei-y.net/
11
+ [http://taihei-y.net/](http://taihei-y.net/)
12
12
 
13
13
  ### 発生している問題・エラーメッセージ
14
14
 

1

見やすくしました。

2021/01/08 05:32

投稿

tyd
tyd

スコア0

title CHANGED
File without changes
body CHANGED
@@ -19,8 +19,6 @@
19
19
  ### 該当のソースコード
20
20
 
21
21
  ```ここに言語名を入力
22
- ソースコード
23
- ```
24
22
  <!doctype html>
25
23
  <html>
26
24
  <head>
@@ -31,6 +29,45 @@
31
29
  </head>
32
30
 
33
31
  <body>
32
+ <div class="container">
33
+ <div class="col-lg-3" style="display: inline-block">
34
+ <a class="js-modal-open" href="" data-target="modal01"><img src="img/damiy_movie_img.jpg" alt="" width="270" height="220"/></a>
35
+   <div id="modal01" class="modal js-modal">
36
+ <div class="modal__bg js-modal-close"></div>
37
+ <div class="modal__content">
38
+ <a class="js-modal-open" href="" data-target="modal01">
39
+ <video src="sampl-01.mp4"controls width="100%" height="auto"></video>
40
+ </a>
41
+ <h4>●●●●●●●●</h4><p>●●●●●●●●●●●●●●●●</p>
42
+ <a href="" class="back">戻る</a><a href="" class="next">次へ</a>
43
+ <a class="js-modal-close" href="">閉じる</a>
44
+ </div><!--modal__inner-->
45
+ </div><!--modal--><h4><strong>●●●●●●●●</strong></h4>
46
+ <p>●●●●●●●●●●●●</p>
47
+ </div>
48
+
49
+ <div class="col-lg-3" style="display: inline-block">
50
+ <a class="js-modal-open" href="" data-target="modal02"><img src="img/damiy_movie_img.jpg" alt="" width="270" height="220" /></a>
51
+   <div id="modal02" class="modal js-modal">
52
+ <div class="modal__bg js-modal-close"></div>
53
+ <div class="modal__content">
54
+ <a class="js-modal-open" href="" data-target="modal02">
55
+ <video src="sampl-01.mp4"controls width="100%" height="auto"></video>
56
+ </a>
57
+ <h4>●●●●●●●●</h4><p>●●●●●●●●●●●●●●●●●●●●</p>
58
+ <a href="" class="back">戻る</a><a href="" class="next">次へ</a>
59
+ <a class="js-modal-close" href="">閉じる</a>
60
+ </div><!--modal__inner-->
61
+ </div><!--modal--><h4><strong>●●●●●●●●</strong></h4>
62
+ <p>●●●●●●●●●●●●●●●●●●●●●●●●</p>
63
+ </div>
64
+
65
+ </div>
66
+ </body>
67
+ </html>
68
+
69
+ ```
70
+ ```ここに言語名を入力
34
71
  <style>
35
72
  .content{ margin: 0 auto;padding: 40px;}
36
73
 
@@ -45,7 +82,8 @@
45
82
  .next{margin: 10px;cursor: pointer;}
46
83
 
47
84
  </style>
48
-
85
+ ```
86
+ ```ここに言語名を入力
49
87
  <script>
50
88
  $(function(){
51
89
  $('.js-modal-open').each(function(){
@@ -72,44 +110,9 @@
72
110
  });
73
111
  });
74
112
  </script>
113
+ ```
75
114
 
76
- <div class="container">
77
- <div class="col-lg-3" style="display: inline-block">
78
- <a class="js-modal-open" href="" data-target="modal01"><img src="img/damiy_movie_img.jpg" alt="" width="270" height="220"/></a>
79
-   <div id="modal01" class="modal js-modal">
80
- <div class="modal__bg js-modal-close"></div>
81
- <div class="modal__content">
82
- <a class="js-modal-open" href="" data-target="modal01">
83
- <video src="sampl-01.mp4"controls width="100%" height="auto"></video>
84
- </a>
85
- <h4>●●●●●●●●</h4><p>●●●●●●●●●●●●●●●●</p>
86
- <a href="" class="back">戻る</a><a href="" class="next">次へ</a>
87
- <a class="js-modal-close" href="">閉じる</a>
88
- </div><!--modal__inner-->
89
- </div><!--modal--><h4><strong>●●●●●●●●</strong></h4>
90
- <p>●●●●●●●●●●●●</p>
91
- </div>
92
115
 
93
- <div class="col-lg-3" style="display: inline-block">
94
- <a class="js-modal-open" href="" data-target="modal02"><img src="img/damiy_movie_img.jpg" alt="" width="270" height="220" /></a>
95
-   <div id="modal02" class="modal js-modal">
96
- <div class="modal__bg js-modal-close"></div>
97
- <div class="modal__content">
98
- <a class="js-modal-open" href="" data-target="modal02">
99
- <video src="sampl-01.mp4"controls width="100%" height="auto"></video>
100
- </a>
101
- <h4>●●●●●●●●</h4><p>●●●●●●●●●●●●●●●●●●●●</p>
102
- <a href="" class="back">戻る</a><a href="" class="next">次へ</a>
103
- <a class="js-modal-close" href="">閉じる</a>
104
- </div><!--modal__inner-->
105
- </div><!--modal--><h4><strong>●●●●●●●●</strong></h4>
106
- <p>●●●●●●●●●●●●●●●●●●●●●●●●</p>
107
- </div>
108
-
109
- </div>
110
- </body>
111
- </html>
112
-
113
116
  ### 試したこと
114
117
 
115
118
  ここに問題に対して試したことを記載してください。