
Webデザイナー向け


CSSによる三角形をジェネレートできる・「CSS triangle generator」

デバイスに応じたMedia Queriesのコードをコピペ出来るスニペット一覧表・「Media Query Snippets」

PNGやPSDファイルとしてエクスポートできるグリッド生成ツール・「Modular Grid Pattern」

ベクターオブジェクトをソースコードに変換するIllustratorの拡張・「Drawscript」

学生によって作成された作品のみを掲載しているWebギャラリー・「Student Show」

猫の画像をダミー画像として使える・「{placekitten}」

Sass用のカラー調整Webツール・「SassMe」

デバイス画像のモニターにサイトを表示させてレスポンシブ対応状態を確認する・「Am I Responsive?」

モバイルファーストなCSSフレームワーク・「Blok Grid System」

CSSタイポグラフィの使用例をコレクションしている・「Typespiration」

動作も軽く使いやすいモックアップ作成ツール・「Moqups」

レスポンシブ且つグリッドなレイアウト生成ジェネレーター・「gridpak」

面倒な作業のみをカバーしたシンプルなCSSフレームワーク・「inuit.css」

PhotoshopのレイヤースタイルをCSS3に変換する・「CSS3Ps」

4つのCSSツールを1つのサイトに集約した・「CSSmatic」

レスポンシブWebデザインのレイアウトチェックツール・「The Responsinator」

レスポンシブWebデザイン対応のテンプレ生成ジェネレーター・「Responsify」

画像をDataURIスキームに変換する・「Data URI Generator」

画面サイズごとの表示を確認出来る・「Screenqueri.es」

色を指定したら、その色に関連した色合いを抽出してくれる・「colllor」
