2019年2月3日ツイートシェアB!はてブポケットLP案件のコーディングを行っていると、GoogleマップやYoutubeを埋め込む機会がめちゃくちゃ多いです。一度やりかたを覚えてしまえば問題ないですが、最初は戸惑いました。Googleマップってそもそも埋め込みタグどこから取得するの?埋め込んだはいいものの画面サイズ小さくするとはみ出るんだけどはみ出なくなったけど、縦横比が保てないこの辺りの、最初のころに出くわす戸惑いを解消すべく、1からGoogleマップを読み込む手順を紹介していきます!レンダリング速度の関係でガタガタしてますが、こんな感じで縦横比を維持したままのマップが作れるようになるはずです。おわりGoogleマップの埋め込みタグの取得まずはGoogleマップの埋め込みタグを取得していきましょう。Googleマップのページにアクセスしてください。マップ新宿の紀伊国屋を例にコードを取得していこうと思います。3丁目17−7」を入力します。検索結果が表示されて間違いなければ、「共有アイコン」をクリック。カスタムサイズ」から「カスタムサイズ」を選択して、幅、高さをデザインカンプの値に合わせて変更させましょう!iframeのHTMLタグがすぐ下にできあがっていると思うので、こちらをコピーしてHTMLファイルに貼り付けます。今回だと以下のような埋込みタグが作られました。allowfullscreen></iframe>幅がwidth="800"で、高さがheight="600"と指定されています。幅が800以下になると、この埋込み要素ははみ出てしまうので、CSSで修正していきましょう。埋め込み要素を縦横比を保ったままレスポンシブ対応レスポンシブサイトでめちゃくちゃ使う書き方なので、ぜひ覚えてほしいと思います。Googleマップに限らず、iframe系は全部この考え方でレスポンシブ対応させることが可能です。埋め込み要素を囲う要素を用意iframeだけで対応させることは難しくて、親に要素を追加することで実現できようになります。allowfullscreen></iframe></div>.iframe-wrapのクラス名は、内包する埋め込み要素の種類に応じて変更してください。縦横比を維持したCSS幅とか高さは、先ほど追加した親要素に持たせる形で、iframeの埋め込み部分は「親要素に応じて変更する」みたいな書き方です。100」で算出された値を指定する必要があります。ここの値によって縦横比が決まるので埋め込み要素で指定した高さと幅によって指定が変わってきます。今回のケースだと、幅がwidth="800"で、高さがheight="600"です。75ということで、75%が指定されているということになります。リンク(おまけ)Youtubeの埋め込みも全く同じGoogleマップということで紹介しましたが、Youtubeでも今紹介したHTMLとCSSの書き方で同様にレスポンシブ対応できます。Youtubeは、Goodボタンなどの横にある「共有」ボタンから取得できます。@haniwa008Googleマップの埋め込みタグの取得方法とレスポンシブ対応するためのCSSの紹介でした。コーディングの案件で必ず1つは登場するものなので、コーダーの方は確実に抑えておきましょう!一度やり方を覚えたら2回目以降は余裕なはずです。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。前の記事ドロワーやモーダルをCSSだけで実現する方法はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。