ITエンジニア/デザイナ向けにオープンソースを毎日紹介

誰かが作ってくれると思っていた!

Statelyというソフトウェアはアメリカの各州をWebFontとして作成し、スタイルシートで呼び出せるようにしたソフトウェアです。その地域全体を表現したいと言った時に便利なソフトウェアです。

アメリカがあるということは日本も各都道府県に分かれたWebFontがあればきっと便利な訳です。そんな夢を実現してくれたのがPrefectlyです。

表示例。
表示例。

使い方は簡単で、まずはスタイルシートを読み込みます。

<link rel="stylesheet" href="assets/css/prefectly.css">

後は以下のようなHTMLの記述をします。

<ul class="prefectly" id="plain">
    <li data-pref="ac" class="ac">A</li>
    <li data-pref="am" class="am">B</li>
    :
    <li data-pref="ym" class="ym">t</li>
    <li data-pref="yn" class="yn">u</li>
</ul>

色分けも簡単。
色分けも簡単。

フォントはこのようになっています。
フォントはこのようになっています。

各都道府県は全て表示した時に日本地図ができるように配置されています。さらにyとzに県境ありなしの日本全体の地図があります。フォントサイズはもちろん、色も自由に決められるのが大きなメリットと言えそうです。

都道府県別のデータを色分けして表示するのに使ったり、ある都道府県だけを強調して表示したりするのも簡単です。地図表示を行う時には注目のライブラリです。

PrefectlyはWebFont/CSSのオープンソース・ソフトウェア(MIT License)です。

Prefectly | deform

deform/prefectly

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2