JavaScriptなしで地域ごとに色が変わる日本地図を作る

HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。
文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。

デモページを別のタブで開く　　このデモをダウンロード（ZIP）

2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。

このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。
ですので、特殊なタグやプロパティは使わず、ごく普通に使われる HTML タグと CSS プロパティだけで作っています。

マウスオーバーしないと色が変わらないので iPhone や iPad では微妙ですが、そういう環境のために、日本地図の下に普通のリストも付けています。

解説: 画像編

低速な環境でも素早く読み込めるよう、画像は地域ごとに分けたりせず、1枚のスプライト画像にまとめています。
画像全体を縮小表示するとこんな感じです（クリックで元サイズ表示）。

日本地図

一番上がマウスが乗っていない時の日本地図（全体）で、それ以降は地域ごとのマウスが載った時の日本地図です。もちろん、全て日本全体にしても良いのですが、容量節約のため不必要な部分は削っています。画像はわずか 33KB です。

それぞれの日本地図は、後々 CSS を書く時計算しやすいよう高さ 400px で揃えています。

解説: HTML

日本地図の部分の HTML のみ抜き出すとこんな感じです。

1
2
3
4
5
6
7
8
9
10
11
12

<ul id="imagemap">
	<li id="hokkaido"><a href="hokkaido/hokkaido.html"><span>北海道</span></a></li>
	<li id="touhoku"><a href="tohoku/miyagi</l"><span>東北</span></a></li>
	<li id="hokuriku"><a href="hokuriku/nagano.html"><span>北陸</span></a></li>
	<li id="kanto"><a href="kanto/tokyo.html"><span>関東</span></a></li>
	<li id="tokai"><a href="toukai/shizuoka.html"><span>東海</span></a></li>
	<li id="kansai"><a href="kansai/osaka.html"><span>関西</span></a></li>
	<li id="chugoku"><a href="chugoku/hiroshima.html"><span>中国</span></a></li>
	<li id="shikoku"><a href="shikoku/kochi.html"><span>四国</span></a></li>
	<li id="kyushu"><a href="kyushu/fukuoka.html"><span>九州</span></a></li>
	<li id="okinawa"><a href="okinawa/okinawa.html"><span>沖縄</span></a></li>
</ul>

HTML はシンプルで、地域名をリスト（<ul><li>）で列挙し、地域名はリンクタグ（<a>）と span タグで囲っています。span タグで囲っている理由は CSS の都合です。

リストには、それぞれ ID が付いています。これも CSS の都合です。

2009年に制作した際は、spanタグの中に都道府県名を列挙していたため定義型リスト（<dl><dt><dd>）を使用していましたが、一般的にはあまりそうする必要がないと思うのでリストに書き直しました。

解説: CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/* 共通部分 */
#imagemap {
	margin: 0px auto;
	padding: 0px;
	background: url(img/jp.png) top left no-repeat;
	width: 600px;
	height: 400px;
	position: relative;
}
#imagemap li {
	margin: 0px;
	padding: 0px;
	position: absolute;
	list-style: none;
	font-size: 14px;
}
#imagemap a {
	position: absolute;
}
#imagemap a span {
	display: none;
}
 
/* 北海道 */
#hokkaido {
	top: 0px;
	left: 333px;
}
#hokkaido a {
	width: 300px;
	height: 131px;
}
#hokkaido a:hover {
	background: url(img/jp.png) -333px -400px no-repeat;
}

他の地域は、北海道と似たコードで width、height、background の座標が違うだけですので省略します。

以下解説です。

1
2
3
4
5
6
7
8
9

/* 共通部分 */
#imagemap {
	margin: 0px auto;
	padding: 0px;
	background: url(img/jp.png) top left no-repeat;
	width: 600px;
	height: 400px;
	position: relative;
}

↑リスト全体（<ul>）の背景に、緑の日本地図を表示させておきます。

10
11
12
13
14
15
16

#imagemap li {
	margin: 0px;
	padding: 0px;
	position: absolute;
	list-style: none;
	font-size: 14px;
}

↑各リスト（<li>）は、そのままだと先頭に・がついてしまうため、・を非表示にしておきます。

17
18
19

#imagemap a {
	position: absolute;
}

↑aタグにマウスオーバーした時に自由に位置をずらせるように、position: absolute; にしておきます。

20
21
22

#imagemap a span {
	display: none;
}

↑aタグの中にあるspanタグの中には「東北」などの地域名のテキストが入っていますが、これは HTML の構造上は必要ですが画面には表示したくないので非表示にしておきます。

24
25
26
27
28
29
30
31
32

/* 北海道 */
#hokkaido {
	top: 0px;
	left: 333px;
}
#hokkaido a {
	width: 300px;
	height: 131px;
}

↑「北海道」部分のリスト（<li id=”hokkaido”>）の位置を top: 0px（上から 0px）と left: 333px（左から 333px）で指定します。
「北海道」部分のサイズを width、height で指定します。

33
34
35

#hokkaido a:hover {
	background: url(img/jp.png) -333px -400px no-repeat;
}

↑「北海道」部分にマウスを載せた時に、中の背景を下に 400px（-400px）ずらします。
左からの位置は、先ほどど同様 333px（-333px）です。

以下、東北、関東など座標は違いますが書き方は同じです。

マウスを載せた時の位置は複雑な地形には合わせておらず、単純な長方形になってしまいますが、意外とそれっぽく動いているかと思います。
良かったらご活用ください。