日本地図とテキストを組み合わせた都道府県選択について

Kazuya Takato

Kazuya Takato

前回の記事で、都道府県選択をさせる時の色々な方法を考えたんですが、やっぱり日本地図が背景としてあって、その上にテキストベースのリンクがあるってのが一番使いやすいかなーって思い、作ってみました。

都道府県選択

こんな感じ。

でも、これってHTMLできれいにマークアップするの大変じゃね?テーブル使いまくりだよなぁ・・・って思ってたんですが、そんな事なかった。よくよく考えたら、CSSのpositionで指定してあげれば出来ますね。

HTMLの方はこんな感じ。

<div id="map">

<ul id="hokkaido">
<li><a href="#">北海道</a></li>
</ul>

<ul id="touhoku">
<li><a href="#"><strong>東北</strong></a></li>
<li><a href="#">青森</a></li>
<li><a href="#">岩手</a></li>
<li><a href="#">秋田</a></li>
<li><a href="#">宮城</a></li>
<li><a href="#">山形</a></li>
<li><a href="#">福島</a></li>
</ul>

~省略~

<ul id="okinawa">
<li><a href="#">沖縄</a></li>
</ul>

</div>

で、あとは各地域のID毎に

#map #hokkaido{
position:absolute;
top:25px;
left:630px;
}

こうやって位置を設定してあげれば、オッケー。

これで綺麗に実装できました。

個人的に position:absolute; で何かをするのが嫌いだったのでほとんど使った事が無かったのでぱっと出てきませんでしたが、こういう使い方ならこれからもしていきたいと思いました。

この都道府県選択の問題点

結構わかりやすいとは思うのですが、やはり微妙なポジションの県が探しにくいですね。

東海4県、東海3県の定義や、関西、近畿といった表現など、その辺がバラバラなので、ぱっとみでわかりづらい県もありますね。

で、例えば日本地図を正確に表現して、実際の都道府県の位置をクリックするとそこに飛ぶっていう形をFLASHで作ろうかなとも思ったのですが、それだと面積の小さい県、例えば東京都や神奈川県なんかが押しづらくなっちゃうんですよね。

あと、それだと東北地方を選択っていうのも実装しにくい。

そういう理由もあって、結局上記のような形にとりあえずは落ち着きました。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

1983年生まれ。SIerとしてのキャリアをスタートし、JavaやC#を中心に多岐にわたる開発プロジェクトにエンジニアとして参加。その経験を活かし、LIGを創業。バックエンドおよびフロントエンドエンジニアとしての深い知識と経験をもとに、多様なプロジェクトに従事。2023年7月には社長室室長に就任にし、社内の体制やルールの最適化、AI技術の推進など、経営戦略の一翼を担っています。

このメンバーの記事をもっと読む