都道府県別にクリックできる（リンクが張ってある）、日本地図です。この分野は、画像とクリッカブルマップで作っている事が多いのですが、レスポンシブではクリッカブルマップは使用し辛く、スマホサイズまで縮小すると、狭い県を押しづらいという一面があります。
そこで、HTMLとCSSだけで構成された日本地図を公開します。
HTML/CSSを使っている人がソースをみたら、簡単に理解して改変したりできると思います。
商用利用・再配布可、無料でご使用頂けます。
HTML内では、各都道府県にリンクを張れるよう、a タグがセットされています。ご自由に改変してお使い下さい。
- 誤字を修正しました。×静岡県 → 〇静岡（2021/08/12）
- 誤字を修正しました。×高地 → 〇高知（2021/08/05）
- iOS でレスポンシブが正しく動作しない不具合が報告されたため、ダウンロードデータと、デモページのHTMLを更新しました。現在公開しているデータは対処済みのデータです。（2021/07/30）
ダウンロードは以下のボタンで可能です。各ファイルは intego VirusBarrier で検査済みです。安心してご利用下さい。
“HTML/CSS-レスポンシブ＋クリック対応の日本地図” をダウンロード japan_responsive_map.zip – 2920 回のダウンロード – 3.60 KBVisited 2,293 times, 1 visit(s) today
とても良い 素材ありがとうございます。
利用させていただきます。
デザインもよく利用させていただいております。
当方のテンプレート内で使用したところ、本体のCSSが邪魔して、
幅の狭い地区内の文字が縦書きになってしまいます。
余白が邪魔しているだと思われますが、
個別に地図内の余白を調整するにはCSSのどの部分を調整したらよいでしょうか？
「幅の狭い地区」というのは、おそらく奈良県・三重県の事と思います。
ただ、どの県でも余白（padding）はございませんので、
文字を1pxサイズを小さくしたり字間を詰め（後述）、もしくは縦書きのままご利用なさるなどして頂ければと思います。
各県には、HTML上でIDに県名を付与していますので、
奈良県の場合は
#japan-map #nara {font-size: 13px; letter-spacing: -1px;}
とCSSに加えるなどして、文字を1px小さく＆字間を1px詰めるなどしてはいかがでしょう。
ありがとうございます！
感謝感激です！
すごく綺麗なデザインで感動しております。
本当にありがとうございます。
一点質問させていただきたいのですが、ダウンロードさせていただいたHTML（CSS）を実行したところ、iPhoneやiPadの画面にてレスポンシブ対応が反映されないのですが、どこかいじる必要があるのでしょうか。
デフォルトでaタグまで設定いただいていて、本当にありがたく、より綺麗に使用させていただきたくご質問させていただきました。
大変恐縮ではございますが、ご回答いただければ幸いです。
ご指摘の件ですが、
の中に次の一文を入れるのを忘れておりました。
これを
の中に追加する事で、iOS でも正しくレスポンシブされます。
ダウンロードデータは先ほど更新しました。再ダウンロードして頂けましたら、iOS でも動作いたします。
どうぞよろしくご確認下さい。
高地⇒高知
ああ、お恥ずかしい。更新してアップし直します。ご指摘ありがとうございました。
はじめまして。
リアルな地図よりも親しみやすいデザインなので、
ブログで利用させていただこうかと検討しております。
しかし、なぜか画像のように文字が上にズレてしまいます。
https://drive.google.com/file/d/1LfDQogUbdu6J1-wJj9OHANiyjpJpw6ub/view
text-align: center;
の下に
vertical-align: middle;
を追加するなど試行錯誤したのですが、どうも反応しません。
使っているテーマとの相性なのでしょうか、、
もしよろしければ、アドバイスを頂けると幸いです。
大変お手数ですが、
よろしくお願い申し上げます。
また蛇足ながら
静岡県 ✕
静岡 ○
せっかく発見したので、一応ご報告致します。
よろしくお願い致します。
度々、ご指摘ありがとうございます！
先ほど、ダウンロードデータ等を更新しました。
素晴らしいデータのご提供、ありがとうございます。
超々初心者なので、使い方が全くわかりません。
このデータはワードプレスで使えるのでしょうか？
追加CSSに貼り付けることはできたのですが、ｈｔｍｌが呼び出せません。
３時間ぐらいググっても解決できないので、ワードプレスでの使い方を教えていただけると大変ありがたいです。
ワードプレスで固定ページや投稿ページに使いたい場合は（CSSの追加ができているのでしたら）、japan_map.html の12行目、
から、291行目の
までを、「カスタムHTML」ブロックで埋めこんで頂きましたら、つかえると思います。
よろしくお試し下さい。
できました！！
ありがとうございます！
htmlは、「ページのソースの表示」でソースをコピーするんですね。
基本の「キ」なのかもしれませんが、ド素人には大変勉強になりました。
本当にありがとうございました！
日本地図素材を探していまして辿り着きました。
とても素晴らしいです。
公開ありがとうございます！
使用させていただきます。
日本地図素材を探していて辿り着きました。
とても素晴らしいです！
公開ありがとうございます。
使用させていただきます。
素敵なデザインの公開をありがとうございます。
素晴らしいものを無料で提供していただきありがとうございます。めちゃくちゃ助かりました