HTML レスポンシブ対応の日本地図
公開日
by
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 レスポンシブ対応の日本地図を紹介しました。
