画像をアップロードする前にロード、プレビューするjQueryスクリプト・「LoadImg」
LoadImg See the Pen QGENKq by kachibito (@kachibito) on CodePen. LoadImgは画像をアップロードする前にプレビューするスクリプトです。jQueryに依存します。上デ...
Resource - フレームワーク
jQueryとBootstrapで作るシンプルなスケジューラー・「pit-scheduler」
pit-scheduler pit-schedulerはjQueryとBootstrapで作るスケジューラーです。横長のカレンダーに蛍光ペンで引くようにスケジュールを設定、管理出来る、というもの。現状の仕様ではタスクの設定はちょっぴり...
Webアプリの開発スピードをサポートするレスポンシブな軽量HTML/CSSフレームワーク・「Base」
Base BaseはWebアプリの為のレスポンシブな軽量フレームワークです。盤石な基盤をつくることでWebアプリの開発スピードに貢献する事が目的のよう。IE8などのオールドブラウザを含むクロスブラウザ対応で、必要に応じて追加可能なモジ...
レスポンシブなtableの為のスクリプト・「resTables」
resTables resTablesはレスポンシブなtableを作るためのスクリプトです。jqueryに依存しています。同等の先発のスクリプトであるstacktable.jsの形式に基づき、更に進化させたものとして提供しているそう。...
要素内やページ内でのスクロールに応じてプログレスバーを表示する軽量シンプルなスクリプト・「PrognRoll」
PrognRoll PrognRollはページやスクロールが可能なコンテナ内でのスクロールに応じてプログレスバーを表示するスクリプトです。ただそれだけのシンプルなもので、サイズも2kb以下、圧縮すれば1kb以下と軽量です・・が、jqu...
FlexboxベースのシンプルなCSSフレームワーク・「useful.ly」
useful.ly useful.lyはFlexboxベースのシンプルなCSSフレームワーク。グリッドやモーダルウィンドウ、ボタンやフォームのスタイルを提供してくれています。まで開発中でこれから頑張る！CDNも用意したから試しに触って...
NAVER製のオープンソースなUIインタラクションライブラリ・「egjs」
egjs egjsはLINEでおなじみのNAVERが公開しているUIインタラクションセットライブラリです。Webアプリ構築の際に開発スピードに貢献する事が目的のようで、OSSとして提供してくれています。jQueryを使って更に機能を拡...
WordPressのテーマやプラグイン開発のためのフレームワーク・「Evolve Framework」
Evolve Framework Evolve FrameworkはWordPressのテーマやプラグイン開発のためのフレームワークです。データ管理やオプションページ、多言語化等を簡略化できるようになっていて、開発スピードを向上させて...
Vue.jsベースのWebアプリケーション向けのマテリアルデザインフレームワーク・「Vue Material」
Vue Material Vue MaterialはVue.jsベースで作られたWebアプリケーションをマテリアルデザインに対応させるためのフレームワークです。コンポーネントやUIは再利用できるように意識して設計したそう。コンポーネン...
CSSで作るベーシックなローダーのセット・「CSS loader」
CSS loader CSS loaderはCSSのみで作れるベーシックなローダーを簡単に設定できるスタイルシートです。画像でよく見かけるエレメントをCSSで作った、みたいなもの。他に、少し凝ったものもあります。ここ最近はCSSのみで...
CSSのみで出来たシンプルで実用的なアイコン集・「CSS ICON」
CSS ICON CSS ICONはCSSのみで出来たアイコン集です。それぞれのアイコンは上図のようにコードが紹介されており、各部位がハイライトされるようになっていて仕組みをわかりやすくしてくれています。スマフォの普及やオールドブラウ...
レスポンシブなオーバーレイメニュー構築のためのフレームワーク・「responsive-overlay-menu」
responsive-overlay-menu See the Pen Responsive overlay menu - full menu with second menu example by Mario Loncarek (@ri...
WebアプリのためのシンプルでフレキシブルなUIフレームワーク・「Agile CSS」
Agile CSS Agile CSSはWebアプリケーションのためのフレキシブルなUIフレームワークです。タブやテーブル、通知、ツールチップ、ナビゲーションなどの各UIコンポーネントやエフェクト等、アプリに必要そうなコンポーネントが...
複雑なアニメーションにも対応できる、パフォーマンス重視のJavaScriptアニメーションエンジン・「KUTE.js」
KUTE.js KUTE.jsは高度なカスタムアニメーションにも対応できるパフォーマンス重視のJavaScript製アニメーションエンジンです。本サイトTOPにもあるような複雑なアニメーションコンテンツの実装をサポートしてくれます。コ...
軽量で非依存型のパーティクルエンジン・「particles.js」
particles.js particles.jsは軽量で他ライブラリに依存しない非依存型のパーティクルエンジンです。簡易的なものですが圧縮版で2.5kbほどと軽量で依存せず単体で動作してくれるのと、設定が簡単で扱いやすい印象です...
CSSアニメーションの遅延をコントロールする為のシンプルなフレームワーク・「Shift.css」
Shift.css Shift.cssはCSSアニメーションの遅延で要素をコントロールするフレームワークです。上記サンプルのように要素にかかるアニメーションを遅延させてコンテンツの構築をサポートしよう、というもの。CSSとほんの少...
手軽にダミー画像を作成出来る軽量スクリプト・「placeholder.js」
placeholder.js placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生...
CSSのみで作るシンプルなツールチップ・「Wenk」
Wenk WenkはCSSのみのツールチップを実装するシンプル軽量なCSSライブラリ。ツールチップの位置やテキストはカスタムデータ属性で管理できます。手軽で良いですね。PostCSS、Less、SCSSに対応しています。ライセンスはM...
input要素の入力をサポートする非依存スクリプト・「Cleave.js」
Cleave.js Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力...
記号や特殊文字を使ったローディング時のスピナーをCSSで作る・「text-spinners」
text-spinners text-spinnersは記号や特殊文字を使ってCSSで作るスピナーです。上例は分かりやすくするために大きなフォントで表示しています。contentプロパティに複数テキストを設定してkeyframesで動...
Githubのコードを任意のWebページに埋め込める・「github-embed」
github-embed github-embedはGithubのコードを任意のWebページに埋め込むためのスクリプトです。上図のように複数ファイルを同時に埋め込む事も可能です。Gistライクにリポジトリ内のコードを埋め込めるgist...
アニメーションしながら色が変化するグラデーションを作成出来るスクリプト・「Granim.js」
Granim.js Granim.jsはアニメーションしながら一定の時間毎に色を変更させるグラデーションを作成できるスクリプトです。非依存型で単体で動作してくれます。サイズも圧縮版で10kb前後となっています。設定項目は色の指定、グラ...