NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

Googleマップをレスポンシブ対応で埋め込む

2014年11月28日CSSテクニック

Googleマップをレスポンシブ対応で埋め込む

サイトに埋め込んだ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;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. Googleマップをレスポンシブ対応で埋め込む

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com