使いやすいスプレッドシートを実装出来るスクリプト・「jexcel」
jexcel jexcelはスプレッドシート実装の為のスクリプトです。jQueryに依存します。上図のようなスプレッドシートを作成出来ます。CSVやJSONのデータで作成可能、Excelと互換性があるとの事です。表計算は勿論、テーブル...
Resource - フレームワーク
Webアプリケーション開発を少しだけサポートするJavaScriptライブラリ・「HYPERAPP」
HYPERAPP HYPERAPPはWebアプリ開発を少しだけサポートしてくれるJSライブラリです。本ライブラリではクリック数検知やカラーコードのパース、要素のドラッグ&ドロップ、キーワードマッチ、マウスの動きの解析やTodo、時計な...
Webページにカスタマイズ可能なグリッドをオーバーレイ表示させるスタイルシート・「Graaf」
Graaf GraafはWebページにグリッドをオーバーレイするCSSです。よくあるグリッドをオーバーレイさせて表示を確認できる、みたいなやつなんですが、こちらの大きな特徴はカスタマイズ出来る、という点です。スタイルシートはGraaf...
パブリックドメインで配布されている、モバイルファーストでレスポンシブなCSSグリッドシステム・「FLUIDABLE」
FLUIDABLE FLUIDABLEはモバイルファーストなレスポンシブWebデザイン対応のCSSグリッドシステムです。LESSが使われていおり、ライセンスはパブリックドメインの元、配布されていますのでかなり自由に使うことが出来ますね...
円や三角、ハート型などで実装出来るプログレスバー・「ProgressBar.js」
ProgressBar.js ProgressBar.jsは円や三角、ハート型など、形状をカスタマイズ出来るプログレスバー実装スクリプトです。シンプルで良いですね。仕様はシンプルで対応ブラウザも幅広いので扱いやすそうな印象です。ライセ...
Webサイトの訪問者の簡易的なデータを取得するスクリプト・「Purser」
Purser PurserはWebサイトの訪問者の簡易的なデータを取得する軽量スクリプトです。最初に訪れた日時やリファラ、タイムゾーン、ブラウザに設定してある言語、ランディングページやモニターサイズ、コンバージョンに設定したボタン等を...
データやイベントを簡易的に可視化するタイムシート作成ライブラリ・「timesheet.js」
timesheet.js timesheet.jsはデータやイベントを簡易的に可視化するタイムシート作成ライブラリです。ライブラリを読み込んでデータを書くだけで上デモのような簡易的なタイムシートを作成出来ます。データ入力も簡単なので扱...
シンプルでベーシックなレスポンシブWebデザインのグリッドレイアウト・「Spacegrid CSS」
Spacegrid CSS Spacegrid CSSはシンプルでベーシックなRWDのグリッドレイアウトCSSです。カラムは6までしか無く、それ以上は何もないので1.5kbと軽量な作りになっています。こういうのは汎用的に使えるので良い...
SVGを背景に使ったポップアップを実装するスクリプト・「jQuery-svg-popup」
jQuery-svg-popup jQuery-svg-popupはSVGを背景に使ったユニークなポップアップ実装スクリプトです。jQueryに依存します。画像のようにボタンを押すとSVGで作った背景がアニメーションで表示、コンテンツ...
軽量でレスポンシブ、スタイルも選べるナビゲーションメニューのスタイルシート・「LUXBAR」
LUXBAR LUXBARは羽のように軽量なレスポンシブWebデザイン対応のナビゲーションメニュー用スタイルシートです。カラースタイルもいくつか選べます。これで非圧縮で8kbほどなので確かに軽量な設計ですね。また、ナビゲーションを固定...
シンプルで見やすいHTMLリファレンス・「htmlreference.io」
htmlreference.io htmlreference.ioはシンプルで見やすいHTMLリファレンスサイトです。トップページではタグが一覧になっており、ブロック要素、インライン要素、metaタグなどがひと目で分かるようになってい...
さまざまなフォームのスタイルサンプルとコードを大量にまとめた・「77 CSS Forms」
77 CSS Forms 77 CSS Formsは大量のフォームスタイルをまとめたWebページです。CSSで作られたフォームのサンプルが大量に紹介されています。各フォームはCodepenで動作デモを作成してあります。一般的なコンタク...
手軽で簡単、使いやすい国産の動画用モーダルウィンドウスクリプト・「modal-video.js」
modal-video.js modal-video.jsは手軽で簡単に動画をモーダルウィンドウです。jQueryに依存しています。開発元は国産CMSを開発するa-blog cmsの方。スクリプトとCSSを読み込み、任意の要素に用意さ...
任意の要素に表示/非表示時のアニメーションエフェクトを付与出来るスタイルシート・「tuesday」
tuesday tuesdayは任意の要素にアニメーションエフェクトを手軽に付与出来るスタイルシートです。上デモのように、CSSによるアニメーションエフェクトを、classを与えるだけでアニメーションによる表示、非表示が出来るようにな...
任意の要素にマウスの動きに合わせてパララックス効果を表現出来るスクリプト・「Tilt」
Tilt Tiltは任意の要素にパララックス効果を与えられるスクリプトです。jQueryに依存しますので軽量なスクリプトとは言えないかもですが、本スクリプト自体は圧縮版で1.45kbほどのようです。オプションもいろいろ揃えられていまし...
Pinterest風でレスポンシブWebデザイン対応のレイアウトを作れてドラッグで位置移動やソートも出来るスクリプト・「MUURI」
MUURI MUURIはPinterestライクなレイアウトを構築出来るスクリプトです。MUURIという名はフィンランドの言葉で壁を意味するそう。レスポンシブWebデザインにも対応しており、任意のキーワードでソートも可能。Hammer...
地図と連動して任意のテキストや画像をスライド表示するスクリプト・「StoryMapJS」
StoryMapJS StoryMapJSは地図と連動して任意のテキストや画像をスライド式に表示できるスクリプトです。地図はOpenStreetMapが使われ、ストーリー形式でスライドを作成する事ができる、というもの。地図にはアイコン...
スクロールに合わせてナビゲーションに現在地を明示するスクリプト・「Progress Nav」
Progress Nav Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの...
レスポンシブWebデザイン対応の棒グラフ、折れ線グラフ、円グラフを作れる・「Pizza Amore!」
Pizza Amore! Pizza Amore!は様々なデバイスで折れ線グラフや円グラフ、棒グラフ等を表示出来るスクリプトです。Foundationを提供するZURBが開発、公開しています。マークアップは簡単なリストにカスタムデータ...
Bootstrapベースで作られたオープンソースの管理画面UIフレームワーク・「CoreUI」
CoreUI CoreUIはBootstrapベースのUIフレームワークです。レスポンシブな管理画面の基礎を用意してくれており、開発スピードを補うものとして公開されています。各コンポーネントも揃えられており、キレイめで見やすい印象でし...
レスポンシブなEメール向けのCSSフレームワーク・「Foundation for Emails」
Foundation for Emails Foundation for EmailsはRWD対応のHTMLメール用フレームワークです。名前の通り、多数の方に愛用されるCSSフレームワーク、Foundationを提供するZURBが公開...
WordPressに関するツールやリソース等をコレクションしているキュレーションサイト・「WordPress Stash」
WordPress Stash WordPress StashはWordPressに関わるツールやリソース、テーマやプラグインの開発情報等をキュレーションしているWebサイトです。よくあるキュレーションサイトと同じ構造で、カテゴリに分...