teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

サンプル追加

2020/01/21 14:53

投稿

hatena19
hatena19

スコア34367

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

説明追記

2020/01/21 14:53

投稿

hatena19
hatena19

スコア34367

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 をすべて一から調整しなおす必要がありますね。頑張ってください。