全国ロケ地ガイド

お知らせ

各ロケ地の詳細画面に、全国風景ガイドの地図とGoogleMapで見る機能を追加しました。ストリートビューで見る場合などに便利です。地図上ですべてのロケ地の一覧を見る場合は、ページ上部の[ロケ地マップ]を使ってください。

テーブルタグ日本地図

　下記の日本地図は、1つのtableタグによって作成されています。各都道府県を長方形で表現していますが、隣接する都道府県の位置関係と全体のバランスを考えて作成した日本地図です。
　tableタグを使うことで、ブラウザで文字の大きさの変更も可能ですし、ブラウザの横幅を変更すると、日本地図の大きさも変わるようになっています。
　この日本地図は、全国ロケ地ガイドの[地域IDX]で利用しています。著作権表示として、全国ロケ地ガイドへリンクして頂ければ、自由に利用して頂いて構いません。

　都道府県を選択してください。

テーブルタグ日本地図の特徴

横幅が可変となるデザイン

　このテーブルタグ日本地図は、Webページの横幅に依存しないデザインとなっています。横幅を狭くしても広くしても、実際の日本地図のイメージに近い形式で表示されます。
　横幅が可変となっているため、ブラウザの文字の大きさを変更しても、同じように見えるユニバーサルデザインになっています。この点がテーブルタグを利用する一番のメリットだと思います。

横長が基本のデザイン

　縦長のHTMLページは、縦スクロールが発生してしまい操作性が悪くなるため、できるだけ横長となるデザインとして設計してあります。
　北海道や東北地方の高さは、他の都道府県よりも高くすることで、全体のバランスが取れるようにしてありますが、あまり高くすると、縦スクロールが発生しやすくなるため、控えめにしてあります。

都道府県が長方形となるデザイン

　tableタグのボーダーを設定することで、都道府県をL字型など複雑な形で表現することもできます。ただ、スタイルシートがない場合など、閲覧環境が制限されてしまうため、都道府県は長方形としてデザインしています。

主な半島や湾を表現したデザイン

　このテーブルタグ日本地図では、能登半島、富山湾、丹後半島、若狭湾、島原半島、有明海、瀬戸内海、紀伊半島、伊勢湾、東京湾、房総半島などが、分かるようなデザインとしてあります。

内陸県を考慮したデザイン

　このテーブルタグ日本地図では、内陸県（海なし県）である、栃木県、群馬県、埼玉県、山梨県、長野県、岐阜県、滋賀県、奈良県は、海に接しないように配置したデザインとしてあります。

隣接する都道府県の位置関係を考慮したデザイン

　このテーブルタグ日本地図は、隣接する都道府県は、線か点で接するように配置し、隣接しない都道府県が線で接することがないように配置してあります。
　主要な鉄道や道路で結ばれている都道府県は、できるだけ線で接するように考慮してあります。
　隣接する都道府県はすべて線で接するように作成したテーブルタグ日本地図は、テーブルタグ日本地図の変遷で紹介していますが、ごちゃごちゃした感じになるので、採用しませんでした。

実際の地図の比率を考慮したデザイン

　このテーブルタグ日本地図は、実際の日本地図の各地域の比率を考慮してデザインしてあるため、実際の日本地図のイメージに近いデザインとなっています。
　ただし、北海道と沖縄県を含めると範囲が広すぎるため、実用性を考慮して本州、四国、九州を含む範囲を基準にしてあります。
　具体的には、下記の場所の位置を考慮して作成してあります。
　ドット比率は、tdタグの横幅の表示ドット数単位の比率で、横幅が広い場合に有効となります。また、文字比率は、横幅の文字単位の比率で、横幅が狭い場合に有効になります。この2つの比率が実際の地図に近い値に設定されていると、バランスの良い地図に見えるだけでなく、各都道府県の面積も表現されます。

確認地点	実際の比率	ドット比率	文字比率
九州：長崎	0%	0%	0%
有明海：熊本	10%	9%	10%
本州：山口	15%	17%	19%
四国：愛媛	26%	26%	26%
紀伊半島：和歌山	46%	44%	43%
能登半島：石川	55%	58%	55%
北アルプス：長野	66%	71%	69%
北海道	83%	84%	81%
本州東端：岩手	100%	100%	100%

　ただ、各都道府県の大きさが同じ大きさの方が使いやすいため、大きさの差を少なくしています。ですから、この比率は全体のバランスを取る為の指標として使っています。

地方による色分けしたデザイン

　このテーブルタグ日本地図は、地方による色分けしてあります。色は、JRのイメージカラーをベースに地方による色分けをしてあります。
　北陸地方は、JR東日本とJR西日本に分かれていますので、同じ中部地方である東海地方の橙色に近い黄色としてあります。
　三重県は、中部地方に含まれる場合と、近畿地方に含まれる場合がありますが、JR東海の管理地域で名古屋との結びつきが深いため、中部地方としてあります。

3文字の都道府県名に対応したデザイン

　都道府県名には、北海道、神奈川、和歌山、鹿児島と、3文字となる場合があります。名前が長いと、横幅を狭くした場合に改行が発生し、地図のバランスを大きく崩してしまいます。そのため、colspanやwidth指定で横幅を広く取ることにより、改行が発生しにくくなるように考慮してあります。

テーブルタグ日本地図のソース

　このページのテーブルタグ日本地図は、下記のHTML+CSSソースをコピーして、HTML内に貼り付けることで利用できます。
　自由に利用して頂いて構いませんが、著作権は放棄していませんので、著作権表示として全国ロケ地ガイドへリンクをお願いいたします。

テーブルタグ日本地図のHTML+CSSソース

/* 行高さの設定 */
table.map a {text-decoration: none;}
table.map td.h00 {height: 0.1rem;} /* 枠 */
table.map td.h01 {height: 3.0rem;} /* 北海道 */
table.map td.h02 {height: 0.1rem;} /* 津軽海峡 */
table.map td.h03 {height: 1.6rem;} /* 東北(青森) */
table.map td.h04 {height: 1.6rem;}
table.map td.h05 {height: 1.6rem;}
table.map td.h06 {height: 1.0rem;} /* 北陸(石川) */
table.map td.h07 {height: 0.6rem;}
table.map td.h08 {height: 0.7rem;}
table.map td.h09 {height: 0.4rem;}
table.map td.h10 {height: 0.1rem;} /* 中国(島根) */
table.map td.h11 {height: 1.0rem;}
table.map td.h12 {height: 0.6rem;}
table.map td.h13 {height: 0.6rem;} /* 九州(佐賀) */
table.map td.h14 {height: 0.1rem;} /* 瀬戸内海 */
table.map td.h15 {height: 0.5rem;}
table.map td.h16 {height: 0.5rem;} /* 九州(長崎) */
table.map td.h17 {height: 0.2rem;}
table.map td.h18 {height: 0.5rem;}
table.map td.h19 {height: 0.1rem;}
table.map td.h20 {height: 0.6rem;} /* 沖縄 */
table.map td.h21 {height: 1.1rem;}
table.map td.h22 {height: 0.2rem;}

/* カラム幅の設定 */
table.map td.w00 {width: 0.5%;} /* 枠 */
table.map td.w01 {width: 1%;} /* 九州(長崎) */
table.map td.w02 {width: 6%;}
table.map td.w03 {width: 1%;}
table.map td.w04 {width: 7%;}
table.map td.w05 {width: 1%;}
table.map td.w06 {width: 6%;} /* 中国(山口) */
table.map td.w07 {width: 1%;}
table.map td.w08 {width: 7%;} /* 中国(島根) */
table.map td.w09 {width: 7%;}
table.map td.w10 {width: 1%;} /* 近畿(兵庫) */
table.map td.w11 {width: 7%;}
table.map td.w12 {width: 7%;}
table.map td.w13 {width: 2%;}
table.map td.w14 {width: 5%;} /* 北陸(石川) */
table.map td.w15 {width: 7%;}
table.map td.w16 {width: 7%;}
table.map td.w17 {width: 1%;} /* 関東(群馬) */
table.map td.w18 {width: 4%;}
table.map td.w19 {width: 4%;} /* 北海道 */
table.map td.w20 {width: 5%;}
table.map td.w21 {width: 4%;}
table.map td.w22 {width: 5%;}

table.map {
	width: 100%;
	max-width: 900px;
	margin: 0px;
}
table.map td {
	border: none;
/*	border: solid 1px; */
	vertical-align: middle;
	text-align: center;
	font-size: 0.8rem;
	line-height: 0.9rem;
	padding: 0.1rem;
}
table.map td.head {
	text-align: left;
	vertical-align: top;
}
table.map td.foot {
	text-align: right;
	vertical-align: bottom;
}
</style>

<tr>
<td class="h01"></td>
<td class="h01 head" colspan="18" rowspan="5">

 
　都道府県を選択してください。
 

</td>
<td class="h01 hd" colspan="4"><a href="">北海道</a></td>
<td class="h01"></td>
</tr>

<tr>
<td class="h21"></td>
<td class="h21"></td>
<td class="h21 qs" colspan="3"><a href="">鹿児島</a></td>
<td class="h21 foot" colspan="16" rowspan="2">

(C)<a href="/htm/tablemap.htm">テーブルタグ日本地図</a>

</td>
<td class="h21"></td>
</tr>

テーブルタグ日本地図の利用方法

　上記ソースを、HTML内に埋め込めば、そのまま日本地図として使えます。
　スタイルは、styleタグ内に記述しても構いませんし、外部CSSファイルとして読み込むことも可能です。
　スタイル指定は、要素名とクラス名で限定していますので、他のスタイルシートの設定に影響することは、ほとんどありません。

ヘッダの修正

　HTMLのclass="head"の部分は、日本海として表示される部分ですが、日本地図の見出しや説明などを記述することができます。
　多少、テキストが長くなっても、北海道と東北地方が縦に伸びるだけで、大きくデザインが崩れることはありません。

フッタの修正

　HTMLのclass="foot"の部分は、右下の「(C)テーブルタグ日本地図」の著作権表示ですので、できるだけ残して頂きたいところです。もし、変更する場合は、別のページからのリンクをお願いいたします。

都道府県名の修正

　HTMLの都道府県名をaタグで囲むことにより、各都道府県のページにリンクすることができます。

地方の分類の変更

　HTMLの各都道府県のclass名を変更することで、所属する地方を変更することが出来ます。地方は、2文字の略号となっています。
　所属する地方を変更することで、「北陸地方は中部地方に含める」とか「中国地方と四国地方は1つにする」ということが可能です。
　また、都道府県がどの地方に属するかは、観点によって異なりますので、自由に設定可能です。例えば、三重県は、交通はJR東海、国土交通省中部地方整備局の管理範囲が広く、電力は中部電力から供給されていますので、中部地方に分類されることもありますが、京に近い近国であったことから近畿地方に分類されることもあります。新潟県は、道路は国土交通省北陸地方整備局ですし、気候的にも北陸地方に分類されますが、鉄道はJR東日本の管理範囲が広く、電力は東北電力から供給されていますので、北陸地方に分類できない面も多いです。

地方の色の変更

　各地方の色を変更したい場合は、スタイルシートのbackgroundの値を変更してください。地方名はコメントで記述してあります。

サイズの変更

　各都道府県のサイズを変更したい場合は、スタイルシートのheightと、widthの値を変更してください。
　「北海道を大きくする」「秋田県と岩手県を大きくする」などの修正は、簡単にできます。

テーブルタグ日本地図のFAQ

なぜ縦長にならないの？

　テーブルタグ日本地図は、横幅を100%としていますので、縦長になると使いにくくなってしまいます。そこで、縦長にならない工夫をしています。まず、茨城、千葉、石川のように、縦長の県は幅を少し狭くして、優先的に縦書き表示になるようにしています。次に、できるだけ都道府県の幅を揃えることにより、17都道府県が同時に縦書き表示に変わるようにしています。あと、1行あたりの数が少ない東北地方の県と3文字の神奈川、和歌山、鹿児島は、幅を少し広くして、できるだけ横書き表示のままになるようにしています。

なぜ埼玉県が大きいの？

　埼玉県の面積は、47都道府県で39位という小さな県ですが、テーブルタグ日本地図では大きく表示されています。これは、テーブルタグ日本地図が隣接する都道府県の位置関係を考慮したデザインとなっているためです。
　埼玉県は、隣接する都道府県が7つもあり、長野県の8つに次いで、全国2位です。群馬県・山梨は茨城県・千葉県と隣接していませんし、栃木県・東京都は長野県と隣接していませんが、埼玉県は茨城県・千葉県とも長野県とも隣接しているため、大きくなってしまうのです。このようなことを知っていると、テーブルタグ日本地図で埼玉県が大きくても気にならなくなるのではないかと思います。