質問編集履歴

3

html

2019/04/17 06:28

投稿

StanS.
StanS.

スコア25

test CHANGED
File without changes
test CHANGED
@@ -6,21 +6,51 @@
6
6
 
7
7
  ```ここに言語を入力
8
8
 
9
+ <html>
10
+
11
+ <head>
12
+
13
+ <link rel="stylesheet" type="text/css" media="screen" href="styles/main.css" />
14
+
15
+ </head>
16
+
17
+
18
+
19
+ <body>
20
+
9
- Dillingers <label for="modal-check"><sup>(注1)</sup></label><input type="checkbox" id="modal-check"><span class="modal"><label for="modal-check">閉じる</label><br /><br />
21
+ Dillingers <label for="modal-check"><sup>(注1)</sup></label><input type="checkbox" id="modal-check"><span class="modal"><label for="modal-check">閉じる</label><br /><br />
10
22
 
11
23
  <p style="font-family:’Helvetica Bold’,游明朝,'Yu Mincho'; text-align:center;">Derringer (デリンジャー )</p>
12
24
 
13
25
  <center><img src="images/phild.png" width="150" height="100" alt="phildelphiadillinger"></center>
14
26
 
27
+
28
+
15
29
  解説:写真はフィラデルフィア・デリンジャー。人間の拳程度の大きさでポケットにも入る。護身拳銃や暗殺用として使われていた。リンカーン暗殺に使われた銃もデリンジャー、パーカッション式のデリンジャー。</span>
16
30
 
17
- <br />をカジノで拾った。
31
+ <br />
18
32
 
19
33
 
20
34
 
21
- 俺は奴の用心棒<label for="modal-check"><sup>(注2)</sup></label><input type="checkbox" id="modal-check"><span class="modal"><label for="modal-check">閉じる</label><br /><br />
35
+ をカジノで拾った。
22
36
 
37
+
38
+
39
+ 俺は奴の用心棒<label for="modal-check" id="youjinbou"><sup>(注2)</sup></label><input type="checkbox" id="modal-check"><span class="modal" id="2"><label for="modal-check">閉じる</label><br /><br />
40
+
41
+
42
+
23
- 状況:デリンジャー護身用に持っている。</span><br/>今からあいつの元に行く。
43
+ 状況:デリンジャー護身用に持っている。</span><br/>
44
+
45
+
46
+
47
+ 今からあいつの元に行く。
48
+
49
+
50
+
51
+ </body>
52
+
53
+ </html>
24
54
 
25
55
 
26
56
 

2

syuusei

2019/04/17 06:28

投稿

StanS.
StanS.

スコア25

test CHANGED
File without changes
test CHANGED
@@ -14,49 +14,25 @@
14
14
 
15
15
  解説:写真はフィラデルフィア・デリンジャー。人間の拳程度の大きさでポケットにも入る。護身拳銃や暗殺用として使われていた。リンカーン暗殺に使われた銃もデリンジャー、パーカッション式のデリンジャー。</span>
16
16
 
17
- <br />
17
+ <br />をカジノで拾った。
18
+
19
+
20
+
21
+ 俺は奴の用心棒<label for="modal-check"><sup>(注2)</sup></label><input type="checkbox" id="modal-check"><span class="modal"><label for="modal-check">閉じる</label><br /><br />
22
+
23
+ 状況:デリンジャー護身用に持っている。</span><br/>今からあいつの元に行く。
24
+
25
+
18
26
 
19
27
  ```
20
28
 
21
29
 
22
30
 
23
- カジノで拾った。
31
+ ```ここに言語入力
32
+
33
+ CSS
24
34
 
25
35
 
26
-
27
- ```ここに言語を入力
28
-
29
- 俺は奴の用心棒<label for="modal-check"><sup>(注2)</sup></label><input type="checkbox" id="modal-check"><span class="modal"><label for="modal-check">閉じる</label><br /><br />
30
-
31
- 状況:デリンジャー護身用に持っている。</span><br/>
32
-
33
- ```
34
-
35
-
36
-
37
- 今からあいつの元に行く。
38
-
39
-
40
-
41
- ----参考までに今表示されている内容は下記です。
42
-
43
-
44
-
45
-
46
-
47
- ![イメージ説明](b61f134a7361761cd0e8c6a69979b5b3.png)
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
- ModalはネットでまるまるいただいたものでCSSで動く仕組みになっています。
56
-
57
-
58
-
59
- ```
60
36
 
61
37
  .modal {
62
38
 
@@ -115,3 +91,23 @@
115
91
 
116
92
 
117
93
  ```
94
+
95
+
96
+
97
+
98
+
99
+ 参考までに今表示されている内容は下記です。
100
+
101
+
102
+
103
+
104
+
105
+ ![イメージ説明](b61f134a7361761cd0e8c6a69979b5b3.png)
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+ ModalはネットでまるまるいただいたものでCSSで動く仕組みになっています。

1

CSS追加しました

2019/04/17 06:24

投稿

StanS.
StanS.

スコア25

test CHANGED
File without changes
test CHANGED
@@ -45,3 +45,73 @@
45
45
 
46
46
 
47
47
  ![イメージ説明](b61f134a7361761cd0e8c6a69979b5b3.png)
48
+
49
+
50
+
51
+
52
+
53
+
54
+
55
+ ModalはネットでまるまるいただいたものでCSSで動く仕組みになっています。
56
+
57
+
58
+
59
+ ```
60
+
61
+ .modal {
62
+
63
+ display: none;
64
+
65
+ width: 60vw;
66
+
67
+ height: 60vw;
68
+
69
+ background-color: #FFF;
70
+
71
+ position: fixed;
72
+
73
+ top: -10px;
74
+
75
+ left: -10px;
76
+
77
+ right: -10px;
78
+
79
+ bottom: -10px;
80
+
81
+ margin: auto;
82
+
83
+ box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
84
+
85
+ }
86
+
87
+ #modal-check {
88
+
89
+ display: none;
90
+
91
+ }
92
+
93
+ #modal-check:checked + .modal {
94
+
95
+ display: block;
96
+
97
+ }
98
+
99
+
100
+
101
+
102
+
103
+ .modal .modal-check:checked + .modal-body {
104
+
105
+ animation: fadeout .2s 1 forwards, hide .1s .2s 1 forwards;
106
+
107
+ }
108
+
109
+ .modal .modal-check:checked + .modal-body .modal-window {
110
+
111
+ animation: zoomout .2s 1 forwards;
112
+
113
+ }
114
+
115
+
116
+
117
+ ```