質問編集履歴
1
ソースの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -135,6 +135,55 @@
|
|
|
135
135
|
|
|
136
136
|
|
|
137
137
|
```
|
|
138
|
+
###style.css
|
|
139
|
+
```css
|
|
140
|
+
ul.image_list li {
|
|
141
|
+
/* liが横並びになるようにします。 */
|
|
142
|
+
display: inline-block;
|
|
143
|
+
}
|
|
144
|
+
ul.image_list li .image_box {
|
|
145
|
+
|
|
146
|
+
width: 200px;
|
|
147
|
+
height: 200px;
|
|
148
|
+
|
|
149
|
+
/* チェックボックスの親要素にrelativeを指定しておきます。 */
|
|
150
|
+
position: relative;
|
|
151
|
+
}
|
|
152
|
+
.image_box img.thumbnail {
|
|
153
|
+
|
|
154
|
+
width: 100%;
|
|
155
|
+
height: 100%;
|
|
156
|
+
|
|
157
|
+
/* 画像にカーソルを合わせたときに、
|
|
158
|
+
カーソルが指のマークになるようにします。 */
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
}
|
|
161
|
+
.image_box img.thumbnail.checked {
|
|
162
|
+
/* チェックが入った状態だと、枠が表示されるようにします。 */
|
|
163
|
+
border: 6px solid blue;
|
|
164
|
+
/* 線をwidthとheightに含めるようにします。 */
|
|
165
|
+
box-sizing: border-box;
|
|
166
|
+
}
|
|
167
|
+
.image_box .disabled_checkbox {
|
|
168
|
+
/* チェックボックスの位置は絶対位置にします。 */
|
|
169
|
+
position: absolute;
|
|
170
|
+
/* チェックボックスは、親要素の右上から12pxの位置に配置します。 */
|
|
171
|
+
top: 12px;
|
|
172
|
+
right: 12px;
|
|
173
|
+
/* チェック前は非表示にしておきます。 */
|
|
174
|
+
display: none;
|
|
175
|
+
/* チェックボックスを大きくします。 */
|
|
176
|
+
transform: scale(2);
|
|
177
|
+
/* チェックボックスにカーソルを合わせたときに、
|
|
178
|
+
カーソルが指のマークになるようにします。 */
|
|
179
|
+
cursor: pointer;
|
|
180
|
+
}
|
|
181
|
+
.image_box img.thumbnail.checked + .disabled_checkbox {
|
|
182
|
+
/* 画像にcheckedクラスが指定されたときは、
|
|
183
|
+
チェックボックスの非表示を解除します。 */
|
|
184
|
+
display: block;
|
|
185
|
+
}
|
|
186
|
+
```
|
|
138
187
|
### 試したこと
|
|
139
188
|
どこに問題があるのかわからず学生レベルだとお手上げです。
|
|
140
189
|
ただ単純に知識が薄いのでechoで$iurlsを確認すること以外はしていません。
|