
Googleマップをレスポンシブ対応で埋め込む
2014年11月28日CSSテクニック
サイトに埋め込んだGoogleマップをレスポンシブ・ウェブデザインに対応させます。
HTML
<div id="container"> <div class="googlemaps"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3296692.8677216982!2d138.252924!3d36.204824!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34674e0fd77f192f%3A0xf54275d47c665244!2z5pel5pys!5e0!3m2!1sja!2sjp!4v1416214584505" width="600" height="450" frameborder="0" style="border:0"></iframe> </div> </div>
CSS
#container { max-width: 768px; margin: 0 auto; padding: 0 20px; } .googlemaps { overflow: hidden; position: relative; height: 0; padding-bottom: 75%; } .googlemaps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }