2016年04月06日
GoogleMapをレスポンシブデザインに貼付けたい
只今、レスポンシブサイト作成中です。
スマホやタブレットでWebサイトを見る人が増えているのでレスポンシブサイトは人気のようです。
GoogleMapはどうしようかと検索してみたらもちろんありました。
【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法
・+・+・ メモ ・+・+・
Googleサイトにて → 地図を埋め込む
HTML
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%;
}
これで出来ました。
ありがとうございます。
スマホやタブレットでWebサイトを見る人が増えているのでレスポンシブサイトは人気のようです。
GoogleMapはどうしようかと検索してみたらもちろんありました。
【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法
・+・+・ メモ ・+・+・
Googleサイトにて → 地図を埋め込む
HTML
iframeのコピーしたコード
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%;
}
これで出来ました。
ありがとうございます。
【Web開発の最新記事】
この記事へのコメント