質問: text-align: center; padding: 35px 0 80px; } .mapLink { position: relative; height: 420px; width: 100% !important; max-width: 937px; } .mapLink li{ position: absolute; list-style-type: none; line-height: 1.2; } .mapLink li a{ font-size: 14px; font-weight: bold; background-color: #fff; border: 2px solid #356b41; border-radius: 20px; display: inline-block; padding: 8px 20px 8px 15px; text-decoration: none; color: #333; position: relative; } .mapLink li a.line2{ border-radius: 28px; padding: 8px 20px 8px 35px; } .mapLink li a::before{ content: ""; display: inline-block; background-color: #376a41; border-radius: 15px; width: 15px; height: 15px; vertical-align: middle; margin: 0 10px 0 0; } .mapLink li a.line2:before{ position:absolute; top:18px; left:13px; } .mapLink li a::after{ content: ""; position: absolute; top: 50%; left: 21px; width: 4px; height: 4px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg) translate(-50%,0); } .mapLink li a.line2:after{ top:24px; left:19px; } .mapLink li a:hover:before{ background-color: #fff; } .mapLink li a:hover:after{ border-top: 2px solid #376a41; border-right: 2px solid #376a41; } .mapLink li a:hover{ background-color: #376a41; color: #fff; } .mapLink li.EUR{ top: 0px; left: 100px; } .mapLink li.ASI{ top: 80px; left: 250px; } .mapLink li.MED{ top: 140px; left: 100px; } .mapLink li.ARA{ top: 210px; left: 180px; } .mapLink li.JPN{ top: 110px; left: 420px; } .mapLink li.HWI{ top: 160px; left: 510px; } .mapLink li.OCE{ top: 290px; left: 400px; } .mapLink li.USA{ top: 50px; left: 640px; } .mapLink li.SAM{ top: 180px; left: 770px; } .mapLink li.ATA{ top: 360px; left: 580px; } .mapLink li.ARC{ top: -50px; left: 466px; } .btnArea{ display: flex; justify-content: center; margin: 0 auto; padding-bottom: 40px; } .btnArea p{ margin: 0 20px; } ### 試したこと 地図の背景画像は、 background-size;contain;でレスポンシブ対応にして、 position:relative;にしました。 これでリンクボタンのabsoluteも比率を保ったまま縮小されるかと 思いましたがだめでした。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: ``` #mapBox{ width: 100%; max-width: 937px; 以下略 ``` となっていますので、 メディアクエリで画面幅937px以下は、ボタンの位置を vw単位で設定するようにしましょう。 追記 上記でいけると思ったがHTMLとCSSをよく見てみると、そんなに単純ではないですね。 背景の地図画像は、`#mapBox` に設定してあるのに、ボタンの座標基準は、`.mapLink`になっているので位置をずれないようにするのは難しい。 地図画像を`.mapLink`に設定するか、ボタンの座標基準を`#mapBox`にするか、どちかに統一する必要があります。どちらにしても、ボタンの位置指定、画像の位置指定、各要素のmargin, padding をすべて一から調整しなおす必要がありますね。頑張ってください。 サンプル作ってみた レスポンシプ対応世界地図画像の上にボタン配置 Codepenサンプル