前回の記事で、都道府県選択をさせる時の色々な方法を考えたんですが、やっぱり日本地図が背景としてあって、その上にテキストベースのリンクがあるってのが一番使いやすいかなーって思い、作ってみました。
こんな感じ。
でも、これって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; で何かをするのが嫌いだったのでほとんど使った事が無かったのでぱっと出てきませんでしたが、こういう使い方ならこれからもしていきたいと思いました。
この都道府県選択の問題点
結構わかりやすいとは思うのですが、やはり微妙なポジションの県が探しにくいですね。
東海４県、東海３県の定義や、関西、近畿といった表現など、その辺がバラバラなので、ぱっとみでわかりづらい県もありますね。
で、例えば日本地図を正確に表現して、実際の都道府県の位置をクリックするとそこに飛ぶっていう形をFLASHで作ろうかなとも思ったのですが、それだと面積の小さい県、例えば東京都や神奈川県なんかが押しづらくなっちゃうんですよね。
あと、それだと東北地方を選択っていうのも実装しにくい。
そういう理由もあって、結局上記のような形にとりあえずは落ち着きました。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
