質問編集履歴
5
タイプミスを変更した
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -199,6 +199,6 @@
|
|
|
199
199
|
とすることによって親要素の左端ぴったりに配置し、そのうえで
|
|
200
200
|
margin-left: calc((100% - 378px)/2);
|
|
201
201
|
とすることによって左右方向の中央揃えで配置できました。
|
|
202
|
-
上記leftの値の284pxというのは縮小前の大きさから縮小後の大きさを引いたものです。
|
|
202
|
+
上記leftの値の284pxというのは縮小前の大きさの半分から縮小後の大きさの半分を引いたものです。
|
|
203
203
|
上記margin-leftの値の378pxというのは縮小後の大きさです。
|
|
204
204
|
これによってズレも消し去り、余白も消し去り、当初抱えていた問題はなくなりました。
|
4
自己解決法を記述
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -190,4 +190,15 @@
|
|
|
190
190
|
スマホ時のメディアクエリ内に記述した、楽器のラッパー要素のセレクタ内の命令を検証ツールで一つ一つ無効にしてみました。
|
|
191
191
|
すると「transform-origin: top left;」が原因であることがわかりました。
|
|
192
192
|
なぜこの命令をしていたかというと、「transform: scale(0.4);」するにあたって発生する余白をなくすために「position:relative」の「left: calc((100% - 378px)/2);」の値を設定するときに、計算をわかりやすくするためです。transformもpositionも左上起点なら計算できるからです。
|
|
193
|
-
ラッパー要素を増やして、余白をなくせるか引き続きチャレンジしてみます。
|
|
193
|
+
ラッパー要素を増やして、余白をなくせるか引き続きチャレンジしてみます。
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
ラッパー要素は不要でした。
|
|
197
|
+
縮小表示命令したセレクタに
|
|
198
|
+
left: calc( 284px * -1 );
|
|
199
|
+
とすることによって親要素の左端ぴったりに配置し、そのうえで
|
|
200
|
+
margin-left: calc((100% - 378px)/2);
|
|
201
|
+
とすることによって左右方向の中央揃えで配置できました。
|
|
202
|
+
上記leftの値の284pxというのは縮小前の大きさから縮小後の大きさを引いたものです。
|
|
203
|
+
上記margin-leftの値の378pxというのは縮小後の大きさです。
|
|
204
|
+
これによってズレも消し去り、余白も消し去り、当初抱えていた問題はなくなりました。
|
3
判明したことを追記した
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -181,4 +181,13 @@
|
|
|
181
181
|
行き詰まっています。。。。
|
|
182
182
|
|
|
183
183
|
### 補足情報（FW/ツールのバージョンなど）
|
|
184
|
-
iPhone OS = 13.2
|
|
184
|
+
iPhone OS = 13.2
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
### 追記情報
|
|
188
|
+
Macのsafariでユーザーエージェントをiphoneしてレスポンシブモードを使ってもズレが再現することがわかりました。
|
|
189
|
+
スマホの時だけおかしいなら、スマホのメディアクエリがおかしいと思い、
|
|
190
|
+
スマホ時のメディアクエリ内に記述した、楽器のラッパー要素のセレクタ内の命令を検証ツールで一つ一つ無効にしてみました。
|
|
191
|
+
すると「transform-origin: top left;」が原因であることがわかりました。
|
|
192
|
+
なぜこの命令をしていたかというと、「transform: scale(0.4);」するにあたって発生する余白をなくすために「position:relative」の「left: calc((100% - 378px)/2);」の値を設定するときに、計算をわかりやすくするためです。transformもpositionも左上起点なら計算できるからです。
|
|
193
|
+
ラッパー要素を増やして、余白をなくせるか引き続きチャレンジしてみます。
|
2
説明を詳しくした
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
http://iroha123.starfree.jp/musicvenue/
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
しかしiPhoneのsafariで開いてみるとずれていることが確認できます。
|
|
23
|
+
しかしiPhoneのsafariで開いてみると楽器が時計の針位置からずれていることが確認できます。
|
|
24
24
|
androidのchromeではずれていませんでした。
|
|
25
25
|
|
|
26
26
|
|
1
タイプミスを変更した
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
height: 421px;/*←PCの時の表示領域と等しい*/
|
|
108
108
|
width: 946px;/*←PCの時の表示領域と等しい*/
|
|
109
109
|
transform-origin: top left;
|
|
110
|
-
transform: scale(0.4);/縮小表示*/
|
|
110
|
+
transform: scale(0.4);/*縮小表示*/
|
|
111
111
|
position: relative;
|
|
112
112
|
top: -22px;
|
|
113
113
|
left: calc((100% - 378px)/2);
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
|
|
118
118
|
|
|
119
119
|
```javascript
|
|
120
|
-
|
|
120
|
+
|
|
121
121
|
var selector_name_instrument = '.instrument';
|
|
122
122
|
|
|
123
123
|
//楽器を初期位置に移動させる
|
|
@@ -127,6 +127,8 @@
|
|
|
127
127
|
clock10($(selector_name_instrument + '4'));
|
|
128
128
|
clock8($(selector_name_instrument + '5'));
|
|
129
129
|
|
|
130
|
+
|
|
131
|
+
//clock直後の数字は時計の針の位置。その位置に移動させる命令。
|
|
130
132
|
function clock6(selector) {
|
|
131
133
|
selector.css('z-index', '10');
|
|
132
134
|
selector.css('transform', 'translate3d(0, 0, -147px)');
|