日本地図を表示するライブラリ

MOONGIFTで紹介されていて手軽そうなので試してみた。

Prefectly – 使おう!WebFontとCSSを使った日本地図

 

早速、この516.jpのhead内にcssへのリンクを追加してみたが、
他のcssと喧嘩をしてしまい表示がおかしくなってしまったので
サンプルとして別のディレクトリにHTMLをあげたのが下記URL。

http://516.jp/sample/prefectly-master/prefectly.html

cssで色分けした日本地図

色分けはcssに記述されている。

 

mg(宮城)が#e50000(赤)で
cb(千葉)とかfs(福島)が#e56000(オレンジ)みたいな感じなので
cssを編集すれば好きな範囲を好きな色に塗りつぶす事が可能です。

またHTMLに、liタグで47都道府県分を記述すると日本地図になるが、
これも部分的に記述をする事で、四国だけ表示とかも可能である。

 

問題はulとliを使うので、前述した既存cssとの競合であるが
面白いので機会があれば使ってみたと思う。