Takumi Hirashima Artworks

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

LOGICAL GARDEN

BLOG

MIDDLE FLOOR

GIF ANIMATION

WORKS
HOME
BLOG
HTML
HTML レスポンシブ対応の日本地図
HTML レスポンシブ対応の日本地図
HTML
CSS
テクニック
公開日 2020.12.23

by Takumi Hirashima

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

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

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

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;
}