質問編集履歴

1

修正依頼対応

2020/09/17 08:32

投稿

kazu5942
kazu5942

スコア6

test CHANGED
File without changes
test CHANGED
@@ -28,48 +28,110 @@
28
28
 
29
29
  ```ここに言語名を入力
30
30
 
31
+ <div class="col-md-6 offset-md-3">
32
+
33
+ <div class="card" style="margin:50px 0">
34
+
35
+ <div class="card-header">☑チェック項目</div>
36
+
37
+
38
+
39
+ <ul class="list-group list-group-flush">
40
+
41
+
42
+
31
- <li class="list-group-item">
43
+ <li class="list-group-item">
32
-
44
+
33
- 窓施錠
45
+ 窓施錠
34
-
46
+
35
- <label class="checkbox">
47
+ <label class="checkbox">
48
+
36
-
49
+ <input type="checkbox" id="check" />
50
+
51
+ <span class="danger"></span>
52
+
53
+ </label>
54
+
55
+ </li>
56
+
57
+ <li class="list-group-item">
58
+
59
+ 消灯
60
+
61
+ <label class="checkbox">
62
+
37
- <input type="checkbox" />
63
+ <input type="checkbox" />
38
-
64
+
39
- <span class="danger"></span>
65
+ <span class="danger"></span>
40
-
66
+
41
- </label>
67
+ </label>
68
+
69
+ </li>
70
+
71
+ <li class="list-group-item">
72
+
73
+ エアコン
74
+
75
+ <label class="checkbox">
76
+
77
+ <input type="checkbox" />
78
+
79
+ <span class="danger"></span>
80
+
81
+ </label>
82
+
83
+ </li>
84
+
85
+ <li class="list-group-item">
86
+
87
+ セコム起動
88
+
89
+ <label class="checkbox">
90
+
91
+ <input type="checkbox" />
92
+
93
+ <span class="danger"></span>
94
+
95
+ </label>
96
+
97
+ </li>
98
+
99
+ <li class="list-group-item">
100
+
101
+ セコム起動
102
+
103
+ <label class="checkbox">
104
+
105
+ <input type="checkbox" />
106
+
107
+ <span class="danger"></span>
108
+
109
+ </label>
110
+
111
+ </li>
112
+
113
+ <li class="list-group-item">
114
+
115
+ エアコン
116
+
117
+ <label class="checkbox">
118
+
119
+ <input type="checkbox" />
120
+
121
+ <span class="danger"></span>
122
+
123
+ </label>
124
+
125
+ </li>
126
+
127
+ </ul>
128
+
129
+ </div>
130
+
131
+ </div>
42
132
 
43
133
  </li>
44
134
 
45
- <li class="list-group-item">
46
-
47
- 消灯
48
-
49
- <label class="checkbox">
50
-
51
- <input type="checkbox" />
52
-
53
- <span class="danger"></span>
54
-
55
- </label>
56
-
57
- </li>
58
-
59
- <li class="list-group-item">
60
-
61
- エアコン
62
-
63
- <label class="checkbox">
64
-
65
- <input type="checkbox" />
66
-
67
- <span class="danger"></span>
68
-
69
- </label>
70
-
71
- </li>
72
-
73
135
  ```
74
136
 
75
137
 
@@ -106,6 +168,46 @@
106
168
 
107
169
 
108
170
 
171
+ ```ここに言語名を入力
172
+
173
+ @keyframes check {0% {height: 0;width: 0;}
174
+
175
+ 25% {height: 0;width: 10px;}
176
+
177
+ 50% {height: 20px;width: 10px;}
178
+
179
+ }
180
+
181
+ .checkbox{background-color:#fff;display:inline-block;height:28px;margin:0 .25em;width:28px;border-radius:4px;border:1px solid #ccc;float:right}
182
+
183
+ .checkbox span{display:block;height:28px;position:relative;width:28px;padding:0}
184
+
185
+ .checkbox span:after{-moz-transform:scaleX(-1) rotate(135deg);-ms-transform:scaleX(-1) rotate(135deg);-webkit-transform:scaleX(-1) rotate(135deg);transform:scaleX(-1) rotate(135deg);-moz-transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;transform-origin:left top;border-right:4px solid #fff;border-top:4px solid #fff;content:'';display:block;height:20px;left:3px;position:absolute;top:15px;width:10px}
186
+
187
+ .checkbox span:hover:after{border-color:#999}
188
+
189
+ .checkbox input{display:none}
190
+
191
+ .checkbox input:checked + span:after{-webkit-animation:check .8s;-moz-animation:check .8s;-o-animation:check .8s;animation:check .8s;border-color:#555}
192
+
193
+ .checkbox input:checked + .default:after{border-color:#444}
194
+
195
+ .checkbox input:checked + .primary:after{border-color:#2196F3}
196
+
197
+ .checkbox input:checked + .success:after{border-color:#8bc34a}
198
+
199
+ .checkbox input:checked + .info:after{border-color:#3de0f5}
200
+
201
+ .checkbox input:checked + .warning:after{border-color:#FFC107}
202
+
203
+ .checkbox input:checked + .danger:after{border-color:#f44336}
204
+
205
+
206
+
207
+ ```
208
+
209
+
210
+
109
211
 
110
212
 
111
213
  ### 試したこと