Googleマップの埋め込みタグの取得方法とレスポンシブ対応するためのCSS | HPcode（えいちぴーこーど）
Googleマップの埋め込みタグの取得 まずはGoogleマップの埋め込みタグを取得していきましょう。 Googleマップのページにアクセスしてください。 → Google マップ 新宿の紀伊国屋を例にコードを取得していこうと思います。 （住所：東京都新宿区新宿３丁目１７−７） 左上の検索エリアから「東京都新宿区新宿３丁目１７−７」を入力します。 検索結果が表示されて間違いなければ、「共有アイコン」をクリック。 ポップアップが開くので「地図を埋め込む」のタブを選択します。 「小」「中」「大」「カスタムサイズ」から「カスタムサイズ」を選択して、幅、高さをデザインカンプの値に合わせて変更させましょう！ iframeのHTMLタグがすぐ下にできあがっていると思うので、こちらをコピーしてHTMLファイルに貼り付けます。 今回だと以下のような埋込みタグが作られました。 <iframe src="ht
Googleマップをレンスポンシブに対応する方法
Googleマップを埋め込んだサイトはよく見かけますが、そのまま埋め込んだだけだとレスポンシブに対応できません。ですので今回は「Googleマップをレンスポンシブに対応させる方法」をやっていきたいと思います。 まずはGoogleマップを埋め込む ご存知方も多いと思いますが、まずはGoogleマップをサイトに埋め込みむ方法を確認しましょう。 Googleマップにアクセスします。 https://www.google.co.jp/maps/ 画面左にある検索ボックスで表示したい場所を検索します。今回は新宿駅にしました。 そして同じく左のメニューにある「共有」をクリックします。 するとこんな感じのポップアップが出てきますので、「地図を埋め込む」をクリックします。表示が変わりiframeのタグが出てきますので、コピーします。 iframeのサイズを大・中・小やカスタムサイズから選べますが、今回はサ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
