Resource - Archives

女性や子供の為に立ち上げられたWeb制作技術を学ぶ為のリソースを提供するプロジェクト・「Ladies Learning Code」

Ladies Learning Code Ladies Learning Codeは女性やキッズ向けのWeb制作を学ぶためのリソースを提供する、非営利団体の立ち上げたプロジェクトサイトです。WordPressやHTML5、Photos...

商用でも無料で利用可能なHD動画を配布する・「Distill」

Distill Distillは商用利用でも無料のHD動画を共有、配布するWebサービスです。やや短めではありますが映像のクオリティは高そうです。まだ数は多くはないので今後増えてくれるよう期待したい所ですね。所謂写真素材の配布サイト同...

様々なJavaScriptライブラリやプラグインの使い方をまとめている・「Js Tutorial」

Js Tutorial Js Tutorialは配布されているJSライブラリやjQuery等のプラグインの使い方をまとめているWebサイトです。と言っても、配布元で書かれているオプションや簡単な解説のみなのでチュートリアルとはあまり言...
Ads

SVGで書かれたローディングアイコン集・「SVG Loaders」

SVG Loaders SVG LoadersはSVGで書かれたローディングアニメーションアイコンのセットです。どれもシンプルで使いやすそうです。早くブラウザのサポートが息とど置いて主流になるといいですねー。Githubにてソースが公...

Webサイトの様々なヘルプコンテンツを追加出来るスクリプト・「FAQtoid」

FAQtoid FAQtoidはWebサイトに様々なヘルプ機能を追加するためのスクリプトです。jQueryに依存しています。動画や開閉式のFAQ、送信フォームやWebサイトツアーを、モーダルウィンドウ内に複数収めることが可能で、モーダ...

ブラウザで使えるモダンデザインなインタラクションデザインツール・「Plexi」

Plexi Plexiはブラウザで動作するモダンデザインなUIのインタラクションデザインツールです。シンプルで分かりやすい印象です。プロトタイプを作成出来る・・・はずなんですが、Windowsでは動作しませんでした。OSXもWinもサ...

SASSとJekyllで構築されたフロントエンド開発フレームワーク・「Muffin」

Muffin MuffinはSASSとJekyllで構築されたフロントエンド開発のためのテンプレートです。インストール後すぐに開発作業を始められるような設計を目指したみたい。SVGアイコンやTwitter Bootstrapもサポート...

Web制作の際に作成するフローチャートやワイヤーフレームの為の素材集・「UI TILES」

UI TILES UI TILESはWeb制作プロジェクトの際に作成されるフローチャートやサイトマップ、ワイヤーフレーム作成時に使える素材のキットです。フォーマットもPSDやAI、Sketchなどが用意されています。シンプルで使いやす...

任意の画像をアップロードし、PCモニター画像に合成してモックアップを作成してくれる・「Magic Mockups」

Magic Mockups Magic Mockupsは任意の画像を、予め用意されているPCのモニター画像に合成してくれるジェネレーターです。以前ご紹介したPlaceItと同じようなサービスになりますが、Magic Mockupsは合...

ビジネス用Webアプリ構築の為のCSSフレームワーク・「Flakes」

Flakes Flakesはビジネス用のWebアプリ構築の為に公開されたCSS/JavaScriptフレームワークです。RWDやSASSにも対応済み。ダッシュボードに必要なUIやチェックボックス、フィルタ機能付きのテーブルなどのコンポ...

クレジットカードやPayPalなどの決済系のSVGアイコンフォントのセット・「PaymentFont」

PaymentFont PaymentFontは決済周りでよく使われるSVGアイコンフォントのセットです。基本的に海外サービスのアイコンが多いのですが円のアイコンやクレジットカードなどは使えるので備忘録として。フォントはOFL、CSS...

jsfiddleライクにWebGLの動作テストが可能なOSS・「WebGL playground」

WebGL playground WebGL playgroundはjsfiddleライクにブラウザ上でWebGLの動作テストが可能なツールです。オープンソースとしてGithubでもソースが公開されています。コード編集すればインタラク...

Gistで書いたコードをスライド表示にする・「GistDeck」

GistDeck GistDeckはGistのコードをスライドとして表示してくれるツール。方法も簡単で、gistのサブドメインを変えるだけ。任意のgistのページのURLのgist.github.com/~の箇所をgistdeck.g...

SVGアイコンをアニメーションエフェクト付きで切り替える為のスクリプト・「SVG Morpheus」

SVG Morpheus SVG MorpheusはSVGアイコンから別のSVGアイコンへモーフィングさせる為のスクリプトです。非依存型で単体で動作してくれます。導入も楽そう。オプションやらサポートされたイージングの種類は本サイトにて...

Markdown記法でリアルタイムプレビューを可能にする・「Livedown」

Livedown Livedownは各エディタでMarkdown記法を使う際にリアルタイムプレブビュー機能を付加するプラグイン。VimやSublime text、Emacsなどのプラグインが用意されています。Markdownを書く機会...

AngularJSとPHPで作られたシングルページ専用のCMS・「Cosmo」

Cosmo CosmoはAngularJSとPHPで書かれたオープンソースのCMSです。シングルページ専用との事。モバイルファーストでソーシャルメディアフレンドリーな設計になっているそうです。フロントエンド側で編集可能にする事でデバイ...

正規表現のコードを図に可視化する・「Regulex」

Regulex Regulexは書いた正規表現のコードを図に可視化してくれるツールです。書いたコードがどのように動作しているかが把握しやすいので正規表現の勉強に良いかも。MITライセンスの元でオープンソースとしてGithubでも公開さ...

行単位でCSSを適応させるスクリプト・「LINING.JS」

LINING.JS LINING.JSは行単位でCSSを適応させる為のスクリプトです。非依存型で単体で動作してくれます。カスタムデータ属性を使って1行毎に任意のスタイルを作れる、みたいなやつ。上記のスクショは表示時に、1行毎にスライド...

​​Dropboxに置いているCSVやGoogleスプレッドシートのデータをグラフ化するOSS・「CHARTED」

CHARTED CHARTEDは​​Dropboxに置いたCSVやGoogleスプレッドシートのデータを元にグラフに可視化するツールです。OSSとしてGithubでもソースコードが公開されています。Mediumのスタッフ作らしいです。...

任意のWebサイトのCSSを解析し、ステータスを表示してくれるオープンソースのソフトウェア・「CSS Stats」

CSS Stats CSS Statsは任意のWebサイトのCSSを解析してステータスを表示してくれるツールです。OSSとしてソースコードも公開されています。CSSのサイズや使用されているプロパティやセレクタの数、カラーコード、フォン...

マテリアルデザインを取り入れたレスポンシブWebデザイン対応のCSSフレームワーク・「Materialize」

Materialize Materializeはマテリアルデザインを取り入れたRWD対応のCSSをフレームワークです。Sass対応で、各種コンポーネントも揃っていました。ベーシックで良いんじゃないでしょうか。ライセンスはMITとの事。...

モバイルやモダンブラウザ向けに、jQueryやzepto.jsの代替として作られた軽量ライブラリ・「laroux.js」

laroux.js laroux.jsはモバイルやモダンブラウザ向けに作られたjQuery、zepto.jsの代替ライブラリです。コアは非圧縮でも2.8kbと軽量で、Ajaxやアニメーション、データの取得等、やりたい事があればその都度...
Ads