魔術師見習いのノート

tableタグとCSSで書くデフォルメ日本地図。「タグで作った日本地図素材-地方別色分けB(リンクあり)」や「なぜ人はテーブルタグで日本地図を作るのか - 寄せては返す館主専用」を参考に，HTMLとCSSで記述。

<style>
<!--
table.jp td {
    text-align:center;
    padding:5px;
}
td.hokkaido{
    background-color:#87cefa;
}
td.tohoku {
    background-color:#40e0d0;
}
td.koshinetsu {
    background-color:#3cb371;
}
td.hokuriku {
    background-color:#2e8b57;
}
td.kanto {
    background-color:#66cdaa;
}
td.kinki {
    background-color:#bdb76b;
}
td.tokai {
    background-color:#9acd32;
}
td.chugoku {
    background-color:#deb887;
}
td.kyusyu {
    background-color:#ff8c00;
}
td.shikoku {
    background-color:#ff7f50;
}
td.okinawa {
    background-color:#ff6347;
}
-->
</style>

<table class="jp">
<tr>
 <td colspan="15"></td>
 <td colspan="3" class="hokkaido" style="height:80px;">
  北海道
 </td>
</tr>

<tr>
<td></td>
</tr>

<tr>
<td colspan="15"></td>
<td colspan="2" class="tohoku">
青森
</td>
<td style="min-width:10px;"></td>
</tr>

<tr>
<td colspan="15"></td>
<td class="tohoku">
秋田
</td>
<td class="tohoku">
岩手
</td>
</tr>

<tr>
<td colspan="15"></td>
<td class="tohoku">
山形
</td>
<td class="tohoku">
宮城
</td>
</tr>

<tr>
<td colspan="12"></td>
<td class="hokuriku">
石川
</td>
<td class="hokuriku">
富山
</td>
<td class="koshinetsu" colspan="2">
新潟
</td>
<td class="tohoku">
福島
</td>
</tr>

<tr>
<td colspan="2"></td>
<td class="kyusyu">
長崎
</td>
<td class="kyusyu">
佐賀
</td>
<td class="kyusyu">
福岡
</td>
<td></td>
<td class="chugoku" rowspan="2">
山口
</td>
<td class="chugoku">
島根
</td>
<td class="chugoku">
鳥取
</td>
<td class="kinki" rowspan="2">
兵庫
</td>
<td class="kinki">
京都
</td>
<td class="kinki">
滋賀
</td>
<td class="hokuriku">
福井
</td>
<td class="koshinetsu" rowspan="2">
長野
</td>
<td class="kanto">
群馬
</td>
<td class="kanto">
栃木
</td>
<td class="kanto">
茨城
</td>
</tr>

<tr>
<td colspan="3"></td>
<td class="kyusyu">
熊本
</td>
<td class="kyusyu">
大分
</td>
<td></td>
<td class="chugoku">
広島
</td>
<td class="chugoku">
岡山
</td>
<td class="kinki">
大阪
</td>
<td class="kinki">
奈良
</td>
<td class="tokai">
岐阜
</td>
<td class="koshinetsu">
山梨
</td>
<td class="kanto">
埼玉
</td>
<td class="kanto">
千葉
</td>
</tr>

<tr>
<td colspan="3"></td>
<td class="kyusyu">
鹿児島
</td>
<td class="kyusyu">
宮崎
</td>

<td colspan="5"></td>

<td class="kinki">
和歌山
</td>
<td class="tokai">
三重
</td>
<td class="tokai">
愛知
</td>
<td class="tokai">
静岡
</td>
<td class="kanto">
神奈川
</td>
<td class="kanto">
東京
</td>
</tr>

<tr>
<td colspan="7"></td>
<td class="shikoku">
愛媛
</td>
<td class="shikoku">
香川
</td>
</tr>

<tr>
<td class="okinawa">
沖縄
</td>
<td colspan="6"></td>
<td class="shikoku">
高知
</td>
<td class="shikoku">
徳島
</td></tr>
</table>