teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問縦長か横長かを判定したい。

編集履歴

質問編集履歴

6

修正

2020/05/21 14:46

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- javascriptで要素が縦長か横長かを判定したい。
1
+ 縦長か横長かを判定したい。
test CHANGED
@@ -1,489 +1,5 @@
1
- プログラミング初心者です。
1
+ 修正中
2
-
3
- 画像の枚数によって、画像の表示を変えるプログラムを練習で書いています。
4
-
5
- 例えば、画像が１枚の時はそのままの画像、２枚の時は２分の１ずつの画像、３枚の時は２分の１が１つ、４分の１が２つの画像を表示というような形です。
6
-
7
- 画像の枚数によって、クラスを与えてCSSを適応するようにしています。
8
-
9
- 今回は、画像の要素が縦長なのか横長なのかを判定し、それぞれにクラスを与えたいです。
10
-
11
- ２枚の画像を表示する時、縦長の画像が２枚なら正方形を縦に分割して表示、横長の写真が２枚なら、正方形の枠を横に２つに分割して表示するようにしたいです。
12
2
 
13
3
 
14
4
 
15
- ```HTML
16
-
17
- <!DOCTYPE html>
18
-
19
- <html lang="en" dir="ltr">
20
-
21
- <head>
22
-
23
- <meta charset="utf-8">
24
-
25
- <link rel="stylesheet" href="photo.css">
26
-
27
- <title>photo</title>
28
-
29
- </head>
30
-
31
-
32
-
33
- <body>
34
-
35
- <p>5枚のとき</p>
36
-
37
- <div class = "grid-container">
38
-
39
- <div class = ""><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
40
-
41
- <div class = ""><a href = "image/02.JPG"><img src = "image/02.JPG"></a></div>
42
-
43
- <div class = ""><a href = "image/03.JPG"><img src = "image/03.JPG"></a></div>
44
-
45
- <div class = ""><a href = "image/04.JPG"><img src = "image/04.JPG"></a></div>
46
-
47
- <div class = ""><a href = "image/05.JPG"><img src = "image/05.JPG"></a></div>
48
-
49
- </div>
50
-
51
-
52
-
53
- <p>４枚のとき</p>
54
-
55
- <div class = "grid-container">
56
-
57
- <div class = ""><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
58
-
59
- <div class = ""><a href = "image/02.JPG"><img src = "image/02.JPG"></a></div>
60
-
61
- <div class = ""><a href = "image/03.JPG"><img src = "image/03.JPG"></a></div>
62
-
63
- <div class = ""><a href = "image/04.JPG"><img src = "image/04.JPG"></a></div>
64
-
65
- </div>
66
-
67
- <p>３枚のとき</p>
68
-
69
- <div class = "grid-container">
70
-
71
- <div class = ""><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
72
-
73
- <div class = ""><a href = "image/02.JPG"><img src = "image/02.JPG"></a></div>
74
-
75
- <div class = ""><a href = "image/03.JPG"><img src = "image/03.JPG"></a></div>
76
-
77
- </div>
78
-
79
- <p>２枚のとき</p>
80
-
81
- <div class = "grid-container">
82
-
83
- <div class = ""><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
84
-
85
- <div class = ""><a href = "image/07.JPG"><img src = "image/07.JPG"></a></div>
86
-
87
- </div>
88
-
89
- <p>１枚のとき</p>
90
-
91
- <div class = "grid-container">
92
-
93
- <div class = ""><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
94
-
95
- </div>
96
-
97
-
98
-
99
- <p>6枚のとき</p>
100
-
101
- <div class = "grid-container" >
102
-
103
- <div class = ""><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
104
-
105
- <div class = ""><a href = "image/02.JPG"><img src = "image/02.JPG"></a></div>
106
-
107
- <div class = ""><a href = "image/03.JPG"><img src = "image/03.JPG"></a></div>
108
-
109
- <div class = ""><a href = "image/04.JPG"><img src = "image/04.JPG"></a></div>
110
-
111
- <div class = ""><a href = "image/05.JPG"><img src = "image/05.JPG"></a></div>
112
-
113
- <div class = ""><a href = "image/06.JPG"><img src = "image/06.JPG"></a></div>
114
-
115
- </div>
116
-
117
-
118
-
119
-
120
-
121
- <script src="photobox.js"></script>
122
-
123
- </body>
124
-
125
- </html>
126
-
127
-
128
-
129
- ```
130
-
131
- ```CSS
132
-
133
- .grid-container{
134
-
135
- display:grid;
136
-
137
- width: 600px;
138
-
139
- height: 600px;
140
-
141
- grid-template-rows: 300px 300px;
142
-
143
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
144
-
145
- }
146
-
147
-
148
-
149
- .grid-container img{
150
-
151
- object-fit: cover;
152
-
153
- width: 100%;
154
-
155
- height: 100%;
156
-
157
- }
158
-
159
-
160
-
161
- .item1{
162
-
163
- grid-column: 1 / 8;
164
-
165
- grid-row: 1 / 2;
166
-
167
-
168
-
169
- }
170
-
171
- .item2{
172
-
173
- grid-column: 8 / 16;
174
-
175
- grid-row: 1 / 2;
176
-
177
-
178
-
179
- }
180
-
181
- .item3{
182
-
183
- grid-column: 1 / 6;
184
-
185
- grid-row: 2 / 3;
186
-
187
- }
188
-
189
- .item4{
190
-
191
- grid-column: 6 / 11;
192
-
193
- grid-row: 2 / 3;
194
-
195
- }
196
-
197
- .item5{
198
-
199
- grid-column: 11 / 16;
200
-
201
- grid-row: 2 / 3;
202
-
203
- }
204
-
205
-
206
-
207
- .item6{
208
-
209
- grid-column: 1 / 8;
210
-
211
- grid-row: 2 / 3;
212
-
213
- }
214
-
215
-
216
-
217
- .item7{
218
-
219
- grid-column: 8 / 16;
220
-
221
- grid-row: 2 / 3;
222
-
223
- }
224
-
225
-
226
-
227
- .item8{
228
-
229
- grid-column: 1 / 16;
230
-
231
- grid-row: 2 / 3;
232
-
233
- }
234
-
235
-
236
-
237
- .item9{
238
-
239
- grid-column: 1 / 16;
240
-
241
- grid-row: 1 / 2;
242
-
243
- }
244
-
245
-
246
-
247
- .item10{
248
-
249
- grid-area: 1 / 1 / 3 / 16;
250
-
251
- }
252
-
253
-
254
-
255
- .item11{
256
-
257
- grid-column: 1 / 8;
258
-
259
- grid-row: 1 / 3;
260
-
261
- }
262
-
263
-
264
-
265
- .item12
266
-
267
- { grid-column: 8 / 16;
268
-
269
- grid-row: 1 / 3;
270
-
271
-
272
-
273
- }
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
-
284
-
285
- .none{
286
-
287
- display: none;
288
-
289
- }
290
-
291
- .grid-container a{
292
-
293
- cursor: auto;
294
-
295
- }
296
-
297
-
298
-
299
- .more p{
300
-
301
- font-size:2.5rem;
302
-
303
- display:block;
304
-
305
- position: relative;
306
-
307
- left: 55px;
308
-
309
- top: -200px;
310
-
311
- color: white;
312
-
313
- }
314
-
315
-
316
-
317
- .more{
318
-
319
- background-color: gray;
320
-
321
- }
322
-
323
- .more img{
324
-
325
- opacity: 0.6;
326
-
327
- display: block;
328
-
329
- }
330
-
331
- .more a{
332
-
333
- color: white;
334
-
335
- text-decoration: none;
336
-
337
- cursor: pointer;
338
-
339
- }
340
-
341
- .more a:hover{
342
-
343
- font-size:3rem;
344
-
345
- text-shadow: 2px 3px 4px #808080;
346
-
347
- }
348
-
349
-
350
-
351
- ```
352
-
353
- ```javascript
354
-
355
- document.querySelectorAll('.grid-container').forEach(container => {
356
-
357
- const children = container.querySelectorAll(':scope >div');
358
-
359
- if(children.length === 0) return;
360
-
361
- container.querySelectorAll(':scope >div').forEach((gridItem, index) => {
362
-
363
- switch(index) {
364
-
365
- case 0:
366
-
367
- gridItem.className = 'item1';
368
-
369
- if(children.length ===1) {gridItem.className = 'item10';}
370
-
371
- if(children.length === 2 && index === 0 && children[0].naturalWidth > children[0].naturalHeight)
372
-
373
- {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。
374
-
375
- if(children.length === 2 && index === 0 && children[0].naturalHeight > children[0].naturalWidth)
376
-
377
- {gridItem.className = 'item11';}　////縦長の写真の時は、item１１というクラスを追加する。
378
-
379
- break;
380
-
381
- case 1:
382
-
383
- gridItem.className = 'item2';
384
-
385
- if(children.length === 2 && index === 1 && children[1].naturalWidth > children[1].naturalHeight)
386
-
387
- {gridItem.className = 'item8';}
388
-
389
- else if(children.length === 2 && index === 1 && children[1].naturalHeight > children[1].naturalWidth)
390
-
391
- {gridItem.className = 'item12';}
392
-
393
- break;
394
-
395
- case 2:
396
-
397
- gridItem.className = `item${index+1}`;
398
-
399
- if(children.length === 3 && index === 2){gridItem.className = 'item8';}
400
-
401
- if(children.length === 4 && index === 2){gridItem.className = 'item6';}
402
-
403
- break;
404
-
405
- case 3:
406
-
407
- gridItem.className = `item${index+1}`;
408
-
409
- if(children.length === 4 && index === 3){gridItem.className = `item${index+4}`;}
410
-
411
- break;
412
-
413
- case 4:
414
-
415
- gridItem.className = `item${index+1}`;
416
-
417
- if(children.length === 5){gridItem.className = `item${index+1}`;}
418
-
419
-
420
-
421
- break;
422
-
423
-
424
-
425
- default:
426
-
427
- gridItem.className = 'none';
428
-
429
- children[4].classList.add('more');
430
-
431
- let text = `＋${children.length-5}`;
432
-
433
- children[4].insertAdjacentHTML('beforeend', `<p><a href = "">${text}</a></p>`);
434
-
435
- }
436
-
437
- });
438
-
439
- });
440
-
441
-
442
-
443
- ```
444
-
445
- ### 書いてみたがうまく表示されない部分
446
-
447
- ```javascript
448
-
449
- case 0:
450
-
451
- gridItem.className = 'item1';
452
-
453
- if(children.length ===1) {gridItem.className = 'item10';}
454
-
455
- if(children.length === 2 && index === 0 && children[0].clientWidth > children[0].clientHeight)
456
-
457
- {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。 →children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHeightに変えて試したのですが、思うようには行きませんでした。
458
-
459
- if(children.length === 2 && index === 0 && children[0].clientHeight > children[0].clientWidth)
460
-
461
- {gridItem.className = 'item11';}　////縦長の写真の時は、item１１というクラスを追加する。
462
-
463
- break;
464
-
465
- case 1:
466
-
467
- gridItem.className = 'item2';
468
-
469
- if(children.length === 2 && index === 1 && children[1].clientWidth > children[1].clientHeight)
470
-
471
- {gridItem.className = 'item8';}
472
-
473
- else if(children.length === 2 && index === 1 && children[1].clientHeight > children[1].clientWidth)
474
-
475
- {gridItem.className = 'item12';}
476
-
477
- break;
478
-
479
- ```
480
-
481
- ### 今の状態
482
-
483
- ![縦長の写真２まいなのですが、片方にクラスが渡っていないようです。](4b35304b0fd41e76472150b43f6414a3.png)
484
-
485
-
486
-
487
- お手数ですが、どなたか教えていただけないでしょうか。分かりにくい説明で申し訳ありません。
5
+ 質問の仕方に指摘がありましたので、適切な文章、コードに書き直しています。
488
-
489
- 何か他にやり方があるのでしょうか。教えてください。

5

修正

2020/05/21 14:46

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -368,9 +368,93 @@
368
368
 
369
369
  if(children.length ===1) {gridItem.className = 'item10';}
370
370
 
371
+ if(children.length === 2 && index === 0 && children[0].naturalWidth > children[0].naturalHeight)
372
+
373
+ {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。
374
+
375
+ if(children.length === 2 && index === 0 && children[0].naturalHeight > children[0].naturalWidth)
376
+
377
+ {gridItem.className = 'item11';}　////縦長の写真の時は、item１１というクラスを追加する。
378
+
379
+ break;
380
+
381
+ case 1:
382
+
383
+ gridItem.className = 'item2';
384
+
385
+ if(children.length === 2 && index === 1 && children[1].naturalWidth > children[1].naturalHeight)
386
+
387
+ {gridItem.className = 'item8';}
388
+
389
+ else if(children.length === 2 && index === 1 && children[1].naturalHeight > children[1].naturalWidth)
390
+
391
+ {gridItem.className = 'item12';}
392
+
393
+ break;
394
+
395
+ case 2:
396
+
397
+ gridItem.className = `item${index+1}`;
398
+
399
+ if(children.length === 3 && index === 2){gridItem.className = 'item8';}
400
+
401
+ if(children.length === 4 && index === 2){gridItem.className = 'item6';}
402
+
403
+ break;
404
+
405
+ case 3:
406
+
407
+ gridItem.className = `item${index+1}`;
408
+
409
+ if(children.length === 4 && index === 3){gridItem.className = `item${index+4}`;}
410
+
411
+ break;
412
+
413
+ case 4:
414
+
415
+ gridItem.className = `item${index+1}`;
416
+
417
+ if(children.length === 5){gridItem.className = `item${index+1}`;}
418
+
419
+
420
+
421
+ break;
422
+
423
+
424
+
425
+ default:
426
+
427
+ gridItem.className = 'none';
428
+
429
+ children[4].classList.add('more');
430
+
431
+ let text = `＋${children.length-5}`;
432
+
433
+ children[4].insertAdjacentHTML('beforeend', `<p><a href = "">${text}</a></p>`);
434
+
435
+ }
436
+
437
+ });
438
+
439
+ });
440
+
441
+
442
+
443
+ ```
444
+
445
+ ### 書いてみたがうまく表示されない部分
446
+
447
+ ```javascript
448
+
449
+ case 0:
450
+
451
+ gridItem.className = 'item1';
452
+
453
+ if(children.length ===1) {gridItem.className = 'item10';}
454
+
371
455
  if(children.length === 2 && index === 0 && children[0].clientWidth > children[0].clientHeight)
372
456
 
373
- {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。
457
+ {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。 →children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHeightに変えて試したのですが、思うようには行きませんでした。
374
458
 
375
459
  if(children.length === 2 && index === 0 && children[0].clientHeight > children[0].clientWidth)
376
460
 
@@ -392,92 +476,8 @@
392
476
 
393
477
  break;
394
478
 
395
- case 2:
396
-
397
- gridItem.className = `item${index+1}`;
398
-
399
- if(children.length === 3 && index === 2){gridItem.className = 'item8';}
400
-
401
- if(children.length === 4 && index === 2){gridItem.className = 'item6';}
402
-
403
- break;
404
-
405
- case 3:
406
-
407
- gridItem.className = `item${index+1}`;
408
-
409
- if(children.length === 4 && index === 3){gridItem.className = `item${index+4}`;}
410
-
411
- break;
412
-
413
- case 4:
414
-
415
- gridItem.className = `item${index+1}`;
416
-
417
- if(children.length === 5){gridItem.className = `item${index+1}`;}
418
-
419
-
420
-
421
- break;
422
-
423
-
424
-
425
- default:
426
-
427
- gridItem.className = 'none';
428
-
429
- children[4].classList.add('more');
430
-
431
- let text = `＋${children.length-5}`;
432
-
433
- children[4].insertAdjacentHTML('beforeend', `<p><a href = "">${text}</a></p>`);
434
-
435
- }
436
-
437
- });
438
-
439
- });
440
-
441
-
442
-
443
479
  ```
444
480
 
445
- ### 書いてみたがうまく表示されない部分
446
-
447
- ```javascript
448
-
449
- case 0:
450
-
451
- gridItem.className = 'item1';
452
-
453
- if(children.length ===1) {gridItem.className = 'item10';}
454
-
455
- if(children.length === 2 && index === 0 && children[0].clientWidth > children[0].clientHeight)
456
-
457
- {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。 →children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHeightに変えて試したのですが、思うようには行きませんでした。
458
-
459
- if(children.length === 2 && index === 0 && children[0].clientHeight > children[0].clientWidth)
460
-
461
- {gridItem.className = 'item11';}　////縦長の写真の時は、item１１というクラスを追加する。
462
-
463
- break;
464
-
465
- case 1:
466
-
467
- gridItem.className = 'item2';
468
-
469
- if(children.length === 2 && index === 1 && children[1].clientWidth > children[1].clientHeight)
470
-
471
- {gridItem.className = 'item8';}
472
-
473
- else if(children.length === 2 && index === 1 && children[1].clientHeight > children[1].clientWidth)
474
-
475
- {gridItem.className = 'item12';}
476
-
477
- break;
478
-
479
- ```
480
-
481
481
  ### 今の状態
482
482
 
483
483
  ![縦長の写真２まいなのですが、片方にクラスが渡っていないようです。](4b35304b0fd41e76472150b43f6414a3.png)
@@ -486,4 +486,4 @@
486
486
 
487
487
  お手数ですが、どなたか教えていただけないでしょうか。分かりにくい説明で申し訳ありません。
488
488
 
489
- naturalWidthやnaturalHeightでは動作しなかったのですが、(children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHeightに変えて試したのですが、思うようには行きませんでした。)何か他にやり方があるのでしょうか。教えてください。
489
+ 何か他にやり方があるのでしょうか。教えてください。

4

修正

2020/05/21 12:09

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -454,7 +454,7 @@
454
454
 
455
455
  if(children.length === 2 && index === 0 && children[0].clientWidth > children[0].clientHeight)
456
456
 
457
- {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。 →children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHightに変えて試したのですが、思うようには行きませんでした。
457
+ {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。 →children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHeightに変えて試したのですが、思うようには行きませんでした。
458
458
 
459
459
  if(children.length === 2 && index === 0 && children[0].clientHeight > children[0].clientWidth)
460
460
 
@@ -486,4 +486,4 @@
486
486
 
487
487
  お手数ですが、どなたか教えていただけないでしょうか。分かりにくい説明で申し訳ありません。
488
488
 
489
- naturalWidthやnaturalHeightでは動作しなかったのですが、(children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHightに変えて試したのですが、思うようには行きませんでした。)何か他にやり方があるのでしょうか。教えてください。
489
+ naturalWidthやnaturalHeightでは動作しなかったのですが、(children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHeightに変えて試したのですが、思うようには行きませんでした。)何か他にやり方があるのでしょうか。教えてください。

3

修正

2020/05/21 11:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -454,7 +454,7 @@
454
454
 
455
455
  if(children.length === 2 && index === 0 && children[0].clientWidth > children[0].clientHeight)
456
456
 
457
- {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。
457
+ {gridItem.className = 'item9';} //横長の写真の時は、item9というクラスを追加する。 →children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHightに変えて試したのですが、思うようには行きませんでした。
458
458
 
459
459
  if(children.length === 2 && index === 0 && children[0].clientHeight > children[0].clientWidth)
460
460
 
@@ -486,4 +486,4 @@
486
486
 
487
487
  お手数ですが、どなたか教えていただけないでしょうか。分かりにくい説明で申し訳ありません。
488
488
 
489
- naturalWidthやnaturalHeightでは動作しなかったのですが、何か他にやり方があるのでしょうか。教えてください。
489
+ naturalWidthやnaturalHeightでは動作しなかったのですが、(children[0].clientWidth/clientHeight)を.naturalWidth/.naturalHightに変えて試したのですが、思うようには行きませんでした。)何か他にやり方があるのでしょうか。教えてください。

2

追加

2020/05/21 11:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -486,4 +486,4 @@
486
486
 
487
487
  お手数ですが、どなたか教えていただけないでしょうか。分かりにくい説明で申し訳ありません。
488
488
 
489
- naturalWidthやnaturalHeightでは動作しなかったのですが、何か他にやり方があるのでしょうか。
489
+ naturalWidthやnaturalHeightでは動作しなかったのですが、何か他にやり方があるのでしょうか。教えてください。

1

追記

2020/05/21 08:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -485,3 +485,5 @@
485
485
 
486
486
 
487
487
  お手数ですが、どなたか教えていただけないでしょうか。分かりにくい説明で申し訳ありません。
488
+
489
+ naturalWidthやnaturalHeightでは動作しなかったのですが、何か他にやり方があるのでしょうか。