HTML

HTML レスポンシブ対応の日本地図

HTML で作るレスポンシブ対応の日本地図の作り方を紹介します。
例えば、店舗検索などに便利な方法です。

レスポンシブ対応の日本地図

HTML レスポンシブ対応の日本地図を作るには table タグを使用します。
実際の見た目と使用する HTML CSS はこちら。

<table class="jp-map">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="hokkaido" colspan="2" rowspan="2"><a href="#">北海道</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="tohoku" colspan="2"><a href="#">青森</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="tohoku"><a href="#">秋田</a></td>
<td class="tohoku"><a href="#">岩手</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="tohoku"><a href="#">山形</a></td>
<td class="tohoku"><a href="#">宮崎</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="chubu"><a href="#">石川</a></td>
<td class="chubu"><a href="#">富山</a></td>
<td class="chubu"><a href="#">新潟</a></td>
<td class="tohoku" colspan="2"><a href="#">福島</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="chubu"><a href="#">福井</a></td>
<td class="chubu" rowspan="2"><a href="#">岐阜</a></td>
<td class="chubu" rowspan="2"><a href="#">長野</a></td>
<td class="kanto"><a href="#">群馬</a></td>
<td class="kanto"><a href="#">栃木</a></td>
</tr>
<tr>
<td class="kyushu"><a href="#">佐賀</a></td>
<td class="kyushu"><a href="#">福岡</a></td>
<td class="kyushu"><a href="#">大分</a></td>
<td class="chugoku" rowspan="2"><a href="#">山口</a></td>
<td class="chugoku"><a href="#">島根</a></td>
<td class="chugoku"><a href="#">鳥取</a></td>
<td class="kinki"><a href="#">兵庫</a></td>
<td class="kinki"><a href="#">京都</a></td>
<td class="kinki"><a href="#">滋賀</a></td>
<td class="kanto"><a href="#">埼玉</a></td>
<td class="kanto"><a href="#">茨城</a></td>
</tr>
<tr>
<td class="kyushu"><a href="#">長崎</a></td>
<td class="kyushu" rowspan="2"><a href="#">熊本</a></td>
<td class="kyushu" rowspan="2"><a href="#">宮崎</a></td>
<td class="chugoku"><a href="#">広島</a></td>
<td class="chugoku"><a href="#">岡山</a></td>
<td class="kinki"><a href="#">大阪</a></td>
<td class="kinki"><a href="#">奈良</a></td>
<td class="kinki"><a href="#">三重</a></td>
<td class="chubu"><a href="#">愛知</a></td>
<td class="chubu"><a href="#">山梨</a></td>
<td class="kanto"><a href="#">東京都</a></td>
<td class="kanto" rowspan="2"><a href="#">千葉</a></td>
</tr>
<tr>
<td></td>
<td class="shikoku"><a href="#">愛媛</a></td>
<td class="shikoku"><a href="#">香川</a></td>
<td></td>
<td class="kinki" colspan="2"><a href="#">和歌山</a></td>
<td></td>
<td></td>
<td class="chubu"><a href="#">静岡</a></td>
<td class="kanto"><a href="#">神奈川</a></td>
</tr>
<tr>
<td class="okinawa"><a href="#">沖縄</a></td>
<td class="kyushu" colspan="2"><a href="#">鹿児島</a></td>
<td class="shikoku"><a href="#">高知</a></td>
<td class="shikoku"><a href="#">徳島</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
table.jp-map {
width: 100%;
}
table.jp-map,
table.jp-map td,
table.jp-map th {
border-collapse: collapse;
}
table.jp-map td,
table.jp-map th {
padding: 10px;
text-align: center;
}
table.jp-map td[class] {
border: 1px solid #fff;
}
table.jp-map td a {
color: #ffffff;
text-decoration: none;
}
.hokkaido {
background-color: #673AB7;
}
.tohoku {
background-color: #3F51B5;
}
.kanto {
background-color: #2196F3;
}
.chubu {
background-color: #009688;
}
.kinki {
background-color: #FFC107;
}
.chugoku {
background-color: #FF9800;
}
.shikoku {
background-color: #FF5722;
}
.kyushu {
background-color: #f44336;
}
.okinawa {
background-color: #E91E63;
}

まとめ

HTML レスポンシブ対応の日本地図を紹介しました。