Google Mapのレスポンシブウェブデザイン対策

学びカテゴリーの変更を依頼記事元:

detarame.moo.jp

8 usersがブックマークコメント

記事へのコメント2件

注目コメント
新着コメント

aoiasaba ★

2014/02/11 リンク

crealive これはtanzaku的なレスポンシブルに有効か！

2013/09/05 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fdetarame.moo.jp%2F2013%2F03%2F27%2Fgoogle-map%25E3%2581%25AE%25E3%2583%25AC%25E3%2582%25B9%25E3%2583%259D%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%2596-%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596-%25E3%2583%2587%25E3%2582%25B6%25E3%2582%25A4%25E3%2583%25B3%25E5%25AF%25BE%25E7%25AD%2596%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://detarame.moo.jp/2013/03/27/google-map%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96-%E3%82%A6%E3%82%A7%E3%83%96-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%AF%BE%E7%AD%96/">Google Mapのレスポンシブ ウェブ デザイン対策</a><a href="https://b.hatena.ne.jp/entry/detarame.moo.jp/2013/03/27/google-map%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96-%E3%82%A6%E3%82%A7%E3%83%96-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%AF%BE%E7%AD%96/">はてなブックマーク - Google Mapのレスポンシブ ウェブ デザイン対策</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

Google Mapのレスポンシブウェブデザイン対策

Googleではレスポンシブウェブデザインの推奨していますので、Google Mapも画面サイズ（PC Tablet sma... Googleではレスポンシブウェブデザインの推奨していますので、Google Mapも画面サイズ（PC Tablet smartphone)によって表示サイズが変わると便利だと思います。そこで今回はGoogle Mapのレスポンシブウェブデザイン対策を紹介します。対策はとっても簡単で単純なことです。 Google Mapよりウェブサイトへの地図埋め込み用 HTML コードを取得すると<iframe width=”425″ height=”350″ frameborder=”0″・・・みたいなコードを取得することが出来ます。この取得したコードのwidth=”425″をwidth=”100%”に書き換えるでけです。これでGoogle Mapが画面サイズ（PC Tablet smartphone)によって表示サイズが変わります。次はアメブロの記事のサイズに合わせてGoogle Ma