【HTML】HTMLで日本地図を作る。

タイトル通りのことをしたくて探してたらすばらしいコードを見つけたのでペタリ。

<table border="0" cellspacing="1" cellpadding="2" align="center" class="japan-map">
<tr> 
<td valign="top" colspan="14" rowspan="4"></td>
<td colspan="2" height="60" bgcolor="#66CC00" nowrap align="center" class="act">北海道</td>
</tr>
<tr><td> </td><td></td></tr>
<tr> 
<td colspan="2" bgcolor="#00CCFF" align="center" class="act">青森</td>
</tr>
<tr> 
<td bgcolor="#00CCFF" class="act">秋田</td>
<td bgcolor="#00CCFF" class="act">岩手</td>
</tr>
<tr> 
<td colspan="10" rowspan="2"></td>
<td rowspan="2" bgcolor="#FF6633" class="act"> 石川</td>
<td colspan="3"></td>
<td bgcolor="#00CCFF" class="act">山形</td>
<td bgcolor="#00CCFF" class="act">宮城</td>
</tr>
<tr> 
<td bgcolor="#FF6633" class="act">富山</td>
<td colspan="2" bgcolor="#FF6633" align="center" class="act">新潟</td>
<td colspan="2" bgcolor="#00CCFF" align="center" class="act">福島</td>
</tr>
<tr> 
<td colspan="9"></td>
<td colspan="2" bgcolor="#FF6633" align="center" class="act">福井</td>
<td rowspan="2" bgcolor="#FF6633" class="act">岐阜</td>
<td rowspan="2" bgcolor="#FF6633" class="act">長野</td>
<td bgcolor="#00CC33" align="center" class="act">群馬</td>
<td bgcolor="#00CC33" class="act">栃木</td>
<td rowspan="2" bgcolor="#00CC33" class="act">茨城</td>
</tr>
<tr> 
<td colspan="4"></td>
<td bgcolor="#6666FF" class="act">山口</td>
<td bgcolor="#6666FF" class="act">島根</td>
<td bgcolor="#6666FF" class="act">鳥取</td>
<td rowspan="2" bgcolor="#FF3399" class="act">兵<br>庫</td>
<td bgcolor="#FF3399" class="act">京都</td>
<td colspan="2" bgcolor="#FF3399" align="center" class="act">滋賀</td>
<td bgcolor="#00CC33" colspan="2" align="center" class="act">埼玉</td>
</tr>
<tr> 
<td rowspan="2" bgcolor="#FF9933" class="act">長<br>崎</td>
<td rowspan="2" bgcolor="#FF9933" class="act">佐<br>賀</td>
<td colspan="2" bgcolor="#FF9933" align="center" class="act">福岡</td>
<td rowspan="5"></td>
<td bgcolor="#6666FF" class="act">広島</td>
<td bgcolor="#6666FF" class="act">岡山</td>
<td bgcolor="#FF3399" class="act">大阪</td>
<td bgcolor="#FF3399" class="act">奈良</td>
<td rowspan="2" bgcolor="#FF3399" class="act">三重</td>
<td bgcolor="#FF6633" class="act">愛知</td>
<td rowspan="2" bgcolor="#FF6633" class="act">静岡</td>
<td bgcolor="#FF6633" align="center" class="act">山梨</td>
<td bgcolor="#00CC33" class="act">東京</td>
<td rowspan="2" bgcolor="#00CC33" class="act">千葉</td>
</tr>
<tr> 
<td rowspan="3" bgcolor="#FF9933" class="act">熊<br>本</td>
<td bgcolor="#FF9933" class="act">大分</td>
<td colspan="3"></td>
<td colspan="2" bgcolor="#FF3399" align="center" class="act">和歌山</td>
<td></td>
<td bgcolor="#00CC33" class="act">神奈川</td>
<td></td>
</tr>
<tr> 
<td colspan="2" rowspan="3"></td>
<td rowspan="2" bgcolor="#FF9933" class="act">宮崎</td>
<td bgcolor="#339966" class="act">愛媛</td>
<td bgcolor="#339966" class="act">香川</td>
<td rowspan="3" colspan="9"> </td>
</tr>
<tr> 
<td bgcolor="#339966" class="act">高知</td>
<td bgcolor="#339966" class="act">徳島</td>
</tr>
<tr> 
<td colspan="2" bgcolor="#FF9933" align="center" class="act">鹿児島</td>
<td colspan="2"></td>
</tr>
<tr> 
<td colspan="2" bgcolor="#FF9933" class="act">沖縄</td>
<td colspan="14"></td>
</tr>
</table>

■デモ

こんなかんじになる。

11