質問編集履歴

1

ソースの追加

2018/10/21 09:54

投稿

pyuga
pyuga

スコア9

test CHANGED
File without changes
test CHANGED
@@ -272,6 +272,104 @@
272
272
 
273
273
  ```
274
274
 
275
+ ###style.css
276
+
277
+ ```css
278
+
279
+ ul.image_list li {
280
+
281
+ /* liが横並びになるようにします。 */
282
+
283
+ display: inline-block;
284
+
285
+ }
286
+
287
+ ul.image_list li .image_box {
288
+
289
+
290
+
291
+ width: 200px;
292
+
293
+ height: 200px;
294
+
295
+
296
+
297
+ /* チェックボックスの親要素にrelativeを指定しておきます。 */
298
+
299
+ position: relative;
300
+
301
+ }
302
+
303
+ .image_box img.thumbnail {
304
+
305
+
306
+
307
+ width: 100%;
308
+
309
+ height: 100%;
310
+
311
+
312
+
313
+ /* 画像にカーソルを合わせたときに、
314
+
315
+ カーソルが指のマークになるようにします。 */
316
+
317
+ cursor: pointer;
318
+
319
+ }
320
+
321
+ .image_box img.thumbnail.checked {
322
+
323
+ /* チェックが入った状態だと、枠が表示されるようにします。 */
324
+
325
+ border: 6px solid blue;
326
+
327
+ /* 線をwidthとheightに含めるようにします。 */
328
+
329
+ box-sizing: border-box;
330
+
331
+ }
332
+
333
+ .image_box .disabled_checkbox {
334
+
335
+ /* チェックボックスの位置は絶対位置にします。 */
336
+
337
+ position: absolute;
338
+
339
+ /* チェックボックスは、親要素の右上から12pxの位置に配置します。 */
340
+
341
+ top: 12px;
342
+
343
+ right: 12px;
344
+
345
+ /* チェック前は非表示にしておきます。 */
346
+
347
+ display: none;
348
+
349
+ /* チェックボックスを大きくします。 */
350
+
351
+ transform: scale(2);
352
+
353
+ /* チェックボックスにカーソルを合わせたときに、
354
+
355
+ カーソルが指のマークになるようにします。 */
356
+
357
+ cursor: pointer;
358
+
359
+ }
360
+
361
+ .image_box img.thumbnail.checked + .disabled_checkbox {
362
+
363
+ /* 画像にcheckedクラスが指定されたときは、
364
+
365
+ チェックボックスの非表示を解除します。 */
366
+
367
+ display: block;
368
+
369
+ }
370
+
371
+ ```
372
+
275
373
  ### 試したこと
276
374
 
277
375
  どこに問題があるのかわからず学生レベルだとお手上げです。