Tools & Resources

オンラインでシンプルなダイアグラムを生成出来る・「Graphity Diagram Editor」

CSS3を使ったエレメントを簡単に作成出来るChrome拡張・「CSS-SHACK」

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

Ads

一度だけダウンロードできるファイル転送サービス・「JustBeamIt」

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

Font Awesomeのアイコンを利用したボタンを作成出来る・「CSS3Butt.in」

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

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

transition-timing-functionのcubic-bezier関数を動作を見ながら設定出来る・「Visualize and manipulate CSS transition functions」

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

様々なソーシャルメディアサイト内で使用するアイコンや背景を作成・「Social Media Image Maker」

動作を確認しながらCSS3のkeyframeを使ったアニメーションを作成・「Stylie」

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

JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」

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

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

シンプルなコードスニペット共有サービス・「Code Pad」

オン/オフの切り替えスイッチをスタイル・「On/Off Flipswitch HTML5/CSS3 Generator」

画像をドラッグ&ドロップでアップロードし、DataスキームURIに変換する・「Duri.me」

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

オンラインのMarkdownエディタ・「Dillinger」

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