[Code Snipet] 11 Websites for Code Snippets – コードスニペットを扱うサイトまとめ
Web制作で使えるコードスニペットを紹介するサイトをまとめた記事。CSSやHTML、Javascript、PHPなどの各種コードスニペットが紹介されてます。コーダーやプログラマーの人にオススメ。CSSDeckあたりは自分もよく見ます。
Tag Archives: Javascript
[Web Design] Codrops – Web制作に使えるコードスニペットや、作例を紹介するブログ
Web制作で使えるコードスニペットやクールな作例、デザイン事例などを紹介するブログ。というかココ超有名なので知ってる人は多いと思いますが、見どころは定期的に発行されるCollectiveというまとめ記事（ちょうど新しいのが公開されてました）。特に使えそうなコードやデザイン事例などについてピンポイントでまとめられてます。紹介されている内容の質が高く、見やすく整理されているので、デザイナーの方のネタ帳にオススメです。
[Material] The Toolbox – Webデザインに使えるツール類を集めたサイト
Web制作の現場で使える各種ツールをまとめたサイト。JSやCSS、オンラインジェネレーター、アイコン素材、テクスチャ、コーディング向けスニペットなど色々あります。特にこれといってジャンルを限定していない分雑然とはしてるけど、なかなか役に立ちそうなものが多いので紹介。まぁウチのブログもやってる事は似たようなもんなのですが、なんつーか素材としての見せ方がウマいなーと思いました。
[Web Design] EXPERIMENTAL PAGE LAYOUT INSPIRED BY FLIPBOARD – Webで表現するFlipboardっぽいページ遷移
[Web Design] Datavisualization.ch Selected Tools – Webでデータを可視化するためのツールギャラリー
Web上でデータを可視化するための各種ツールがまとめられたサイト。csvなどのデータの集合体を分かりやすい形で動的にグラフ化してくれるので、データに動きのあるサイト制作に使えます。よくある棒グラフや折れ線グラフはもちろん、分布図や地図情報と組み合わせたもの、なんだかよく分からないグラフなど色々あります。サムネールクリックでそのグラフが何の技術で描画されているのか（だいたいはJSです）が分かり、リンク先からDLする事ができます。ニッチかもしんないけどナイスなまとめ。
[Javascript, CSS3] 3D Image Transitions – JSとCSS3で作られた立体的なとトランジションのスライダー
JavascriptとCSS3で作られた、立体的なトランジションのスライダー。デモページはこちら。デモページ下部にあるボタンを押すとイメージが切り替わり、ボタンごとに異なるトランジションが与えられてます。特に「Explode」の動きは他で見たことのないなかなかかっちょいいトランジションで、「おおっ」ってなります。逆にその他はわりと見覚えのある動きではありますが。ソースコード一式もDLできます。
[Web Design] Creating Retina Images for Your Website – サイト内の画像をRetina対応させる方法
サイト内の画像ファイルをRetina対応させる方法についての記事。まずはアイコンの高解像度版を用意して、さらにサイト内のイメージの対応の仕方についても解説されてます。高解像度版の画像には“@2x”を付けるというのはサイト制作でも通例となりそうですね。画像の振り分けについてはMediaQueriesで対応してるようです。ちなみにウチのブログではiPadからのアクセスが全体の4%弱あります。これって結構多いよなー。まぁ4%の中の何%がiPad 3rdなのかは調べてませんが、Retina対応できるもんならしたいところ。
