回答編集履歴

2

サンプル追加

2020/01/21 14:53

投稿

hatena19
hatena19

スコア33620

test CHANGED
@@ -29,3 +29,15 @@
29
29
 
30
30
 
31
31
  地図画像を`.mapLink`に設定するか、ボタンの座標基準を`#mapBox`にするか、どちかに統一する必要があります。どちらにしても、ボタンの位置指定、画像の位置指定、各要素のmargin, padding をすべて一から調整しなおす必要がありますね。頑張ってください。
32
+
33
+
34
+
35
+ サンプル作ってみた
36
+
37
+ ---
38
+
39
+ レスポンシプ対応世界地図画像の上にボタン配置
40
+
41
+
42
+
43
+ [Codepenサンプル](https://codepen.io/hatena19/pen/vYEvKgo)

1

説明追記

2020/01/21 14:53

投稿

hatena19
hatena19

スコア33620

test CHANGED
@@ -13,3 +13,19 @@
13
13
  となっていますので、
14
14
 
15
15
  メディアクエリで画面幅937px以下は、ボタンの位置を vw単位で設定するようにしましょう。
16
+
17
+
18
+
19
+ 追記
20
+
21
+ ---
22
+
23
+ 上記でいけると思ったがHTMLとCSSをよく見てみると、そんなに単純ではないですね。
24
+
25
+
26
+
27
+ 背景の地図画像は、`#mapBox` に設定してあるのに、ボタンの座標基準は、`.mapLink`になっているので位置をずれないようにするのは難しい。
28
+
29
+
30
+
31
+ 地図画像を`.mapLink`に設定するか、ボタンの座標基準を`#mapBox`にするか、どちかに統一する必要があります。どちらにしても、ボタンの位置指定、画像の位置指定、各要素のmargin, padding をすべて一から調整しなおす必要がありますね。頑張ってください。