HTML/CSS のみで作った、レスポンシブ+クリック対応の日本地図(フリー素材)

都道府県別にクリックできる(リンクが張ってある)、日本地図です。この分野は、画像とクリッカブルマップで作っている事が多いのですが、レスポンシブではクリッカブルマップは使用し辛く、スマホサイズまで縮小すると、狭い県を押しづらいという一面があります。

そこで、HTMLとCSSだけで構成された日本地図を公開します。

横幅777pxまでは、日本列島を表示します。
小型タブレットなど、501px〜776px までは地域別にまとまります。
小型タブレットなど、501px〜776px までは地域別にまとまります。
スマートフォンでは、リスト表示に切り替わります。

HTML/CSSを使っている人がソースをみたら、簡単に理解して改変したりできると思います。

商用利用・再配布可、無料でご使用頂けます。

HTML内では、各都道府県にリンクを張れるよう、a タグがセットされています。ご自由に改変してお使い下さい。

>> デモはこちからご覧頂けます

● 誤字を修正しました。×静岡県 → 〇静岡(2021/08/12)
● 誤字を修正しました。×高地 → 〇高知(2021/08/05)
● iOS でレスポンシブが正しく動作しない不具合が報告されたため、ダウンロードデータと、デモページのHTMLを更新しました。現在公開しているデータは対処済みのデータです。(2021/07/30)

ダウンロードは以下のボタンで可能です。各ファイルは intego VirusBarrier で検査済みです。安心してご利用下さい。

こちらからダウンロード

コメントを残す

メールアドレスが公開されることはありません。