tableタグを利用したレスポンシブな日本地図

レスポンシブ対応が何かと面倒な日本地図のクリッカブルマップですが、画像やmap,areaタグを使わずに敢えてtableタグで表現してみました。
スマートフォンのポートレートモードではもう少し工夫が必要ですが、需要がありましたら是非使ってみてください。

  北海道
 
青森県
秋田県 岩手県
  石川県   山形県 宮城県
富山県 新潟県 福島県
  福井県 岐阜県 長野県 群馬県 栃木県 茨城県
  山口県 島根県 鳥取県 兵庫県 京都府 滋賀県 山梨県 埼玉県
長崎県 佐賀県 福岡県   広島県 岡山県 大阪府 奈良県 三重県 愛知県 静岡県 神奈川県 東京都 千葉県
熊本県 大分県   和歌山県    
  宮崎県   愛媛県 香川県  
高知県 徳島県
鹿児島県  
沖縄県  

Source code

#japan-map {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
}

.pref {
	background: #224163;
	min-height: 10px;
	font-size: 0.7em;
	text-align: center;
	padding: 3px;
	border-radius: 5px;
}

.pref a {
	display: block;
	min-height: 10px;
	text-decoration: none;
	color: white;
}

#hokkaido {
	margin: 20px 0;
}
<table id="japan-map">
	<tr>
		<td colspan="22" rowspan="4">&nbsp;</td>
		<td colspan="3" class="pref"><a href="#" id="hokkaido">北海道</a></td>
	</tr>
	<tr>
		<td colspan="3">&nbsp;</td>
	</tr>
	<tr>
		<td colspan="3" class="pref"><a href="#" id="aomori">青森県</a></td>
	</tr>
	<tr>
		<td class="pref"><a href="#" id="akita">秋田県</a></td>
		<td colspan="2" class="pref"><a href="#" id="iwate">岩手県</a></td>
	</tr>
	<tr>
		<td colspan="15" rowspan="2">&nbsp;</td>
		<td colspan="2" rowspan="2" class="pref"><a href="#" id="ishikawa">石川県</a></td>
		<td colspan="5">&nbsp;</td>
		<td class="pref"><a href="#" id="yamagata">山形県</a></td>
		<td colspan="2" class="pref"><a href="#" id="miyagi">宮城県</a></td>
	</tr>
	<tr>
		<td colspan="3" class="pref"><a href="#" id="toyama">富山県</a></td>
		<td colspan="3" class="pref"><a href="#" id="niigata">新潟県</a></td>
		<td colspan="2" class="pref"><a href="#" id="fukushima">福島県</a></td>
	</tr>
	<tr>
		<td colspan="13">&nbsp;</td>
		<td colspan="4" class="pref"><a href="#" id="fukui">福井県</a></td>
		<td rowspan="2" class="pref"><a href="#" id="gifu">岐阜県</a></td>
		<td colspan="2" rowspan="2" class="pref"><a href="#" id="nagano">長野県</a></td>
		<td colspan="2" class="pref"><a href="#" id="gunma">群馬県</a></td>
		<td class="pref"><a href="#" id="tochigi">栃木県</a></td>
		<td colspan="2" rowspan="2" class="pref"><a href="#" id="ibaraki">茨城県</a></td>
	</tr>
	<tr>
		<td colspan="5">&nbsp;</td>
		<td class="pref"><a href="#" id="yamaguchi">山口県</a></td>
		<td colspan="2" class="pref"><a href="#" id="shimane">島根県</a></td>
		<td colspan="2" class="pref"><a href="#" id="tottori">鳥取県</a></td>
		<td rowspan="2" class="pref"><a href="#" id="hyogo">兵庫県</a></td>
		<td colspan="2" class="pref"><a href="#" id="kyoto">京都府</a></td>
		<td colspan="4" class="pref"><a href="#" id="shiga">滋賀県</a></td>
		<td colspan="2" class="pref"><a href="#" id="yamanashi">山梨県</a></td>
		<td class="pref"><a href="#" id="saitama">埼玉県</a></td>
	</tr>
	<tr>
		<td rowspan="2" class="pref"><a href="#" id="nagasaki">長崎県</a></td>
		<td rowspan="2" class="pref"><a href="#" id="saga">佐賀県</a></td>
		<td colspan="3" class="pref"><a href="#" id="fukuoka">福岡県</a></td>
		<td>&nbsp;</td>
		<td colspan="2" class="pref"><a href="#" id="hiroshima">広島県</a></td>
		<td colspan="2" class="pref"><a href="#" id="okayama">岡山県</a></td>
		<td colspan="2" class="pref"><a href="#" id="osaka">大阪府</a></td>
		<td colspan="2" class="pref"><a href="#" id="nara">奈良県</a></td>
		<td colspan="2" rowspan="2" class="pref"><a href="#" id="mie">三重県</a></td>
		<td class="pref"><a href="#" id="aichi">愛知県</a></td>
		<td colspan="2" rowspan="2" class="pref"><a href="#" id="shizuoka">静岡県</a></td>
		<td colspan="2" rowspan="2" class="pref"><a href="#" id="kanagawa">神奈川県</a></td>
		<td class="pref"><a href="#" id="tokyo">東京都</a></td>
		<td colspan="2" rowspan="2" class="pref"><a href="#" id="chiba">千葉県</a></td>
	</tr>
	<tr>
		<td rowspan="3" class="pref"><a href="#" id="kumamoto">熊本県</a></td>
		<td colspan="2" class="pref"><a href="#" id="oita">大分県</a></td>
		<td colspan="6">&nbsp;</td>
		<td colspan="4" class="pref"><a href="#" id="wakayama">和歌山県</a></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">&nbsp;</td>
		<td colspan="2" rowspan="2" class="pref"><a href="#" id="miyazaki">宮崎県</a></td>
		<td rowspan="2">&nbsp;</td>
		<td colspan="2" class="pref"><a href="#" id="ehime">愛媛県</a></td>
		<td colspan="2" class="pref"><a href="#" id="kagawa">香川県</a></td>
		<td colspan="15" rowspan="4">&nbsp;</td>
	</tr>
	<tr>
		<td colspan="2" class="pref"><a href="#" id="kochi">高知県</a></td>
		<td colspan="2" class="pref"><a href="#" id="tokushima">徳島県</a></td>
	</tr>
	<tr>
		<td colspan="3" class="pref"><a href="#" id="kagoshima">鹿児島県</a></td>
		<td colspan="5">&nbsp;</td>
	</tr>
	<tr>
		<td colspan="2" class="pref"><a href="#" id="okinawa">沖縄県</a></td>
		<td colspan="8">&nbsp;</td>
	</tr>
</table>

おすすめiPhone/iPadアプリ

1分程度でサクッと遊べるトランプの無料アプリです。
簡単な足し算を繰り返すことで、脳トレ効果も期待できます。
通勤・通学の時間つぶしにどうぞ!


コメント

  • 小松 より:

     サム・サーキュレーション様、はじめまして。

    「 免許証の住所変更を土日に行える全国47都道府県一覧 」の
    記事で、日本地図を使ったリンク集を作りたいと考えていました。

    御社の記事のテーブルタグを参考に早速、作成させて頂き
    出来栄えも良好で、感謝いたしております。^^

    画面が切れてしまう問題は、<div class=”table-scroll”>~</div>
    のタグで、解決を図りました。

    本当に、ありがとうございました。m(_ _)m

  • samcirculation より:

    小松様、はじめまして。
    コメントありがとうございます。
    日本地図のコードがお役に立てて何よりです。
    画面が切れる問題もtable-scrollで解決されたのこと、参考にさせていただきます。
    確かにBootstrapなどで左右にスクロールでさせれば見やすくなりますね。
    ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください