軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリ・「WinBox.js」
WinBox.js See the Pen GRrzXoo by kachibito (@kachibito) on CodePen. WinBox.jsは軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリで...
Resource - フレームワーク
チャット風のフォームを実装できるスクリプト・「chatty-form」
chatty-form chatty-formはチャット風のフォームを実装できるスクリプトです。React向けに設計されています。かなり昔にChattyというjQueryのプラグインがありましたが同じような感じのものです。 質問...
任意の要素に好みのエフェクトを付与できるシンプルなJavaScriptライブラリ・「party.js」
party.js party.jsは任意の要素に好みのエフェクトを付与できるシンプルなJavaScriptライブラリです。 導入も操作も簡単で、利用するに特に困る事も無さそうなので覚えておこうかなと思います。 以下動作サン...
映画向けに作られたオープンソースのメディアプレーヤー・「Moovie.js」
Moovie.js Moovie.jsは映画向けに作られたオープンソースのメディアプレーヤーです。映画向けとありますが基本的にはどの内容の動画でも問題なく動作します。 基本的なメディアプレーヤーの機能に加えて.vttや.srtな...
軽量で非依存のカスタマイズ可能なパーティクル生成ライブラリ・「tsParticles」
tsParticles See the Pen tsParticles - Monocromatic confetti explosions by Matteo Bruni (@matteobruni) on CodePen...
独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシート・「transition.css」
transition.css transition.cssは独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシートです。 CDNも用意されていますが、配布サイトで数値を調整してコードをコピーす...
Tailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレート・「Cleopatra」
Cleopatra CleopatraはTailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレートです。 最近のCSSフレームワークでは最も注目されているであろうTailwind.cssがベースのダ...
大量のコンポーネントが用意されたTailwindベースのUIキット・「TUK」
TUK TUKは大量のコンポーネントが用意されたTailwindベースのUIキットです。Tailwind.cssで設計された様々な手プレートやコンポーネントが用意されており、開発をサポートしてくれます。 全てのコンポーネントは主...
Vue.jsで作られた、パーツを組み合わせて作れるアバター作成アプリ・「Avatar Maker」
Avatar Maker Avatar MakerはVue.jsで作られた、パーツを組み合わせて作れるアバター作成アプリです。 任意の箇所から好みのパーツを選んで組み合わせてアバターを作成出来るよくあるやつです。素材やスタイルを...
仮想キーボードを実装する非依存で軽量なJavaScriptライブラリ・「Simple-keyboard」
Simple-keyboard Simple-keyboardは仮想キーボードを実装する非依存で軽量なJavaScriptライブラリです。PCのキーボードをモニターに表示してマウスでキーを選択できる、というもの。 スパイウェア対...
クラスレスでHTML要素に基本的なスタイルを適応するCSS・「Bamboo CSS」
Bamboo CSS See the Pen XWNqrRE by kachibito (@kachibito) on CodePen. Bamboo CSSはHTML要素に基本的なスタイルを適応するclass-les...
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」
Charts.css Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく...
設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプト・「pace.js」
pace.js See the Pen rNWwwap by kachibito (@kachibito) on CodePen. pace.jsは設定が一切不要でページロード中にプログレスバーを自動で実装してくれるス...
モダンなCSSを使ったレイアウトのコードスニペットを紹介する・「SmolCSS」
SmolCSS SmolCSSはモダンなCSSを使ったレイアウトのコードスニペットを紹介するプロジェクトサイトです。 古いCSSをモダンなCSSに置き換えるヒントを紹介するModern CSS Solutionsの運営者の方が始...
シンプルなUIのモダンなwysiwygエディタを構築するためのオープンソースのツールキット・「bangle.dev」
bangle.dev bangle.devはシンプルなUIのモダンなwysiwygエディタを構築するためのオープンソースのツールキットです。 基本的にはReactで使う事を想定した設計で今後はVueもサポートする予定との事です。...
すごくシンプルで使いやすい非依存型の画像拡大鏡スクリプト・「js-image-zoom」
js-image-zoom See the Pen PobWowK by kachibito (@kachibito) on CodePen. js-image-zoomはシンプルで使いやすい非依存型の画像拡大鏡スクリ...
CSSやJavScript等の便利なコードスニペットを収集している・「DevSamples」
DevSamples DevSamplesはCSSやJavScript等の便利なコードスニペットを収集しているWebサイトです。 CSSやJS、Node、Git、ReactやSvelte、HTMLなど開発時にたびたびググりがちな...
ダミーの画像やテキストを提供するweb components・「</placeholders>」
</placeholders> See the Pen dyOXOrR by kachibito (@kachibito) on CodePen. </placeholders>はダミーの画像や...
ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」
Pollen Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えるこ...
セキュアでシンプルなオープンソースのパスワードジェネレーター・「passwrd.in」
passwrd.in passwrd.inはセキュアでシンプルなオープンソースのパスワードジェネレーターです。Vueで書かれており、サーバーには一切データは送信されず、ブラウザのみで処理されます。 パスワードは数字や記号を含めた...
高速開発を意識して開発されたミニマリストの為のCSSフレームワーク・「Luxa CSS」
Luxa CSS See the Pen XWNrxOG by kachibito (@kachibito) on CodePen. Luxa CSSは高速開発を意識して開発されたミニマリストの為のCSSフレームワーク...
React.js/Bootstrapベースのオープンソースの管理画面テンプレート・「Volt React」
Volt React Volt ReactはReact.js/Bootstrapベースのオープンソースの管理画面テンプレートです。 100以上のコンポーネントと10のサンプルページが用意されており、RWD対応、WCAGに準拠して...