シンプルで軽量なOSSのHTML5製メディアプレイヤー・「Plyr」
Plyr Plyrはシンプル且つ軽量なHTML5メディアプレイヤーです。カスタマイズ性、軽量、シンプルで使いやすいメディアプレイヤーを意識したそうです。非依存型でセッティングも手軽に行えるので非常に使いやすそうな印象でした。Githu...
Resource - Webデザイナー向け
Github内で各言語のアクティブ率等のデータを可視化している・「GitHut」
GitHut GitHutはGithub内で公開されている様々なプログラミング言語のアクティブ率やフォーク率などのデータを可視化しているプロジェクトサイトです。データはGitHub Archiveから取得しているみたいですね。比較対象...
WordPressのテーマをブラウザ上で作成出来るオープンソースのソフトウェア・「Layers」
Layers LayersはOSSで配布されている、ブラウザ上で動作するテーマビルダーです。WordPress内蔵のテーマカスタマイザーと連結させる、というものみたいですね。子テーマの設計やレスポンシブWebデザインにも対応しているそ...
emやpx、remなど、CSSで使う単位のサイズを比較出来る・「CSS Ruler」
CSS Ruler CSS Rulerはemやrem等のCSSで使う単位のサイズを比較出来るツールです。値を変えることでどの単位がどう変化するかを確認出来るようになっています。また、それぞれのエレメントにマウスホバーすれば簡単な説明も...
Googleマテリアルデザインを導入したCSS/JSフレームワーク・「MUI」
MUI MUIはGoogleマテリアルデザインのガイドラインに沿ってデザインされたCSS/JavaScriptフレームワークです。基本的なコンポーネントも揃っていて直ぐに開発を始めることが出来ます。また、ReactJSやWeb Com...
著作権放棄の高品質な写真素材を配布する・「StockSnap.io」
StockSnap.io StockSnap.ioは著作権放棄された高品質な写真素材を配布するWebサイトです。配布されている写真は全てCC0で誰でも自由に利用可能となっています。解像度もなかなか高めで良いですね。写真はクロスプロセス...
HighCharts.jsとjqueryでtableをグラフ化するスクリプト・「jQuery HighchartTable」
jQuery HighchartTable jQuery HighchartTableはHighCharts.jsとjqueryを使ってHTMLで書いたtableのデータを自動でグラフにしてくれるスクリプトです。既存のtableにカス...
可愛らしいスタイルの日付ピッカーを実装するスクリプト・「DATEDROPPER」
DATEDROPPER DATEDROPPERは可愛らしいスタイルの日付ピッカーを実装するためのスクリプトです。jQueryに依存しています。よく見かける日付ピッカーはその月のカレンダーから選択するスタイルがほぼ定番ですが、こちらはス...
軽量でベーシックなCSSフレームワーク・「Open Style」
Open Style Open Styleは軽量でベーシックなタイプのCSSフレームワークです。normalize.cssを併用するみたいですね。SASS対応でグリッドシステム、エレメントのポジションサポート、背景への動画導入などが主...
OpenTypeやTrueTypeフォントをパース出来るスクリプト・「opentype.js」
opentype.js opentype.jsはOpenTypeやTrueTypeフォントをパースする為のJavaScriptライブラリです。パスや、メトリックスを調整する事でフォントを別の形状に変化させる事が出来る、というものっぽい...
ログイン不要で使えるシンプルなフローチャート作成ツール・「draw.io」
draw.io draw.ioはログイン不要で使えるフローチャート作成ツールです。用意されているエレメントやテンプレートも豊富でインターフェースも日本語に変更出来ますので気軽に使えそうです。Google DriveやDropboxへイ...
Githubページを利用したブログを構築できる・「HubPress.io」
HubPress.io HubPress.ioはGithubページを使ったブログを構築出来るツールです。本ツールをフォークしてGithubページ上に展開すればいいみたい。セッティングはconfig.jsonを編集してくれとの事です。ど...
デザイン性と柔軟性にフォーカスしたD3.jsベースのチャートライブラリ・「Taucharts」
Taucharts Tauchartsはデザイン性と柔軟性を重視したD3.jsベースのJSライブラリです。多くのチャートライブラリが見難いと感じた為、本職のデザイナーや情報視覚化の専門家の監修のもと、情報の整理、可視性が向上されたデザ...
フリックにも対応のレスポンシブなスライダーを実装出来るスクリプト・「Flickity」
Flickity Flickityはスマフォのフリック操作にも対応したレスポンシブなイメージスライダーの為のスクリプトです。非依存型ですが、jQueryを使ってセッティングのコードを簡略化する事も出来るように設計されているみたいです。...
マテリアルデザインを取り入れたWebサイトやアプリのWebギャラリー・「MaterialUp」
MaterialUp MaterialUpはマテリアルデザインを取り入れたWebサイトやモバイルアプリを紹介するショーケースです。カテゴリはWebサイト、モバイルアプリ、コンセプトデザインやちょっとしたエレメントのスタイルなどに分けら...
別アイコンにアニメーション付きで切り替える方法をまとめている・「MENU TO CROSS ICON」
MENU TO CROSS ICON MENU TO CROSS ICONは別アイコンにアニメーションエフェクト付きで切り替える方法を紹介しているWebサイトです。SVGやアイコンフォント、ユニコードと、CSS3やJavaScript...
日記用に作られたミニマルなWordPressテーマ・「Daily」
Daily Dailyは日記用に作られたミニマルなスタイルのWordPressテーマです。可読性の向上を重視し、実際の日記帳のようにミニマルなスタイリングが施されています。当方が配布しているShotokuをご覧いただくと分かるかもです...
ブラウザのタブテキストを別のテキストと交互に表示可能にするスクリプト・「blinkTitle.js」
blinkTitle.js blinkTitle.jsはブラウザのタブの表示されたタイトルテキストを別のテキストと交互に表示させるスクリプトです。アラートなど任意のタイミングでtitleタグのテキストを他のテキストと交互に表示し、点滅...
SASSベースのRWD対応CSSフレームワーク・「SPACEBASE」
SPACEBASE SPACEBASEはSASSベースのレスポンシブWebデザイン対応CSSフレームワークです。最低限必要なUIコンポーネントは用意されており、オールドブラウザにも対応しているとの事。しっかり触ってないので何とも言えま...
シングルページ向けのWebサイト他言語化スクリプト・「jquery.localizationTool.js」
jquery.localizationTool.js jquery.localizationTool.jsはWebサイトを多言語化する為のスクリプトです。jQueryに依存しています。シングルページ向け、というのは、本スクリプトがAP...
シングルページで構成されたWebアプリケーションの為のJavaScriptフレームワーク・「Composer.js」
Composer.js Composer.jsはシングルページのWebアプリ向けに作られたJavaScript MVCライブラリです。jQueryまたはMootoolsのいずれかに依存するみたいですね。圧縮版で12kbと、軽量なのも素...
モバイルファーストで軽量なRWD対応CSSフレームワーク・「TACHYONS」
TACHYONS TACHYONSはモバイルファーストなCSSフレームワークです。モバイル優先のレスポンシブWebデザイン対応サイト向けに開発されており、サイズも軽量になるよう配慮されています。あらゆるデバイスで可能な限りのパフォーマ...