回答編集履歴
2
サンプル追加
answer
CHANGED
|
@@ -13,4 +13,10 @@
|
|
|
13
13
|
|
|
14
14
|
背景の地図画像は、`#mapBox` に設定してあるのに、ボタンの座標基準は、`.mapLink`になっているので位置をずれないようにするのは難しい。
|
|
15
15
|
|
|
16
|
-
地図画像を`.mapLink`に設定するか、ボタンの座標基準を`#mapBox`にするか、どちかに統一する必要があります。どちらにしても、ボタンの位置指定、画像の位置指定、各要素のmargin, padding をすべて一から調整しなおす必要がありますね。頑張ってください。
|
|
16
|
+
地図画像を`.mapLink`に設定するか、ボタンの座標基準を`#mapBox`にするか、どちかに統一する必要があります。どちらにしても、ボタンの位置指定、画像の位置指定、各要素のmargin, padding をすべて一から調整しなおす必要がありますね。頑張ってください。
|
|
17
|
+
|
|
18
|
+
サンプル作ってみた
|
|
19
|
+
---
|
|
20
|
+
レスポンシプ対応世界地図画像の上にボタン配置
|
|
21
|
+
|
|
22
|
+
[Codepenサンプル](https://codepen.io/hatena19/pen/vYEvKgo)
|
1
説明追記
answer
CHANGED
|
@@ -5,4 +5,12 @@
|
|
|
5
5
|
以下略
|
|
6
6
|
```
|
|
7
7
|
となっていますので、
|
|
8
|
-
メディアクエリで画面幅937px以下は、ボタンの位置を vw単位で設定するようにしましょう。
|
|
8
|
+
メディアクエリで画面幅937px以下は、ボタンの位置を vw単位で設定するようにしましょう。
|
|
9
|
+
|
|
10
|
+
追記
|
|
11
|
+
---
|
|
12
|
+
上記でいけると思ったがHTMLとCSSをよく見てみると、そんなに単純ではないですね。
|
|
13
|
+
|
|
14
|
+
背景の地図画像は、`#mapBox` に設定してあるのに、ボタンの座標基準は、`.mapLink`になっているので位置をずれないようにするのは難しい。
|
|
15
|
+
|
|
16
|
+
地図画像を`.mapLink`に設定するか、ボタンの座標基準を`#mapBox`にするか、どちかに統一する必要があります。どちらにしても、ボタンの位置指定、画像の位置指定、各要素のmargin, padding をすべて一から調整しなおす必要がありますね。頑張ってください。
|