JavaScriptライブラリやフレームワークを使わずHTML5、CSS、バニラなJSだけで作られたプロジェクト集・「Web Projects With Vanilla JavaScript 」
Web Projects With Vanilla JavaScript Web Projects With Vanilla JavaScriptはフレームワークやライブラリ等を使わずに純粋なHTML5+CSS+VannilaなJSで...
Resource - HTML5
開発したHTML/CSS/JS製のWebアプリを公開したり利用できる・「Outpan」
Outpan OutpanはHTML/CSS/JSで開発したWebアプリを公開、利用できる開発者向けのWebアプリ公開プラットフォームです ユーザーは様々なWebアプリを検索したり利用でき、開発者は公開したWebアプリの人気に応...
プログラミングの知識不要でWebアプリとしても開発できるオープンソースのゲームボーイ用ゲーム開発アプリ・「GB Studio」
GB Studio GB Studioはプログラミングの知識不要でゲームボーイ用のゲーム開発が可能なOSSです。GUIツールとして提供されており、コードを書かずに開発が出来るように設計されています。ElectronベースでOS問わず動...
オープンソースで公開されている、大量のコンポーネントを含んだBootstrapベースの管理画面テンプレート・「STISLA」
STISLA STISLAはオープンソースのBootstrapベースの管理画面テンプレートです。大量のコンポーネントを含んでおり、ほとんどの需要に応えられるようになっています。また、インタラクティブなチャートやデータテーブルなどの為の...
ミニマルなスタイルのHTML5製ミュージックプレイヤー・「cPlayer」
cPlayer cPlayerはHTML5製のミニマルなミュージックプレイヤーライブラリです。上図のように省スペースでミニマルなスタイルのプレイヤーを実装できる、というもので見た目のシンプルさとは異なり、リピート機能やプレイリスト、連...
Alibabaが開発、公開しているオープンソースのHTML5製ゲームソリューション・「Hilo」
Hilo HiloはOSSとして公開されているHTML5製ゲームエンジンです。中国のAmazonと言われるAlibabaグループが開発、公開しているようです。HTML5によるゲーム開発の速度向上をサポートする事が目的のよう。オブジェク...
Matter.jsを使ってスクロール時に背景をアニメーションさせる・「Floaty Bubbles」
Floaty Bubbles See the Pen Floaty Bubbles by Will Boyd (@lonekorean) on CodePen. 物理エンジンのMatter.jsを使って、背景をスクロールに応じてアニ...
HTML/CSS/JavaScriptで作られた時計のみを収集している・「Clock Shop」
Clock Shop Clock ShopはHTML、CSS、JavaScriptだけでブラウザで動作する様々な時計を収集しているプロジェクトサイトです。Codepenで公開されている時計コンテンツだけを収集、公開しているみたいです。...
Vue.jsで作れるオープンソースのUIデザインツール・「Vue Design System」
Vue Design System Vue Design SystemはVue.jsベースのUIデザインシステムです。チームで使う事を想定されているようで、使用者がHTML、SCSS、JavaScriptを扱ったWebアプリ開発の基礎...
Bootstrap 4向けのオープンソースなダッシュボード用テンプレート・「Now UI Dashboard」
Now UI Dashboard Now UI DashboardはBootstrap 4向けのOSSなダッシュボード用テンプレートです。目に優しいカラースキーム、見やすいUI等を意識して作られたそうです。OSSですが、有償プランも用...
フォームのHTML/CSSのboilerplateとして提供する・「Boilerform」
Boilerform See the Pen Boilerform: Card payment example by Andy Bell (@hankchizljaw) on CodePen. Boilerformは送信フォームの雛...
複数プレイリストもサポートしたOSSな非依存型オーディオプレイヤー実装スクリプト・「AmplitudeJS」
AmplitudeJS AmplitudeJSは複数プレイリスト等もサポートした非依存のHTML5オーディオプレーヤーを実装できるスクリプトです。コントローラーも直感的でわかりやすくタッチデバイスフレンドリーな設計となっているそうです...
Web用リッチテキストエディタを作成する為のツールキット・「ProseMirror」
ProseMirror ProseMirrorはWeb用リッチテキストエディタを構築するためのツールキットです。以前はMarkdown⇔HTMLなWYSIWYGエディタだったようですが、現在は様々な形のリッチテキストエディタを作るため...
HTMLやCSS、JavaScriptのコードを綺麗に整形してくれる・「DirtyMarkup」
DirtyMarkup DirtyMarkupはHTML/CSS/JavaScriptのコード整形ツールです。従来のフォーマッター同様にある程度の調整機能も付いています。また、本ツールはAPIも公開しており、今のところは無料で利用可能...
豊富なコンポーネントを揃えたモジュール式のオープンソースUIツールキット・「One-Nexus」
One-Nexus One-NexusはオープンソースのUIキットです。豊富なコンポーネントを揃えているだけでなく、UIモジュールを作成するためのフレームワーク、Synergyを導入する事でモジュール形式にされたパワフルなキットとして...
canvasで描いた円状のシャボン玉っぽいものをランダムに動かし、背景に設定できるスクリプト・「bubbly-bg」
bubbly-bg bubbly-bgは上デモのようにゆるく動くシャボン玉を背景に設定出来るスクリプトです。非依存型なので他スクリプトを必要とせず単体で動作してくれてサイズも軽量です。色や玉の数、アニメーションの有無等の設定が可能とな...
フロントエンド開発に貢献してくれそうなツールやフレームワーク、ニュース記事等を収集している・「Front-end Tools」
Front-end Tools Front-end Toolsはフロントエンド開発に貢献してくれそうなツールやフレームワーク、リソースやニュース記事等を収集しているWebサイトです。大量のツールがキュレーション、検索出来るというシンプ...
HTMLメールの軽量boilerplate・「bojler」
bojler bojlerはHTMLメールの軽量boilerplateです。簡単にひな形を作成出来るように設計されているとの事。スタイルリセット、レスポンシブ対応、グリッド、ユニーティリティのclassが特徴だそうです。ライセンスはM...
Foundationに加える事ができるUIコンポーネントを配布する・「Building Blocks」
Building Blocks Building BlocksはCSSフレームワークのFoundationに加える事ができるUIコンポーネントを配布するWebサイトです。zurbが公式に公開しているものになります。ナビゲーションやメデ...
基本的なUIコンポーネントも備わったベーシックなCSSフレームワーク・「Caramel」
Caramel Caramelは基本的なUIコンポーネントも備わったベーシックでモダン、レスポンシブなCSSフレームワークです。ボタンのスタイルやRWDに対応したナビゲーション、通知、パンくずやテーブル、プログレスバーからページネーシ...
データやイベントを簡易的に可視化するタイムシート作成ライブラリ・「timesheet.js」
timesheet.js timesheet.jsはデータやイベントを簡易的に可視化するタイムシート作成ライブラリです。ライブラリを読み込んでデータを書くだけで上デモのような簡易的なタイムシートを作成出来ます。データ入力も簡単なので扱...
シンプルで見やすいHTMLリファレンス・「htmlreference.io」
htmlreference.io htmlreference.ioはシンプルで見やすいHTMLリファレンスサイトです。トップページではタグが一覧になっており、ブロック要素、インライン要素、metaタグなどがひと目で分かるようになってい...