CSSのみで上からスライドダウンする開閉コンテンツを作る・「Headermessage」
Headermessage HeadermessageはCSSのみで開閉コンテンツを作るスタイルシートです。よくある上からスライドダウンするやつをCSS3を使って実現しよう、というもの。上記デモはこのページではうまく動かせないかも...
Resource - Archives
tableにフィルタ機能+αを加えるスクリプト・「TableFilter」
TableFilter TableFilterは任意のtableにフィルタ機能を加えるスクリプトです。他、ページャ、ソート、列の計算機能など機能の追加も出来るみたい。フィルタは任意のキーワードだけでなく、selectで対象を選べるよう...
食品関係の写真素材をCC0ライセンスで提供するフード専門のストックフォトサイト・「FOODSHOT」
FOODSHOT FOODSHOTは食品専門の写真素材配布サイトです。パスタや卵、ドリンクからスイーツまであらゆる食品の素材が提供されています。提供、といっても、こちらはあくまでキュレーションサイトらしく、CC0で且つフード関係の写真...
Flexboxを使ったUIのサンプルコードを紹介する・「Flexbox Patterns」
Flexbox Patterns Flexbox PatternsはFlexboxを使ったUIパターンをコードと共に紹介するWebサイトです。display:flexプロパティを使って何が出来るのか、使い方や実際にUIとして実装するコ...
自動保存出来るオープンソースのデスクトップメモアプリ・「FromScratch」
FromScratch FromScratchは自動保存出来るデスクトップ用のメモアプリです。OSSとしてソースコードが公開されています。よくある付箋やノートアプリの超シンプルなタイプ。機能はただテキストを書くだけ、ショートカットが4...
Markdown記法で書けるライトなOSSブログエンジン・「nemex」
nemex nemexはMarkdown記法に対応のライトに使えるブログエンジンです。OSSとして公開されています。PHP製で、DBは不要、Markdown記法でコンテンツを更新する事が出来ます。勿論スマフォからでも利用可能です。まだ...
コーディング不要でWebサイトのテンプレートを作成する為のオープンソースソフトウェア・「GrapesJS」
GrapesJS GrapesJSはコーディングせずに直感でWebサイトのテンプレートを作成出来るエディタです。OSSとしてソースコードが公開されています。JS製でjQueryにのみ依存しています。必要なコンテナやテキスト、画像等をマ...
軽量でカスタマイズ性を重視したCSSフレームワーク・「Reindeer.css」
Reindeer.css Reindeer.cssは軽量でカスタマイズ性を重視したCSSフレームワークです。まだ触っていませんがパッと見、UIもシンプルでよさ気ですね。現在は必要なコンポーネントが若干不足しているものの、後で追加するそ...
ブラウザで動くスプレッドシートの為のスクリプト・「jQuery.sheet」
jQuery.sheet jQuery.sheetはブラウザで動くスプレッドーシートの為のスクリプトです。jQueryに依存しており、OSSとして公開されています。HTML、JSON、XMLもサポートされています。他にもこの手のものは...
Webページにドローツールを埋め込むためのスクリプト・「Drawingboard.js」
Drawingboard.js Drawingboard.jsはWebページにおえかきツールを埋め込むためのスクリプトです。Canvasベースで出来ており、コントロールに必要な機能も一通り揃っている印象です。ある程度他のライブラリにも...
モバイルアプリ向けのランディングページテンプレート・「Takeoff」
Takeoff Takeoffはモバイルアプリ向けのランディングページのテンプレートです。よく配布されているような、いわゆるWebページのテンプレは使わないのですけど、こちらはスタイルを初期化すれば使いやすそうだったので備忘録として。...
レスポンシブWebデザイン対応のシンプルなイベントカレンダーを実装出来るスクリプト・「monthly.js」
monthly.js monthly.jsはシンプルなイベントカレンダー実装の為のスクリプトです。jQueryに依存しています。レスポンシブWebデザインにも対応しており、デイトピッカーとして利用する事も可能となっています。少し触って...
FlexboxベースのモダンなCSSフレームワーク・「Bulma」
Bulma BulmaはFlexboxベースのモダンなCSSフレームワークです。レスポンシブWebデザインに対応しており、オープンソースとして公開されています。カラースキームもいいセンスしてますね。これはなかなか使いやすそうです。 ...
GeoJSONをブラウザ上で作成できるOSS・「geojson.io」
geojson.io geojson.ioはGeoJSONをブラウザで編集、作成出来るWebツールです。オープンソースとしてもコードが公開されています。GeoJSONはGoogle Map APIでもサポートされている規格ですので馴染...
Instagramライクな画像フィルターを簡単に設定可能でCSSコードも出してくれる・「cssFilters」
cssFilters cssFiltersはInstagramライクな画像加工をCSSで施せるWebアプリです。画像はUnsplashから引っ張るか任意の画像をアップロードします。CSSgramが使用されており、プレビューを見ながらス...
任意の画像をレスポンシブに対応したHTMLタグや画像を生成するジェネレーター・「Responsive Image Breakpoints Generator」
Responsive Image Breakpoints Generator Responsive Image Breakpoints Generatorは任意の画像をRWD対応にする為のジェネレーターです。srcset属性による画像...
JavaScript製のオープンソースなCMS・「CMS.js」
CMS.js CMS.jsはJavaScript製のCMSです。オープンソースとして公開されています。サーバーサイド・スクリプトの援助なしにクライアントサイドでWebアプリケーションを構築する事が出来る、との事です。jekyllを意識...
サウンドインタラクションを追加する為のシンプルなJavaScriptライブラリ・「Loud links」
Loud links Loud linksはWebコンテンツにサウンドインタラクションを追加する為のシンプルなJSライブラリです。audio属性を使うみたい。非依存型で軽量なのは良いですね。音源を用意して特定のclassとカスタムデー...
CSSのみで縦の年表のようなタイムラインを作れる・「Timelined」
Timelined TimelinedはJavaScript不要でタイムラインを作成出来るスタイルシートです。CSSのみで縦の年表を作成出来ます。カスタマイズ性も優秀で、アイコンの有無や吹き出し、アイコンのサークルカラー、タイムライン...
大量のパブリックドメインな写真素材を探せる・「FindA.Photo」
FindA.Photo FindA.PhotoはCC0な写真素材を探せるWebサービスです。色やシーン、配布元サイトなどからもコマンド検索可能みたい。動作も割と軽いので結構使いやすい印象でした。素材のページではその写真のカラースキーム...
自動でアクセシビリティのチェックを行うオープンソースツール・「pa11y」
pa11y pa11yは自動で任意のWebサイトのアクセシビリティチェックを行ってくれるツールです。OSSとして公開されています。監視したいWebサイトを設定すると毎日チェック、スコアを出してレポートを作成してくれます。30日間のレポ...
RubyやPython、Node.js、PHPやGoなど様々なコードスニペットをブラウザで実行テストできる・「BitRun」
BitRun BitRunは様々なプログラミング言語のコードスニペットを実行テスト出来るWebアプリです。対応言語はタイトルで上げたものの他にElixir、bash、Rust、C、Swift、Dart、CoffeeScroptなどなど...