質問編集履歴
5
タイプミスを変更した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -400,7 +400,7 @@
|
|
|
400
400
|
|
|
401
401
|
とすることによって左右方向の中央揃えで配置できました。
|
|
402
402
|
|
|
403
|
-
上記leftの値の284pxというのは縮小前の大きさから縮小後の大きさを引いたものです。
|
|
403
|
+
上記leftの値の284pxというのは縮小前の大きさの半分から縮小後の大きさの半分を引いたものです。
|
|
404
404
|
|
|
405
405
|
上記margin-leftの値の378pxというのは縮小後の大きさです。
|
|
406
406
|
|
4
自己解決法を記述
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -383,3 +383,25 @@
|
|
|
383
383
|
なぜこの命令をしていたかというと、「transform: scale(0.4);」するにあたって発生する余白をなくすために「position:relative」の「left: calc((100% - 378px)/2);」の値を設定するときに、計算をわかりやすくするためです。transformもpositionも左上起点なら計算できるからです。
|
|
384
384
|
|
|
385
385
|
ラッパー要素を増やして、余白をなくせるか引き続きチャレンジしてみます。
|
|
386
|
+
|
|
387
|
+
|
|
388
|
+
|
|
389
|
+
|
|
390
|
+
|
|
391
|
+
ラッパー要素は不要でした。
|
|
392
|
+
|
|
393
|
+
縮小表示命令したセレクタに
|
|
394
|
+
|
|
395
|
+
left: calc( 284px * -1 );
|
|
396
|
+
|
|
397
|
+
とすることによって親要素の左端ぴったりに配置し、そのうえで
|
|
398
|
+
|
|
399
|
+
margin-left: calc((100% - 378px)/2);
|
|
400
|
+
|
|
401
|
+
とすることによって左右方向の中央揃えで配置できました。
|
|
402
|
+
|
|
403
|
+
上記leftの値の284pxというのは縮小前の大きさから縮小後の大きさを引いたものです。
|
|
404
|
+
|
|
405
|
+
上記margin-leftの値の378pxというのは縮小後の大きさです。
|
|
406
|
+
|
|
407
|
+
これによってズレも消し去り、余白も消し去り、当初抱えていた問題はなくなりました。
|
3
判明したことを追記した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -365,3 +365,21 @@
|
|
|
365
365
|
### 補足情報（FW/ツールのバージョンなど）
|
|
366
366
|
|
|
367
367
|
iPhone OS = 13.2
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
### 追記情報
|
|
374
|
+
|
|
375
|
+
Macのsafariでユーザーエージェントをiphoneしてレスポンシブモードを使ってもズレが再現することがわかりました。
|
|
376
|
+
|
|
377
|
+
スマホの時だけおかしいなら、スマホのメディアクエリがおかしいと思い、
|
|
378
|
+
|
|
379
|
+
スマホ時のメディアクエリ内に記述した、楽器のラッパー要素のセレクタ内の命令を検証ツールで一つ一つ無効にしてみました。
|
|
380
|
+
|
|
381
|
+
すると「transform-origin: top left;」が原因であることがわかりました。
|
|
382
|
+
|
|
383
|
+
なぜこの命令をしていたかというと、「transform: scale(0.4);」するにあたって発生する余白をなくすために「position:relative」の「left: calc((100% - 378px)/2);」の値を設定するときに、計算をわかりやすくするためです。transformもpositionも左上起点なら計算できるからです。
|
|
384
|
+
|
|
385
|
+
ラッパー要素を増やして、余白をなくせるか引き続きチャレンジしてみます。
|
2
説明を詳しくした
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
|
|
45
|
-
しかしiPhoneのsafariで開いてみるとずれていることが確認できます。
|
|
45
|
+
しかしiPhoneのsafariで開いてみると楽器が時計の針位置からずれていることが確認できます。
|
|
46
46
|
|
|
47
47
|
androidのchromeではずれていませんでした。
|
|
48
48
|
|
1
タイプミスを変更した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
|
|
217
217
|
transform-origin: top left;
|
|
218
218
|
|
|
219
|
-
transform: scale(0.4);/縮小表示*/
|
|
219
|
+
transform: scale(0.4);/*縮小表示*/
|
|
220
220
|
|
|
221
221
|
position: relative;
|
|
222
222
|
|
|
@@ -236,26 +236,30 @@
|
|
|
236
236
|
|
|
237
237
|
```javascript
|
|
238
238
|
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
var selector_name_instrument = '.instrument';
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
//楽器を初期位置に移動させる
|
|
246
|
+
|
|
247
|
+
clock6($(selector_name_instrument + '1'));
|
|
248
|
+
|
|
249
|
+
clock4($(selector_name_instrument + '2'));
|
|
250
|
+
|
|
251
|
+
clock2($(selector_name_instrument + '3'));
|
|
252
|
+
|
|
253
|
+
clock10($(selector_name_instrument + '4'));
|
|
254
|
+
|
|
255
|
+
clock8($(selector_name_instrument + '5'));
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
|
|
239
261
|
//clock直後の数字は時計の針の位置。その位置に移動させる命令。
|
|
240
262
|
|
|
241
|
-
var selector_name_instrument = '.instrument';
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
//楽器を初期位置に移動させる
|
|
246
|
-
|
|
247
|
-
clock6($(selector_name_instrument + '1'));
|
|
248
|
-
|
|
249
|
-
clock4($(selector_name_instrument + '2'));
|
|
250
|
-
|
|
251
|
-
clock2($(selector_name_instrument + '3'));
|
|
252
|
-
|
|
253
|
-
clock10($(selector_name_instrument + '4'));
|
|
254
|
-
|
|
255
|
-
clock8($(selector_name_instrument + '5'));
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
263
|
function clock6(selector) {
|
|
260
264
|
|
|
261
265
|
selector.css('z-index', '10');
|