こんにちは、MIO webデザインです。 先日「イメージマップは実際の画像サイズじゃないと使えないのですか？」と訊かれました。スマホなどで閲覧すると画面幅が小さくなるので、当然画像サイズは変わってしまいます。 しかし、area要素のサイズは変わらず、ブラウザを拡大縮小するとイメージマップが崩れてしまう、という事態になってしまいます。 そこで今回はイメージマップを各デバイスでも正常に表示されるよう、レスポンシブ対応させてみたいと思います。 イメージマップの作り方のおさらい まずはイメージマップを準備しないといけませんね。 イメージマップは『HTML Imagemap Generator』さんを使えば簡単に作成できます。 作成手順は過去記事『HTML Imagemap Generatorを使って簡単にイメージマップを作成する方法』を参考にしてください！ 今回はこのようなイメージマップを用意しま

Googleマップからコードを取得してサイトに埋め込もうとしたのですが、以前とコードの内容が変わっていてどこを変更すれば縮尺が変わるのか皆目見当がつかず…。 と困っていましたが、現在は簡単に縮尺変更ができるようになりました。やっとページの更新ができて一安心です。（2018年3月22日 更新） 以前は&z=17など、「&z」を頼りに縮尺を変更していたのですが、Googleマップ上で縮尺変更してからコードを取得しても反映されず困っていました。しかし！偉大な先人がいらっしゃって無事解決できました。 縮尺変更だけではなんなので、レスポンシブ対応の方法も一緒にメモします。 目次 グーグルマップの縮尺を変更したいグーグルマップをレスポンシブ対応にしたい グーグルマップの縮尺を変更したい 今回は群馬県庁を例にして進めたいと思います。 記事の公開当時（2015年12月11日）はソースの中の数字を変更しない