グリッドレイアウトのポートフォリオサイトを手軽に作成する為のシンプルなスクリプト・「gridfolio.js」
gridfolio.js gridfolio.jsはグリッドレイアウトのポートフォリオサイトを手軽に作成できるJavaScript製のジェネレーターです。gridfolio.jsにコンテナのタイトルやアイキャッチ、リンク先、スタイルや...
Resource - Webデザイナー向け
データを可視化する際の表現パターンをいろいろとまとめたカタログサイト・「The Data Visualisation Catalogue」
The Data Visualisation Catalogue The Data Visualisation Catalogueはいろいろなデータを棒グラフや円グラフ等、可視化する際の表現方法をまとめたカタログサイトです。データには...
モダンでクリーンなレスポンシブWebデザイン対応のフレームワーク・「Spectre.css」
Spectre.css Spectre.cssはモダンでシンプル、クリーンなCSSフレームワークです。RWD対応で軽量、UIコンポーネントも充実しています。HTMLメールも用意されてるみたい。また、日本や中国、韓国といったアジアのフォ...
jQueryで作られたオープンソースのシンプルなTodoアプリ・「LobiList」
LobiList LobiListはjQuery製のToDoアプリです。OSSとして公開されています。上図のように複数リストも設定可能で基本的なToDoアプリの性能は揃っている印象でした。シンプルで使いやすそうですし、手軽に作れるのは...
レスポンシブWebデザイン対応のHTMLメールフレームワーク・「Outline Mail」
Outline Mail Outline MailはRWDなメールのHTMLフレームワークです。スマフォの普及で以前より需要が増している印象です。HTMLメールのRWD対応は通常のWebページとは少し勝手が違うのでこの手のフレームワー...
フリーで公開されたWebデザイン向けのリソースをまとめている・「Freebiesbug」
Freebiesbug FreebiesbugはWebデザイン向けのリソースで無料で公開されているものだけをまとめているWebサイトです。テンプレートやCSSフレームワーク、ちょっとしたコードスニペットの紹介ページやPSDファイル、フ...
静的なHTMLファイルを編集可能にするシンプルなCMS・「SiteCake」
SiteCake SiteCakeは通常の静的なHTMLを編集可能にするシンプルなCMSです。プログラミングの知識も不要でプレーンなHTMLを編集可能になします。コンテンツはドラッグ&ドロップで調整出来てデータベースも不要との事。どこ...
canvasを使ったシンプルなドローライブラリ・「atrament.js」
atrament.js atrament.jsはcanvasを使ったシンプルなドローライブラリです。色やペンの太さ、消しゴム、透過機能などが揃っています。他ライブラリへの依存も無く、圧縮版で7KBほどと軽量です。滑らかで動作も軽いドロ...
can I useの特定の項目のブラウザ対応表をWebサイトに埋め込める・「The (Unofficial) CanIUse Embed」
The (Unofficial) CanIUse Embed Can I Use transforms3d? Data on support for the transforms3d feature across the maj...
Webアプリ向けに設計された非依存型で軽量なツールチップ実装スクリプト・「Popper.js」
Popper.js Popper.jsは常に見やすい状態に維持してくれるツールチップ実装スクリプトです。圧縮版で3.5KBと軽量且つ非依存型で単体で動作してくれます。うまく説明出来ませんが、任意のコンテナにツールチップを表示した際、ス...
インタラクティブなグラフやチャートの為のjQueryプラグイン・「FusionCharts」
FusionCharts FusionChartsはインタラクティブなグラフやチャート構築の為のスクリプトです。jQueryに依存してます。シンプルなグラフはもちろん、3Dな円グラフや棒や線などの複合チャート、エクスポート機能の他、J...
様々なUIのデザインをパーツ別に収集しているギャラリーサイト・「Collect UI」
Collect UI Collect UIは様々なUIデザインを収集しているギャラリーサイトです。よくあるギャラリーサイトですが、他と違う点は大量のカテゴリに分けられている点です。主なソース元はDribbbleだそうですが、自動ではな...
ブラウザやOS、デバイス等を検出してclassを付与するスクリプト・「Detectr.js」
Detectr.js Detectr.jsはブラウザやOS、デバイス等を検出してclassを付与するスクリプトです。他ライブラリに依存せず単体で動作し、圧縮版で3.6KBｙと軽量です。下記のようにclassが付与されます。 ...
再利用も視野にいれたオブジェクト指向CSSフレームワーク・「RichCSS」
RichCSS RichCSSは再利用も視野に入れて設計されたオブジェクト指向のCSSフレームワークです。各コンポーネント毎にファイルを別にしているみたいですね。クリーンなCSS設計になるよう心がけて設計してあるそうです。隙を見て触っ...
HTML5製の管理画面構築のためのOSSなダッシュボードフレームワーク・「RazorFlow」
RazorFlow RazorFlowはHTML5製のダッシュボード用フレームワークです。オープンソースとして公開されています。円グラフや棒グラフ等のチャート、管理画面のスタイルビルダー、リアルタイム更新、軽量且つ高速でタッチデバイス...
微調整可能な拡大鏡を実装出来るスクリプト・「jfMagnify」
jfMagnify jfMagnifyは微調整可能な拡大鏡を実装出来るスクリプト。jQueryとjQuery UIに依存します。上記のように拡大鏡に+-ボタンが付いており、拡大鏡内の微調整が可能となっています。拡大鏡はCSSのみで...
文章に注釈を加えるためのシンプルなスクリプト・「marginotes」
marginotes marginotesは文章内の任意のキーワードに注釈を加えるためのシンプルなスクリプトです。jQuery版と単体で動くvanilla版があります。マウスホバーで左端にちょろっと注釈が出る、というシンプルなもの。ツ...
チャートを手軽に作成、embedも出来るWebサービス・「BEAM」
BEAM BEAMはチャートを手軽に作成出来るWebサービスです。円グラフや棒、線グラフが用意されており、数値やラベルはその場に表示してくれる簡易的なスプレッドシートに記入すれば反映されるようになっています。embedも可能です。 ...
画像のExif情報を読み取るためのJavaScriptライブラリ・「Exif.js」
Exif.js Exif.jsは画像のExif情報を読み取るスクリプトです。画像のメタデータを読み取って取り出すだけのもの。上図のように動作テストしてみましたが項目数は52ほど用意されているようですので全てではないにしても割と揃えられ...
美しいWebデザインのECサイトのみを収集しているデザインギャラリー・「Beautiful Stores」
Beautiful Stores Beautiful StoresはWebデザインのECサイトを収集しているWebデザインギャラリーです。なんとなくこの手のギャラリーサイトは懐かしい気がします。美しい＝使いやすいとは限らないですがイン...
任意の画像にプレビューを確認しながらフィルタをかけてCSSのfilterでコードを出せる・「」
CSS Filter See the Pen CSS Filter by Jordano Aragão (@jordanoaragao) on CodePen. CSS Filterは任意の画像にCSSのfilterをテストでき...
シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」
Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...