Google Maps をレスポンシブサイトに埋め込むには

Google Maps をレスポンシブに変更する簡単なコードです。(^_^)

HTML

<div class="ggmap">googlemapsのiframeコード</div>

CSS

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

投稿者: Bob

大阪市西成区玉出にて1998年以来20年間に渡りパソコン教室を運営しています。

コメントを残す