Resource - Archives

Twitter Bootstrapベースの管理画面デザインテンプレート・「TemplateVamp」

TemplateVamp TemplateVampはTwitter Bootstrapを使ったWebアプリの管理画面デザインテンプレートで、無料で配布されています。動作デモをみた感じでは、かなり見やすく使いやすい印象でした。カスタマイ...

RWDのワイヤーフレームを作成出来る・「Responsive Wireframes」

Responsive Wireframes Responsive WireframesはRWD向けのWebサイトのワイヤーフレームを作成出来る、というツール。画面サイズを見ながらレイアウトを作ることが出来ます。凝ったことは出来ませんが...

ttfフォントをWebフォント化するジェネレーター・「@font-face Generator」

@font-face Generator @font-face Generatorはオンライン上でttfフォントをWebフォントに対応可能にしてくれるジェネレーターです。アップロードすればWebフォントに対応できるファイルを作成し、パ...
Ads

シンプルなオンラインJSONエディタ・「JSONedit」

JSONedit JSONeditはシンプルなJSONエディタです。書き込むとリアルタイムに反映、ツリー形式で確認する事が出来ます。また、削除や入れ替えも簡単に出来る様になっていますよ。jQueryとangular.jsで作られている...

多数のコンポーネントが用意されたWebUIフレームワーク・「Semantic UI」

Semantic UI Semantic UIは多数のコンポーネントが用意されたWeb UIフレームワークです。現在32種類のコンポーネントがあり、今後も増えるそうです。BOOTSTRAPを意識して作られているのか、classの使い方...

音声による入力を可能にするライブラリ・「annyang」

annyang annyangは音声を認識し、声での入力を可能にする軽量スクリプトです。Web Speech APIを利用しています。Web Speech API で遊んでみたという記事の動作デモにあるようなコンテンツの作成に一役買っ...

DropboxやGist等にも投稿可能なオンラインのMarkdownエディタ・「StackEdit」

StackEdit StackEditはオンライン上のMarkdownエディタです。DropboxやGist、TumblrやWordPress、Google Driveへの投稿も可能となっています。OSSとしてGithubでもソースが...

CSS3を手軽に試せるジェネレーター・「CREATE CSS3」

CREATE CSS3 CREATE CSS3は手軽にCSS3を試せるツールです。数値を入力すると、要素に反映され、コードも表示してくれます。シンプルなのでちょっと試したい、という時は便利かもしれません。 CREATE CSS3

:nth-childの使い方を分かりやすく教えてくれる・「Master of the :nth-child」

Master of the :nth-child Master of the :nth-childは:nth-child擬似クラスの使い方を視覚的に分かりやすく教えてくれるWebサイトです。覚えれば何てことは無いんですけど、少し理解し...

iOS 7のルック&フィールを持ったモバイルWebアプリ向けUIフレームワーク・「ChocolateChip-UI」

ChocolateChip-UI ChocolateChip-UIはiOS 7のルック&フィールを持つモバイルWebアプリケーション向けUIフレームワークです。多数のコンポーネントが用意されています。本フレームワークは以前より開発が進...

シンプルで軽量なレスポンシブWebデザイン対応CSSフレームワーク・「KNACSS」

KNACSS KNACSSはシンプルで軽量なCSSフレームワーク。レスポンシブWebデザインにも対応しています。チュートリアルページを確認する限りでは素敵な性能のフレームワークなのですが、CC-BYなので使いどころはある程度限られるか...

UIコンポーネントを大量に収集、検索出来る・「UIBox」

UIBox UIBoxはHTMLやCSS、JavaScriptによるUIコンポーネントを大量に収集、検索出来るWebサイトです。タグやキーワードで探せて、ダウンロードページへのリンクや詳細、ライセンスも記載されています。覚えておくと、...

スマフォアプリのUIでクールなデザインを集めたギャラリー・「Inspired UI」

Inspired UI Inspired UIはiOSやAndroidのアプリでクールなUIのデザインを集めたWebサイトです。Tumblrで作ってるみたいですがリブログは出来ないようにしてるみたいですね。かなりの数を揃えているようで...

Sublime Text 2のテーマをまとめている・「Colorsublime」

Colorsublime ColorsublimeはSublime Text 2のデザインテーマを纏めているWebサイトです。ダウンロードページへのリンクとプレビューが用意されており、プレビューでは実際に打って試すことが出来ます。導入...

コードスニペットを管理する為のシンプルなCMS・「codejab」

codejab codejabはコードスニペットを管理する為のシンプルなCMS。オープンソースとして公開されています。たまに見かけるスニペットの共有サイトを作れる、みたいなイメージでしょうか。Embed機能も付いてるのはちょっと素敵か...

ブラウザ上でCSSによる3Dを作れるエディタ・「Tridiv」

Tridiv Tridivはブラウザ上でCSSによる3Dシェイプを作成出来るエディタ。予め用意された複数のシェイプを使って3Dコンテンツを作ることが出来ます。面に画像を使う事も出来ますが、こちらはURLを指定する形になるみたい。 ...

入力したHTMLのclassやidを元にCSSの雛形を作る・「extractCSS」

extractCSS extractCSSは入力されたHTMLのclassやidを元にCSSを作るWebツール。Githubにてソースも公開されています。Bear CSSと同じようなツールですが、extractCSSは作成時にclas...

モバイルフレンドリーなWebアプリの為のUIコンポーネント・「Brick」

Brick BrickはモバイルフレンドリーなWebアプリの為に作られたUIコンポーネント集です。mozillaから提供されているみたいですね。同じくmozilla提供のX-Tagが使われています。カレンダーやデイトピッカー、スライダ...

Google Map向けのアイコンフォント・「Map Icons」

Map Icons Map IconsはGoogle Map向けのアイコンフォントです。地図によく使用される施設等を明示するアイコンをフォントとして提供してくれています。ライセンスはOFLとの事です。 Map Icons

Chrome Developer ToolsやSublime Text 2のテーマをギャラリーにしている・「devthemez」

devthemez devthemezはChromeのデベロッパーツールやSublime Text2のテーマをギャラリーにしているWebサイトです。毎日のように見る画面なので出来る限り見やすく読みやすいテーマにしたい所ですね。 ...

商用でも使えるシンプルなアイコンを大量に配布する・「Simple Icons」

Simple Icons Simple Iconsはシンプルなアイコンを大量に配布するWebサイトです。商用でも無料で利用出来るとの事。PNGはサイズも64 x 64、128 x 128、256 x 256、512 x 512などが揃...

デバイス別にレイアウトを作れるレスポンシブWebデザイン用CSS作成ツール・「Responsive Web Css」

Responsive Web Css Responsive Web Cssは、iPhoneやiPad、PCなどのデバイスの画面サイズ毎にレイアウトを作れるレスポンシブWebデザイン向けのCSS作成ツール。ボックスはカラムを追加して幅を...
Ads