質問編集履歴
1
ソースの追加
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
|
どこに問題があるのかわからず学生レベルだとお手上げです。
|