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


Tweet about this on TwitterShare on Facebook2Share on Google+0Pin on Pinterest0

コメントを残す

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