今注目のニュース
ミニストップ店主「なんでこんな場所を紹介した」「売上低すぎ」 本部との裁判始まる
勉強はできないけど仕事ができる人ってどんな人?キャリアカウンセラーに聞いてみた
台風被災でタワマン住民に「トイレ控えて」 現場の情報を独自入手

ちもさんのページユーザー

掲示板をみる(548)
  • twitter
  • facebook
  • はてな
  • LINE

tableで作る日本地図

アイドルマスターの苗字を語る生 THE SURNAMEM@STER」記事で使用している日本地図です。軽くネット検索して出てくるtable日本地図べても正確かつ小綺麗でかわいいレイアウトになっていると自負しております。ご自由にお使いいただければと思います。

ソースはこちら。
<table style="background: #cccccc; border-collapse: collapse; margin-top: 10px;">
<tbody>
<tr><!-- 幅固定用 -->
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="14" rowspan="9" style="border-style: none; padding: 0;">
</td>
<td colspan="4" rowspan="3" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--北海道--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="4" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--青森--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="2" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--秋田--></td>
<td colspan="2" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--岩手--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="2" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--山形--></td>
<td colspan="2" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--宮城--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="10" style="border-style: none; padding: 0;"></td>
<td rowspan="3" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--石川--></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="3" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--新潟--></td>
<td colspan="3" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--福島--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="10" style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--富山--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="10" style="border-style: none; padding: 0;"></td>
<td rowspan="4" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--長野--></td>
<td colspan="2" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--群馬--></td>
<td colspan="2" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--栃木--></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--茨城--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="9" style="border-style: none; padding: 0;"></td>
<td colspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--福井--></td>
<td rowspan="3" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--岐阜--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--山口--></td>
<td style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--島根--></td>
<td style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--鳥取--></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--兵庫--></td>
<td colspan="2" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--京都--></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--滋賀--></td>
<td colspan="4" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--埼玉--></td>
<td rowspan="3" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--千葉--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--広島--></td>
<td style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--岡山--></td>
<td colspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--山梨--></td>
<td colspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--東京--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--長崎--></td>
<td style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--佐賀--></td>
<td colspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--福岡--></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--大阪--></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--奈良--></td>
<td rowspan="3" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--三重--></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--愛知--></td>
<td colspan="2" rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--静岡--></td>
<td colspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--神奈川--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="border-style: none; padding: 0;"></td>
<td rowspan="3" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--熊本--></td>
<td style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--大分--></td>
<td style="border-style: none; padding: 0;"></td>
<td style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--愛媛--></td>
<td style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--香川--></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="2" style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--宮崎--></td>
<td style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--高知--></td>
<td style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--徳島--></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--和歌山--></td>
<td colspan="7" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="2" style="border-style: none; padding: 0;"></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="12" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--沖縄--></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="2" style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 0;"><!--鹿児島--></td>
<td colspan="14" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="17" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<!-- バランス用 -->
<tr>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
</tr>
</tbody>
</table>

あと記事作成に使っていたスクリプトも置いておきます。jQueryを使ってるので適当アレコレしてください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>日本地図つくるよ!</title>
<style type="text/css">
<!--
.pref{cursor: pointer;}
//-->
</style>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
<!--
        var colors = ["#ffffff", "#ff0000", "#ff99cc", "#ffff00"];
        var colorTable = {};

        $(function(){
                for(var i=1; i<=47; i++){
                        colorTable["" + i] = 0; // #ffffffで初期化
                }
                $(".pref").on({
                        click: function(){
                                var id = $(this).attr("id");
                                colorTable[id] = (colorTable[id] + 1) % 4;

                                redrawTable();
                        }
                });
        });

        function redrawTable(){
                $.each(colorTable, function(key, value){
                        $("#" + key).css({backgroundColor: colors[value]});
                });
        }

        function outputText(){
                var htmlText = $("#txtInput").text();
                $.each(colorTable, function(key, value){
                        htmlText = htmlText.replace("{" + key + "}", colors[value]);
                });
                $("#txtOutput").val(htmlText);
        };
//-->
</script>
</head>
<body>
//TODO ありモード<br/>
<table id="mainTable" style="background: #cccccc; border-collapse: collapse; margin-top: 20px;">
<tbody>
<tr><!-- 幅固定用 -->
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="14" rowspan="9" style="border-style: none; padding: 0;">
<div style="font-size: 80%; margin: 5px; color: #303030;">
<div><span style="color: #ff0000;">■</span>XXX世帯以上</div>
<div><span style="color: #ff99cc;">■</span>YYY世帯以上</div>
<div><span style="color: #ffff00;">■</span>ZZZ世帯以上</div>
</div>
</td>
<td class="pref" id="1" colspan="4" rowspan="3" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--北海道--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td class="pref" id="2" colspan="4" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--青森--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td class="pref" id="3" colspan="2" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--秋田--></td>
<td class="pref" id="4" colspan="2" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--岩手--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td class="pref" id="5" colspan="2" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--山形--></td>
<td class="pref" id="6" colspan="2" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--宮城--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="10" style="border-style: none; padding: 0;"></td>
<td class="pref" id="7" rowspan="3" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--石川--></td>
<td style="border-style: none; padding: 0;"></td>
<td class="pref" id="8" colspan="3" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--新潟--></td>
<td class="pref" id="9" colspan="3" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--福島--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="10" style="border-style: none; padding: 0;"></td>
<td class="pref" id="10" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--富山--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="10" style="border-style: none; padding: 0;"></td>
<td class="pref" id="11" rowspan="4" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--長野--></td>
<td class="pref" id="12" colspan="2" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--群馬--></td>
<td class="pref" id="13" colspan="2" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--栃木--></td>
<td class="pref" id="14" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--茨城--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="9" style="border-style: none; padding: 0;"></td>
<td class="pref" id="15" colspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--福井--></td>
<td class="pref" id="16" rowspan="3" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--岐阜--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td class="pref" id="17" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--山口--></td>
<td class="pref" id="18" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--島根--></td>
<td class="pref" id="19" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--鳥取--></td>
<td class="pref" id="20" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--兵庫--></td>
<td class="pref" id="21" colspan="2" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--京都--></td>
<td class="pref" id="22" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--滋賀--></td>
<td class="pref" id="23" colspan="4" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--埼玉--></td>
<td class="pref" id="28" rowspan="3" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--千葉--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td class="pref" id="24" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--広島--></td>
<td class="pref" id="25" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--岡山--></td>
<td class="pref" id="26" colspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--山梨--></td>
<td class="pref" id="27" colspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--東京--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td class="pref" id="29" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--長崎--></td>
<td class="pref" id="30" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--佐賀--></td>
<td class="pref" id="31" colspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--福岡--></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td class="pref" id="32" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--大阪--></td>
<td class="pref" id="33" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--奈良--></td>
<td class="pref" id="34" rowspan="3" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--三重--></td>
<td class="pref" id="35" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--愛知--></td>
<td class="pref" id="36" colspan="2" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--静岡--></td>
<td class="pref" id="37" colspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--神奈川--></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td style="border-style: none; padding: 0;"></td>
<td class="pref" id="38" rowspan="3" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--熊本--></td>
<td class="pref" id="39" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--大分--></td>
<td style="border-style: none; padding: 0;"></td>
<td class="pref" id="40" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--愛媛--></td>
<td class="pref" id="41" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--香川--></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="2" style="border-style: none; padding: 0;"></td>
<td class="pref" id="42" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--宮崎--></td>
<td style="border-style: none; padding: 0;"></td>
<td class="pref" id="43" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--高知--></td>
<td class="pref" id="44" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--徳島--></td>
<td style="border-style: none; padding: 0;"></td>
<td class="pref" id="45" colspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--和歌山--></td>
<td colspan="7" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="2" style="border-style: none; padding: 0;"></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="12" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td class="pref" id="46" rowspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--沖縄--></td>
<td style="border-style: none; padding: 0;"></td>
<td class="pref" id="47" colspan="2" style="background-color: #ffffff; border: 1px solid #cccccc; padding: 0;"><!--鹿児島--></td>
<td colspan="14" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
<td colspan="17" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 20px; border-style: none; padding: 0;"></td>
</tr>
<!-- バランス用 -->
<tr>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 20px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
</tr>
</tbody>
</table>
<div style="margin: 10px;"><button onclick="outputText();">OUTPUT</button></div>
<textarea id="txtInput" style="display: none;">
<table style="background: #cccccc; border-collapse: collapse; margin-top: 10px;"><!-- 幅固定用 -->
<tbody>
<tr>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="14" rowspan="9" style="border-style: none; padding: 0;">
<div style="font-size: 80%; margin: 5px; color: #303030;">
<div><span style="color: #ff0000;">■</span>XXXX世帯以上</div>
<div><span style="color: #ff99cc;">■</span>YYYY世帯以上</div>
<div><span style="color: #ffff00;">■</span>ZZZ世帯以上</div>
</div>
</td>
<td colspan="4" rowspan="3" style="background-color: {1}; border: 1px solid #cccccc; padding: 0;"><!--北海道--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="4" style="background-color: {2}; border: 1px solid #cccccc; padding: 0;"><!--青森--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="2" rowspan="2" style="background-color: {3}; border: 1px solid #cccccc; padding: 0;"><!--秋田--></td>
<td colspan="2" rowspan="2" style="background-color: {4}; border: 1px solid #cccccc; padding: 0;"><!--岩手--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="2" rowspan="2" style="background-color: {5}; border: 1px solid #cccccc; padding: 0;"><!--山形--></td>
<td colspan="2" rowspan="2" style="background-color: {6}; border: 1px solid #cccccc; padding: 0;"><!--宮城--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="10" style="border-style: none; padding: 0;"></td>
<td rowspan="3" style="background-color: {7}; border: 1px solid #cccccc; padding: 0;"><!--石川--></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="3" rowspan="2" style="background-color: {8}; border: 1px solid #cccccc; padding: 0;"><!--新潟--></td>
<td colspan="3" rowspan="2" style="background-color: {9}; border: 1px solid #cccccc; padding: 0;"><!--福島--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="10" style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: {10}; border: 1px solid #cccccc; padding: 0;"><!--富山--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="10" style="border-style: none; padding: 0;"></td>
<td rowspan="4" style="background-color: {11}; border: 1px solid #cccccc; padding: 0;"><!--長野--></td>
<td colspan="2" rowspan="2" style="background-color: {12}; border: 1px solid #cccccc; padding: 0;"><!--群馬--></td>
<td colspan="2" rowspan="2" style="background-color: {13}; border: 1px solid #cccccc; padding: 0;"><!--栃木--></td>
<td rowspan="2" style="background-color: {14}; border: 1px solid #cccccc; padding: 0;"><!--茨城--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="9" style="border-style: none; padding: 0;"></td>
<td colspan="2" style="background-color: {15}; border: 1px solid #cccccc; padding: 0;"><!--福井--></td>
<td rowspan="3" style="background-color: {16}; border: 1px solid #cccccc; padding: 0;"><!--岐阜--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: {17}; border: 1px solid #cccccc; padding: 0;"><!--山口--></td>
<td style="background-color: {18}; border: 1px solid #cccccc; padding: 0;"><!--島根--></td>
<td style="background-color: {19}; border: 1px solid #cccccc; padding: 0;"><!--鳥取--></td>
<td rowspan="2" style="background-color: {20}; border: 1px solid #cccccc; padding: 0;"><!--兵庫--></td>
<td colspan="2" rowspan="2" style="background-color: {21}; border: 1px solid #cccccc; padding: 0;"><!--京都--></td>
<td rowspan="2" style="background-color: {22}; border: 1px solid #cccccc; padding: 0;"><!--滋賀--></td>
<td colspan="4" style="background-color: {23}; border: 1px solid #cccccc; padding: 0;"><!--埼玉--></td>
<td rowspan="3" style="background-color: {28}; border: 1px solid #cccccc; padding: 0;"><!--千葉--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td style="background-color: {24}; border: 1px solid #cccccc; padding: 0;"><!--広島--></td>
<td style="background-color: {25}; border: 1px solid #cccccc; padding: 0;"><!--岡山--></td>
<td colspan="2" style="background-color: {26}; border: 1px solid #cccccc; padding: 0;"><!--山梨--></td>
<td colspan="2" style="background-color: {27}; border: 1px solid #cccccc; padding: 0;"><!--東京--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: {29}; border: 1px solid #cccccc; padding: 0;"><!--長崎--></td>
<td style="background-color: {30}; border: 1px solid #cccccc; padding: 0;"><!--佐賀--></td>
<td colspan="2" style="background-color: {31}; border: 1px solid #cccccc; padding: 0;"><!--福岡--></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: {32}; border: 1px solid #cccccc; padding: 0;"><!--大阪--></td>
<td rowspan="2" style="background-color: {33}; border: 1px solid #cccccc; padding: 0;"><!--奈良--></td>
<td rowspan="3" style="background-color: {34}; border: 1px solid #cccccc; padding: 0;"><!--三重--></td>
<td rowspan="2" style="background-color: {35}; border: 1px solid #cccccc; padding: 0;"><!--愛知--></td>
<td colspan="2" rowspan="2" style="background-color: {36}; border: 1px solid #cccccc; padding: 0;"><!--静岡--></td>
<td colspan="2" style="background-color: {37}; border: 1px solid #cccccc; padding: 0;"><!--神奈川--></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td style="border-style: none; padding: 0;"></td>
<td rowspan="3" style="background-color: {38}; border: 1px solid #cccccc; padding: 0;"><!--熊本--></td>
<td style="background-color: {39}; border: 1px solid #cccccc; padding: 0;"><!--大分--></td>
<td style="border-style: none; padding: 0;"></td>
<td style="background-color: {40}; border: 1px solid #cccccc; padding: 0;"><!--愛媛--></td>
<td style="background-color: {41}; border: 1px solid #cccccc; padding: 0;"><!--香川--></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="4" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="2" style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: {42}; border: 1px solid #cccccc; padding: 0;"><!--宮崎--></td>
<td style="border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: {43}; border: 1px solid #cccccc; padding: 0;"><!--高知--></td>
<td style="background-color: {44}; border: 1px solid #cccccc; padding: 0;"><!--徳島--></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="2" style="background-color: {45}; border: 1px solid #cccccc; padding: 0;"><!--和歌山--></td>
<td colspan="7" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="2" style="border-style: none; padding: 0;"></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="12" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td rowspan="2" style="background-color: {46}; border: 1px solid #cccccc; padding: 0;"><!--沖縄--></td>
<td style="border-style: none; padding: 0;"></td>
<td colspan="2" style="background-color: {47}; border: 1px solid #cccccc; padding: 0;"><!--鹿児島--></td>
<td colspan="14" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<tr>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
<td colspan="17" style="border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 10px; border-style: none; padding: 0;"></td>
</tr>
<!-- バランス用 -->
<tr>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 10px; height: 1px; border-style: none; padding: 0;"></td>
<td style="width: 1px; height: 1px; border-style: none; padding: 0;"></td>
</tr>
</tbody>
</table>
</textarea>
<textarea id="txtOutput" style="width: 800px; height: 300px;"></textarea>
</body>
</html>
  1. htmlファイルとしてUTF-8で保存、jquery-***.jsと一緒に置く。
  2. 地図上の都道府県クリックすると、ピンク→…の順に変わる。
  3. OUTPUTボタンを押すと、都道府県がその色になったソースを下段に出。世帯数を書き直して記事に持っていく。

掲示板

急上昇ワード

最終更新:2019/10/16(水) 20:00

ほめられた記事

最終更新:2019/10/16(水) 20:00

ウォッチリストに追加しました!

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

           

ほめた!

すでにほめています。

すでにほめています。

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

タグ編集にはログインが必要です。

タグ編集には利用規約の同意が必要です。

TOP