CSSで変更できるカーソルとコードの一覧・「CSS Cursor」
CSS Cursor CSS CursorはCSSで変更できるカーソルとそのプロパティ、対応ブラウザの一覧ページです。思いの外しらないものもあったので備忘録的に。HTML製のWebアプリも増えているので以前よりも需要は高くなっているか...
Resource - Webデザイナー向け
商用でも利用可能なシンプルなデザインのロゴを配布する・「logodust.com」
logodust.com logodust.comは商用でも利用可能なシンプルデザインなロゴデータを配布するWebサイトです。と言っても、配るために作成されたものではなく、過去のプロジェクトでボツとなったロゴデザインをこのまま捨てるの...
gistやYoutube、Vine、TwitterやGoogle Mapなど、様々なサービスをembed出来る・「embed.js」
embed.js embed.jsは様々なサービスの埋め込みを容易に行えるようにする為のスクリプトです。テキストから自動で文字列を解析し、embedしてくれる、というもの。例えばGistやYoutubeなら、URLを貼るだけで勝手に埋...
Flexboxのルールをライブプレビューでテスト、確認出来る・「Test CSS Flexbox Rules Live」
Test CSS Flexbox Rules Live Test CSS Flexbox Rules LiveはFlexboxのルールを学べるツールです。各プロパティの指示でどうレイアウトが変化するかをライブプレビューで確認出来ますの...
Web制作時に役に立つ（かもしれない）ツールを大量に公開している・「Richard’s Toolbox」
Richard's Toolbox Richard's ToolboxはWeb制作時に役に立ちそうなツールを大量に公開しているWebサイトです。Skypeや各SNSでの表示確認ツール、Webサイトのロードテスター、Whoisチェックツ...
アニメーションのピクセルアートを作成できるオンラインドローツール・「Draw!」
Draw! Draw!はアニメーションするピクセルアートを作成出来るドローツールです。サイズは16x16で、よくあるピクセルアートエディタにレイヤー機能が付いた、みたいなもの。2枚目からは右下部の+ボタン（add frame）でレイヤ...
JavaScriptで作られたSVG背景パターン作成ツール・「Dynamic SVG Background Pattern Maker」
Dynamic SVG Background Pattern Maker See the Pen Dynamic SVG Background Pattern Maker by Dudley Storey (@dudleystorey) ...
ブラウザでSwiftのコードを実行、動作テスト出来る・「IBM Swift Sandbox」
IBM Swift Sandbox IBM Swift SandboxはWeb上でSwiftのコードを実行出来るツールです。jsfiddleみたいな使い方でいいので簡単ですね。名前にもあるようにIBMのSwift関連のプロジェクトの内...
年表などのタイムラインUIを構築する為のライブラリ・「Labella.js」
Labella.js Labella.jsはタイムライン作成ライブラリです。上図のようなライン上にポイントとラベルを実装する事が出来る、というもの。ラベルは重なること無く他のラベルを避けてレイアウトしてくれます。なかなか良いのでは。ラ...
任意のWebサイトのCSSから簡易的なスタイルガイドを作成するChromeエクステンション・「SNATCHR」
SNATCHR SNATCHRは任意のWebサイトのCSSをパースして簡易的なスタイルガイドを作成するChrome拡張です。背景カラー、テキストカラー、見出しに使われているフォントファミリーやサイズスタイルを割り出してスタイルガイドの...
アカウント登録不要のシンプルなファイル共有サービス・「dewdrop.io」
dewdrop.io dewdrop.ioはユーザー登録不要のファイル共有サービスです。ドラッグ＆ドロップでアップロードが可能で時間も高速です。アップすれば共有の為のURLが発行されるので、それを相手に教えればいいだけ、というもの。た...
cssのflexboxを遊びながら学べるツール・「FLEXBOX FROGGY」
FLEXBOX FROGGY FLEXBOX FROGGYはflexboxをゲームで遊びながら学べるツールです。カエルをflexboxプロパティを使用して葉の上に持っていければOKというシンプルなもの。24レベルまで用意されています。...
SVGで世界地図を作成する為のスクリプト・「World Map Generator」
World Map Generator World Map GeneratorはSVGで世界地図を作成する際にサポートしてくれるスクリプトです。jQueryに依存しています。各国へのリンクや、その地域のタイムゾーンを取得する事が出来る...
商用でも利用可能な紙のテクスチャを多数配布する国産サイト・「Paper-co」
Paper-co class="resource_links" Paper-coは紙のテクスチャを配布する国産のWebサイトです。商用でも無料利用可能で数も相当揃っている印象でした。pngとjpgが用意されています。詳しいライセンスは...
Flexboxを使ったCSSグリッドシステム・「Gridlex」
Gridlex GridlexはFlexboxを使ったシンプルなCSSグリッドシステムです。親要素と子要素に特定のclassを追加して利用するみたいです。非常に簡単なものですが、シンプル故にカスタマイズしやすいかも。カラム数は.gri...
embedにも対応しているストックフォトサイト・「Visual Hunt」
Visual Hunt Visual Huntはembed可能なストックフォトサイトです。配布されている写真素材の多くはCC0で商用でも自由に利用する事が出来るだけでなく、本サイトでホスティングされている素材を直接利用する事も出来ます...
Sketchでスマフォのプロトタイピングを可能にするプラグイン・「Silver」
Silver Silverはスマフォのプロトタイプ作成をSketchで出来るようにする為のプラグインです。機能を見る限り、なかなか高機能なプラグインのようですね。作成したプロトタイプは作成途中でも使用中のPCにモバイルデバイスを繋げて...
タイポグラフィを愛してやまない人の為の写真投稿型SNS・「Fontli」
Fontli Fontliはタイポグラフィを愛する人のための写真投稿型コミュニティサイトです。typoholics（タイポグラフィ狂）の集まるSNSで、ふと見かけた良いタイポグラフィを写真に撮って投稿して共有しあうのが目的だそう。基本...
Semantic UIユーザー向けのリアルタイムプレビューツール・「SemanticEdit」
SemanticEdit SemanticEditはSemantic UIを使用している開発者向けのプレビューツールです。HTMLを書けばSemantic UIのスタイルが適応された状態のプレビューをリアルタイムで確認する事が出来ます...
OS XのFinderライクな階層データ表示の為のスクリプト・「Finder.js」
Finder.js Finder.jsはMac OSのFinderのカラムビューライクな階層データ表示用スクリプトです。上記のようなファイルマネージャのUIを実装する事ができる、というもの。依存関係もなくサイズも軽量との事。ライセンス...
線のみで作られたシンプルなラインアイコンフォント・「Lightwing」
Lightwing Lightwingは線で作られたシンプルなアイコンフォントです。60程度ですが汎用的なアイコンは揃っている印象です。フォントだけでなくAIファイルも同梱されていますのでSVGで使う事も出来そうです。が、ライセンスの...
動作軽量で美しいインターフェースのWindows用のフォントマネージャ・「FontBase」
FontBase 綺麗なインターフェースで動作軽量なフリーのフォントマネージャ、FontBaseのご紹介。Win用のソフトウェアになります。起動も早く、それなりに機能も充実していて使いやすい印象でした。対応OSはWindows7以上と...