Web制作に必要な様々なリソースをまとめたサイト。あらゆるカテゴリの情報リソースやツール類がまとめられてます。各情報はカテゴリに分けて整理されており、例えば「Coding」→「Code Editor」と進めば、Webコーディングにおけるツール類（この場合は主にローカルアプリケーション）をまとめて見る事ができます。あとはその中から自分に必要なツールを選ぶだけ。Webの制作って以前に比べるとこうした既存のツールを組み合わせて使う機会がグっと増えたので、日常的に使うツールがまだ固まってない人なんかにはこういうサイトは便利かもしれません。新しいツールの発掘にもイイですね。
Font Awesomeのアイコンを、透過PNG形式で書きだしてくれるサイト。使い方は簡単で、「fa-」から始まるFont Awesomeのアイコンネームを入れるだけ。その際、サイズとカラーの指定も併せて行えます。入力が終わったら「Generate Icon」を押すと、「Download Icon」ボタンが出現し、ダウンロードできます。アイコンを画像として使いたい時に便利ですね。
Webページにおいて何かをセンタリングさせたい時に役立つCSSジェネレーター。コード生成はウィザード形式で進めます。まずはセンタリングさせたい対象がテキストなのかDivなのか。ようするにインラインかブロックかって話ですね。次に親要素となるコンテナーの大きさについて。幅と高さが決まってるかどうかを聞かれます。決まってないようだったらUnknownで。最後に水平方向と垂直方向それぞれどこに位置させたいかを決めます。例えば水平方向にはセンターだけど垂直方向では上寄りなど。諸々決まったら「Generate Code」ボタンでコードが生成されます。特に垂直方向のセンタリングってWebだとめんどいっていうか、ちょっとコツがいるので、こういうジェネレーターは便利ですね。
シンプルな動きと装飾のModal表示用の、jQueryプラグイン。いわゆるLightbox亜種ですね。レスポンシブレイアウトにも対応しているようです。クリックで表示され、✕ボタン押下やescキーで消えます。個人的にはescキーが効くのが好印象。複数画像のスライドショーにも対応しています。作りがシンプルで挙動も品が良いので、使い勝手が良さそうです。
Web制作に役立つ様々なリソースを、ジャンルごとに分けて紹介するサイト。Webフォント、アイコンフォント、イメージ加工や圧縮ツール、ワイヤーフレームツール、写真素材、エディタ、フレームワーク、JSライブラリ、CMS、ホスティングサービスやドメイン取得、アナリティクス、Chromeエクステンションなど。またそれ以外にもマネージメントやマーケティング、eラーニングサイト、制作系のニュースサイトなども紹介されています。いやナイスですねこういうまとめ。「どうすりゃいいかを人に聞く前にまずはこれを見ろ」とか言うて人に教えたいです。
レスポンシブレイアウトで作られたサイトの確認に使える、ブラウザウィンドウのリサイザー。実際にはページ内の表示エリアだけが大きくなったり小さくなったりするので、ブラウザそのもののウィンドウサイズは変わりません。ディスプレイサイズがプリセットされている端末の種類も多く、スマホだけでなくタブレットも結構な数揃ってます。あとポートレイト（縦）とランドスケープ（横）が切り替えられる点もナイス。最近だとスマホ対応するのが当たり前になってるので、動作確認用に便利そうです。
ブラウザウィンドウの縦幅いっぱいに背景を表示し、アンカーリンクによって緩やかにスクロールするエフェクト。こちらからデモページを見る事ができます。最近じゃAppleとかもよく使う手法ですね。JSライブラリにはjQueryが使われているようです。ソースコード落としてみて分かったんですが、これあいぽんの部分透過PNGじゃないんですね。スクロールによってあいぽんディスプレイ内の情報も変化してますが、なるほどこういう手法でやってんのねーと感心しました。印象的なLP作る際なんかに使えそうです。
各種SNS内で使われる画像のサイズをまとめたインフォグラフィック。Twitter, Youtube, Facebook, Google+, Instagram, Pinterest, LinkedInが紹介されてます。これ系のまとめでPinterestとかInstagramが紹介されているのは珍しい気がします。こうして見ると、FacebookとLinkedInは結構中途半端なサイズでレイアウトされてんだなーと思います。逆にGoogle系のサービスはキリのいい数値で作られてる印象です。SNS向けのビジュアル製作時に役立ちそうです。
