質問: いつもお世話になります。 勉強中のフロントエンジニアです。よろしくお願い申し上げます。 ### Prefectlyというオープンソース http://deform.jp/prefectly/ 上記ついて、いくつが疑問があります。 ### 【質問1】仕組みについて トップページの仕組みを読んだのですが、よく理解できず・・・・・ それぞれの都道府県はほかの都道府県に合うように位置とサイズが調整されていて とあるので、そのようなプログラム該当ファイルも探せずじまいです。 ### 【質問2】この仕組みを使うメリット なぜわざわざフォントまで制作して、このように表示させるようにしたか、よくわかりません。 ### 補足:ダウンロードで取得できるファイル ・css/prefectly.css ・font/prefectly-webfont.eot ・font/prefectly-webfont.svg ・font/prefectly-webfont.ttf ・font/prefectly-webfont.woff ・sass/_screen.scss ・sass/_setup.scss ・sass/prefectly.scss いつも勉強させていただいています、 この度もどうぞよろしくお願い申し上げます。
回答: > > 仕組みについて > > > フォント1字に都道府県をひとつずつ格納しています。それを47個重ねて表示しているだけです。 イメージとしては、「±」を表現するために「+」「_」を重ねるような感じです。 (Chromeの開発者ツールなどでHTMLの構造を見てみれば解ると思います) > > この仕組みを使うメリット > > > 日本地図の色分けが HTML でも CSS でも JavaScript でも操作がしやすく、フォントなので拡大縮小が容易で綺麗にできる、またフォントなので対応ブラウザが **IE4+** という脅威の対応力も魅力です。 色分けだけ(Google Chart APIなど)、拡大縮小対応(SVGなど)だけ、などは過去にもありましたが、コードの知識や作法が特殊な部分もあったため、こういうライブラリを作られたのではないでしょうか。