deform

Prefectly

The simple map font

Prefectlyとは?

PrefectlyはHTMLとCSSを使って日本地図を簡単に表示できるシンボルフォントで、アメリカの州をシンボルフォントにしたStatelyをベースに作られています。各都道府県はCSSで個別にスタイルがつけられるのでシンプルなビジュアライゼーションに利用できます。そしてもちろん、ベクターデータであるフォントなので自由にサイズを変更することができます。

どうゆう仕組み?

都道府県それぞれが一つのグリフに割り当ててあります。それぞれの都道府県はほかの都道府県に合うように位置とサイズが調整されていて、それらが重なって表示されることで全体の地図を形作ります。

大文字のAからZと小文字のaからuまでの文字に47都道府県、それらとは別に、yに県境なしの日本地図、zに県境ありの日本地図が割り振ってあります。

モダンブラウザでは都道府県の略記によるリガチャ(合字)を使用できます。例えば、"st"と入力すれば埼玉県が、"hk"なら北海道が表示されます。加えて、"jp"のリガチャでは日本地図が表示されます。

使い方

Prefectlyをダウンロードしたら、ベースになるCSSやウェブフォントファイル一式をあなたのプロジェクトフォルダに追加して下さい。

まず、表示するページの<head>prefectly.cssへのリンクを追加します、

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

サンプルコードをページに追加します、

<ul class="prefectly">
  <li data-pref="ac" class="ac">A</li>
  <li data-pref="am" class="am">B</li>
  <li data-pref="at" class="at">C</li>
  <li data-pref="cb" class="cb">D</li>
  <li data-pref="eh" class="eh">E</li>
   ・
   ・
   ・
  <li data-pref="ym" class="ym">t</li>
  <li data-pref="yn" class="yn">u</li>
</ul>

フォントサイズとベースの色を使っているCSSに記述、
(その際、widthfont-sizeには同じ値を設定するようにしてください)

.prefectly{
  width: 300px; /* widthとfont-sizeは同じ値で */
  font-size: 300px;
  color: #CCCCCC;
}

それぞれの都道府県のスタイルを個別に設定、

.prefectly .ac,
.prefectly .hk,
.prefectly .st{
  color: #FF0000;
}

といった感じです。
ここだけの話し、prefectly.ttfをPCにインストールすれば、テキストをタイプするだけで簡単に日本地図が!、なんて使い方もできます。まずはダウンロードを。

Download  Github

サンプル

Region

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u

I've visited before

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u

3.11 Earthquake Intensity

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u