素材

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 で検査済みです。安心してご利用下さい。

こちらからダウンロード

Visited 131 times, 1 visit(s) today

TOAST 18 が起動しない場合の対処方(結果コード= -35)前のページ

第七回文学フリマ福岡次のページ

コメント

    • sky
    • 2020年 12月 19日 7:19pm

    とても良い 素材ありがとうございます。
    利用させていただきます。

    • マミー
    • 2020年 12月 20日 12:30pm

    デザインもよく利用させていただいております。
    当方のテンプレート内で使用したところ、本体のCSSが邪魔して、
    幅の狭い地区内の文字が縦書きになってしまいます。

    余白が邪魔しているだと思われますが、
    個別に地図内の余白を調整するにはCSSのどの部分を調整したらよいでしょうか?

      • 東内 拓理
      • 2020年 12月 20日 1:11pm

      「幅の狭い地区」というのは、おそらく奈良県・三重県の事と思います。
      ただ、どの県でも余白(padding)はございませんので、
      文字を1pxサイズを小さくしたり字間を詰め(後述)、もしくは縦書きのままご利用なさるなどして頂ければと思います。

      各県には、HTML上でIDに県名を付与していますので、
      奈良県の場合は

      #japan-map #nara {font-size: 13px; letter-spacing: -1px;}

      とCSSに加えるなどして、文字を1px小さく&字間を1px詰めるなどしてはいかがでしょう。

    • ひとみたん
    • 2021年 2月 19日 11:02am

    ありがとうございます!
    感謝感激です!

    • I_bouzu
    • 2021年 7月 30日 1:04am

    すごく綺麗なデザインで感動しております。
    本当にありがとうございます。

    一点質問させていただきたいのですが、ダウンロードさせていただいたHTML(CSS)を実行したところ、iPhoneやiPadの画面にてレスポンシブ対応が反映されないのですが、どこかいじる必要があるのでしょうか。

    デフォルトでaタグまで設定いただいていて、本当にありがたく、より綺麗に使用させていただきたくご質問させていただきました。

    大変恐縮ではございますが、ご回答いただければ幸いです。

      • 東内 拓理
      • 2021年 7月 30日 2:27am

      ご指摘の件ですが、

      <head>

      の中に次の一文を入れるのを忘れておりました。

      <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">

      これを

      <head> 〜 </head>

      の中に追加する事で、iOS でも正しくレスポンシブされます。
      ダウンロードデータは先ほど更新しました。再ダウンロードして頂けましたら、iOS でも動作いたします。
      どうぞよろしくご確認下さい。

    • 匿名
    • 2021年 8月 05日 11:05am

    高地⇒高知

      • 東内 拓理
      • 2021年 8月 05日 11:23am

      ああ、お恥ずかしい。更新してアップし直します。ご指摘ありがとうございました。

    • TM
    • 2021年 8月 11日 11:16am

    はじめまして。

    リアルな地図よりも親しみやすいデザインなので、
    ブログで利用させていただこうかと検討しております。

    しかし、なぜか画像のように文字が上にズレてしまいます。
    https://drive.google.com/file/d/1LfDQogUbdu6J1-wJj9OHANiyjpJpw6ub/view

    text-align: center;
    の下に
    vertical-align: middle;

    を追加するなど試行錯誤したのですが、どうも反応しません。

    使っているテーマとの相性なのでしょうか、、
    もしよろしければ、アドバイスを頂けると幸いです。

    大変お手数ですが、
    よろしくお願い申し上げます。

    • TM
    • 2021年 8月 12日 4:41pm

    また蛇足ながら

    静岡県 ✕
    静岡  ○

    せっかく発見したので、一応ご報告致します。
    よろしくお願い致します。

      • 東内 拓理
      • 2021年 8月 12日 10:25pm

      度々、ご指摘ありがとうございます!
      先ほど、ダウンロードデータ等を更新しました。

    • TT
    • 2021年 11月 04日 8:36pm

    素晴らしいデータのご提供、ありがとうございます。
    超々初心者なので、使い方が全くわかりません。
    このデータはワードプレスで使えるのでしょうか?
    追加CSSに貼り付けることはできたのですが、htmlが呼び出せません。
    3時間ぐらいググっても解決できないので、ワードプレスでの使い方を教えていただけると大変ありがたいです。

      • 東内 拓理
      • 2021年 11月 04日 10:24pm

      ワードプレスで固定ページや投稿ページに使いたい場合は(CSSの追加ができているのでしたら)、japan_map.html の12行目、

      <div id="japan-map" class="clearfix">

      から、291行目の

      </div> <!-- japan-map -->

      までを、「カスタムHTML」ブロックで埋めこんで頂きましたら、つかえると思います。
      よろしくお試し下さい。

    • TT
    • 2021年 11月 04日 11:27pm

    できました!!
    ありがとうございます!
    htmlは、「ページのソースの表示」でソースをコピーするんですね。
    基本の「キ」なのかもしれませんが、ド素人には大変勉強になりました。
    本当にありがとうございました!

    • EE
    • 2022年 4月 20日 8:14am

    日本地図素材を探していまして辿り着きました。
    とても素晴らしいです。
    公開ありがとうございます!
    使用させていただきます。

    • EE
    • 2022年 4月 20日 8:30am

    日本地図素材を探していて辿り着きました。
    とても素晴らしいです!
    公開ありがとうございます。
    使用させていただきます。

    • YT
    • 2022年 5月 19日 4:20pm

    素敵なデザインの公開をありがとうございます。

Twitter

PAGE TOP