ただの地下鉄マップだと思った? ブー、100%コードで書かれている地下鉄マップでしたー

  • author そうこ
  • X
  • Facebook
  • LINE
  • はてな
  • クリップボードにコピー
  • ×
ただの地下鉄マップだと思った? ブー、100%コードで書かれている地下鉄マップでしたー

いや、上の画像は画像なんですけどね。

ただのロンドン地下鉄マップだと思うでしょ、なんの変哲もない。この上の画像はそうですよ、ただのマップの画像です。が、この画像の元の地下鉄マップは画じゃないんです。HTML/ CSS/ JavaScriptを駆使してコードで描かれた地下鉄マップなのです。聞くより見るが早いですね、ネタ元のこのページを見れば、なるほど合点がいくでしょう。

コード地下鉄マップを制作したのは、ウェブ開発者のジョン・ガランティーニ(John Galantini)さん。地図上にあるライン、アイコン、シンボル、その全てをHTMLとCSSを使って描いたのです。制作にかかった時間は120時間、5週間以上もコードを書く日々が続きました。

ついこの間まで「CSS使うと便利だよ」なんて言っていた気がしますが、あっと言う間になんでもできるようになっていますね。本当、高度なコードです。

John Galantini via Sidebar via Verge

そうこ(JAMIE CONDLIFFE 米版