Resource - フレームワーク

フルスクリーン動画からスムーズにスマフォのモックアップに移行するイントロテンプレート・「Immersive Video Template」

Immersive Video Template Immersive Video Templateはcodyhouseで紹介された、動画を使ったWebサイトのイントロのサンプルです。フルスクリーン動画で始まり、スムーズにスマフォのモッ...

高度なイベントカレンダーアプリの為のjQueryプラグイン・「FullCalendar」

FullCalendar FullCalendarは高度なイベントカレンダーアプリを実装出来るjQueryプラグインです。jQueryUIも使用可能、Googleカレンダーにも対応しています。多言語化も済んでおり、日本語ファイルも用意...

Webページとして公開もできるjsfiddleライクなコードテストツール・「PLAYCODE」

PLAYCODE PLAYCODEはWebページとして公開もできるjsfiddleライクなコードテストツールです。jsfiddleのようにHTML、CSS、JavaScriptをブラウザで動作テストできる、というツールですが、本ツール...
Ads

マテリアルデザインの仕様にインスパイアされた軽量CSSフレームワーク・「kernel.css」

kernel.css kernel.cssはマテリアルデザインの仕様にインスパイアされたCSSフレームワークです。軽量でセマンティックな設計を心がけているそう。Googleが提唱したマテリアルデザインの考え方、目的を元に開発されたもの...

いろいろなスタイルのボタンを実装出来るスタイルシート・「bttn.css」

bttn.css bttn.cssはいろいろなスタイルのボタンを実装出来るスタイルシートです。種類はそこまで多くないですが、それぞれのボタンは最小、小、中、大の太さが用意されており、ブロック要素/インライン要素、5色のカラーが用意され...

CSSで作る様々なメニューを大量にまとめた・「110 CSS Menu」

110 CSS Menu 110 CSS MenuはCSS(と、少しのJavaScript)で作るメニューを大量にまとめたWebページです。110個あるかは明記されてないし数えてもないので分かりませんが、読み込みがやたら重いので結構な...

軽量で非依存のパララックス実装スクリプト・「Rellax.js」

Rellax.js Rellax.jsは軽量で他ライブラリに依存しないパララックス実装スクリプトです。少し前に流行って今は割と普通に見かけるようになった視差効果のあるWebページの制作をサポートしてくれる、というもの。ファイルサイズは...

大量のCSSフレームワークやライブラリ、スニペット、ツール等をコレクションしている・「CSSReflex」

CSSReflex CSSReflexは大量のCSSフレームワークやライブラリ、スニペットやツール等をコレクションしているWebサイトです。よくあるキュレーションサイトですね。レスポンシブの計算機やフィルターツールなどもありますが、特...

モジュール形式のWordPressテーマ開発向けフレームワーク・「Cherry Framework」

Cherry Framework Cherry FrameworkはWordPressテーマ開発フレームワークです。GPLライセンスの元、OSSとして公開されています。専用のプラグイン(高度検索化、不動産ツールなど)も複数開発されてお...

disple:tableを使ったモバイルファーストなCSSグリッドシステム・「Table Grid」

Table Grid Table Gridはdisple:tableを使ったモバイルファーストなCSSグリッドシステムです。といっても実用性を考えて作った重要性の高いプロジェクトではなく、単に実験的に作ったようです。floatやfle...

ラジオボタンにアニメーションエフェクトを付与する為のスタイルシート・「Radiobox.css」

Radiobox.css Radiobox.cssはラジオボタンにアニメーションエフェクトを付与するCSSです。上図のようにチェックを入れるとラジオボタンがアニメーションします。使い方は簡単で、CSSを読み込んでiinput要素にcl...

スマフォで画面下へスワイプしてWebページを更新させられるスクリプト・「PulltoRefresh.js」

PulltoRefresh.js PulltoRefresh.jsはスマフォで画面下にスワイプしてWebページをリフレッシュ出来るスクリプトです。ページ一番上の状態で下にスワイプするとページを更新する事ができる、というもの。マークアッ...

シンプルで非依存、軽量なカルーセルスクリプト・「Siema」

Siema See the Pen Siema - nested carousels by kachibito (@kachibito) on CodePen. Siemaはシンプルで軽量、非依存型のカルーセルを実装するスクリプトで...

複雑なCSSアニメーションを処理する為のシンプルなスクリプト・「Choreographer.js」

Choreographer.js Choreographer.jsは複雑なCSSアニメーションを設定、処理する為のシンプルなスクリプトです。アニメーションを定義すると、指定した要素にインラインCSSが付与、DOMイベントを介して実行、...

CSSで出来る画像エフェクトをまとめた・「Image Effects with CSS」

Image Effects with CSS Image Effects with CSSはCSSのみで出来る画像へのエフェクト効果を実装するコードをまとめているWebサイトです。主にブレンドモードやフィルターを使ったエフェクトを紹介...

JSONから高性能なtableを作成してくれるスクリプト・「Tabulator」

Tabulator TabulatorはJSONデータからインタラクティブに高性能なtableを生成してくれるスクリプトです。jQueryに依存しています。ソート、ページネーション、データのグラフィカル表示、セル内の内容編集などなど高...

設定したplaceholderにアニメーションエフェクトを付与する・「FoxHolder 」

FoxHolder FoxHolderはinput等に設定したplaceholderをフォーカス時にアニメーションエフェクトを付与する為のセットです。エフェクトは15種類用意されています。基本的にはCSSとJSファイル(jQuery...

HTML要素1つで、やや複雑な動きが出来るCSSスピナー・「CSSPIN」

CSSPIN CSSPINは1つの要素で、上のようなそこそこ複雑な動きが作れる、CSSのみで作れるスピナーです。それぞれの動きはそれぞれCSSファイルが用意されているので必要な動きのファイルだけ読み込めば使えます。なかなか使いやすそう...

Googleリッチスニペット対応の、WebページにオリジナルのLikeボタンを付けるスクリプト・「LikeBtn」

LikeBtn LikeBtnは任意のWebページにLike/Dislikeボタンを付けられるスクリプト。jQueryに依存します。上デモのように日本語にも対応しています。少し微妙ではありますが・・w  念の為、Facebook...

使いやすさを意識したReactのWeb用UIコンポーネントのコレクション・「Blueprint」

Blueprint BlueprintはReactのWeb用UIコンポーネントをコレクションにして提供してくれるUIツールキットです。使いやすさを特に意識して構築したそう。汎用的なUIは一通り揃っている印象です。ドキュメントページに動...

画像をアップロードする前にロード、プレビューするjQueryスクリプト・「LoadImg」

LoadImg See the Pen QGENKq by kachibito (@kachibito) on CodePen. LoadImgは画像をアップロードする前にプレビューするスクリプトです。jQueryに依存します。上デ...

jQueryとBootstrapで作るシンプルなスケジューラー・「pit-scheduler」

pit-scheduler pit-schedulerはjQueryとBootstrapで作るスケジューラーです。横長のカレンダーに蛍光ペンで引くようにスケジュールを設定、管理出来る、というもの。現状の仕様ではタスクの設定はちょっぴり...
Ads