[素材] 地図のベクター画像がフリーで利用できるサイト

「Free Vector Maps」は、その名の通り、世界各国の地図のベクター画像素材がフリーで利用できるサイト。日本地図は2種類しかありませんが、アメリカ国内の地図は数多く用意されているので、そういった素材が必要な人にはおすすめです。

地図は、.webp / .webp / .eps / .ai / .pdfのファイル形式でダウンロードすることができ、http://www.freevectormaps.com にリンクを貼ることでフリーで使用することができます。

[icon] 各種デバイスに最適なfaviconを指定する

通常faviconというと、16×16 / 32×32のicoファイルを指定するのみですが、最近はスマートフォンなどの表示に合わせて複数のfaviconを指定する動きが見られます。

その際のfaviconは、それぞれに合わせたサイズのpngファイルを作成してヘッダーにタグを埋め込みます。

ウィンドウの横幅（width）によって、font-size と line-height を変更して表示するという、レスポンシブレイアウトでは有効なJS。

最大フォントサイズと最小フォントサイズを指定できるので、これをキッチリと見やすいサイズで指定しておけば、小さくて文字が読めないといった問題は起きません。

ボタンを押してサイドメニューを表示させるサンプルスクリプト。
メニューがスライドする、メイン画面がスライドする、ドアのようにスライドするなど様々なアニメーションエフェクトが用意されています。

PCからスマートフォンまで、画面サイズにより可変するレスポンシブレイアウトでは、このようなサイドメニューが有効なようで多く見られますね。（PCではメニューを表示して、スマートフォンでは隠してボタンをタップするとメニュー表示するなど）

Text ShadowやBox Shadow、グラディエーションなど、CSS3の効果を見ながらソースを生成できるジェネレーター。デザインがシンプルなのでツールとしてかなり使いやすいのと、あまり見たことの無いレアな効果まで実装されているのが特徴。