Blog

ブログ

Bing Mapを​レスポンシブ化​対応するには

  • レスポンシブWebデザイン
  • 記事公開日:
Bing Mapをレスポンシブ化対応するには

Bing Mapをレスポンシブ化対応する…という、需要がなさそうなお話です。
(ネタはあるけど出せないものが多い。。。というだけです。)

Bing Mapの作り方

Bing Mapを作るときには、アカバスさんの「Bing Maps 簡単組み込み」を使うと、比較的簡単にできます。

まず、「基本設定」で地図のサイズを指定します。
次に。「プッシュピン」で地図上にピンを配置します。

あとは、「コード生成」でコードを作成して、HTMLに組み込みすれば完成です。

Bing Mapのレスポンシブ化

Bing Mapをレスポンシブ化するには、ここから一工夫が必要です。

コードからwidthを削除して、「max-width:100%」を追加指定します。

これでレスポンシブなBing Mapが完成です。
ただ、注意すべき点は、「最初に指定した画像サイズ以上にならない」ということです。

このページを共有

関連記事

この記事を読んだ人はこの記事も読んでいます

  1. レスポンシブWebデザインは、なぜ「戸惑う」・「難しい」と思う人が多いのか
    レスポンシブWebデザインは、なぜ「戸惑う」・「難しい」と思う人が多いのか
  2. 「remを利用したスケーラブルなレスポンシブWebデザイン」・「日本語Webフォント」などを採用してサイトをリニューアルしました
    「remを利用したスケーラブルなレスポンシブWebデザイン」・「日本語Webフォント」などを採用してサイトをリニューアルしました
  3. 1行で使える、レスポンシブWebデザインで使える改行テクニック
    1行で使える、レスポンシブWebデザインで使える改行テクニック
ページの上部に戻る