皆さんお疲れ様です。よんです。
新しいGoogleマップがレスポンシブ対応になったということでちょっと試してみました。
Googleマップはホームページ制作とは切っても切れない関係、と言ってもよいほどによく活用されるコンテンツです。弊社でもアクセスページや会社概要などには必ず使用しています。
ちなみに「レスポンシブ対応」って何？という方がいらっしゃると思いますが、簡単に言うとコンテンツが画面サイズに最適化されることを言います。この亀の日常茶飯事ブログもレスポンシブ対応になっています。試しにブラウザのウィンドウ幅のサイズを小さくしてみて下さい。
どうですか？サイズを縮小するにつれて表示されるコンテンツが縮小、もしくはレイアウトが変わりませんか？これがレスポンシブ、つまり画面サイズに最適化されるということです。なぜこういう作りが必要かというと、スマートフォンやタブレットなどで見た際に見やすくするためということですね。
下のマップも画面サイズが変わるに連れてしっかり縮小されていると思います。
Googleマップがレスポンシブ対応
この方法は以下のライフハッカーさんのサイトを参考にさせていただきました。
Lifehacker
新しいGoogleマップをレスポンシブ対応で埋め込む方法
ライフハッカーさんのサイトにもある通り、そのままコードを貼付けるだけではダメなようで、CSSをあててやらなければいけませんが、マップサイズもウィンドウ幅に合うように縮小されるので、より使いやすくなったように思います。
これからガシガシ使っていきますよ。
コメント