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

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

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

 

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

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

cssで色分けした日本地図

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

#eq .mg {
color: #e50000;
}
#eq .cb,
#eq .fs,
#eq .gm,
#eq .ig,
#eq .it,
#eq .st,
#eq .tg {
color: #e56000;
}

 

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

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

 

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です