芝生の手入れ芝生の道具マイホームブログトップマイホームブログWebGoogleマップのiframeをレスポンシブWebデザインで埋め込む方法GoogleマップのiframeをレスポンシブWebデザインで埋め込む方法Web2016年10月17日GoogleマップのWebサイトへのiframe埋め込みは、発行されるソースコードそのままだとスマートフォンなどでスクリーンの横に飛び出してしまいますが、ちょっとしたcssの工夫でスクリーン幅に応じたサイズで表示、すなわちレスポンシブWebデザインにすることが可能です。本記事ではGoogleマップのiframeをレスポンシブWebデザインにする方法をご紹介いたします。height:100%;}使い方1Googleマップでiframeの埋め込みコードを取得まず、Googleマップで表示したい地図の画面へ移動し、[共有]をクリックします。次に、[地図を埋め込む]のタブをクリックすると、iframe埋め込み用のソースコードが表示されます。size-○○p">~</div>で括ります。2サイトデザインに応じて横幅と縦幅を記述サイトのデザインやテーマに応じて、iframeの大きさを決めます。埋め込んだiframeソースコードのwidthとheightの値を設定してください。縦横比に応じてpadding-bottomの値が変わります。widthの値が660でheightの値が450の場合、450÷660×100は68.1となるため、cssは以下のように記述します。.google-map.size-68p{padding-bottom:68.1%;//縦幅÷横幅×100の値を記述}4記述したcssのセレクタに応じて、htmlのclass名を記述します。size-68p">※地図に応じて縦横比を変えたい場合は、その分cssを追加すれば様々なサイズに対応可能まとめ本記事の対応を行うことでスマートデバイスのユーザーにも適したサイズでのGoogleマップの表示が可能となります。ご紹介したサンプルコードは、ある程度サイトのデザインやテーマ問わず使えますので、レスポンシブWebデザインを採用しているサイトであればぜひご活用いただければ幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。