家系図のような縦表示の階層を描けるスタイルシート・「hierarchi-view」 hierarchi-view hierarchi-viewは上図のような家系図でよくある縦表示の階層を描けるCSSです。例では企業等での役職順が表現されています。こういうの作るの割と面倒なので地味に使いみちあるかもですね。 hi...2017.04.23 | 10時49分38秒
Foundationに加える事ができるUIコンポーネントを配布する・「Building Blocks」 Building Blocks Building BlocksはCSSフレームワークのFoundationに加える事ができるUIコンポーネントを配布するWebサイトです。zurbが公式に公開しているものになります。ナビゲーションやメデ...2017.04.21 | 10時20分11秒
軽量でカスタマイズ性を重視したCSSフレームワーク・「mini.css」 mini.css mini.cssは軽量且つカスタマイズ性を重視したCSSはフレームワークです。各種コンポーネントも用意されており、構成はBootstrapやMaterial Framework、Foundation等を意識しているの...2017.04.20 | 10時54分07秒
ファンタジーをイメージしたアイコンを使えるFont AwesomeライクなCSSツールキット・「RPG-Awesome」 RPG-Awesome RPG-AwesomeはファンタジーRPGをイメージして作られたアイコンフォントのセットです。Font Awesomeライクな作りになっているようですね。オーラをまとった人物ピクトグラム、ドラゴンの羽や武器、モ...2017.04.19 | 10時43分18秒
HTML5やjQuery、React など様々な言語やライブラリのboilerplateをキュレーションしている・「BOILRPLATE」 BOILRPLATE BOILRPLATEは様々な言語やライブラリのboilerplateを収集しているキュレーションページです。様々といっても底まで多くなく、HTML5、Go、React、node.js、AndroidやElectr...2017.04.18 | 10時35分16秒
CSSフレームワークのBulma向けのテーマを配布する・「Bulmaswatch」 Bulmaswatch Bulmaswatchは以前ご紹介したCSSフレームワーク、Bulma向けのスタイルテーマを配布するWebサイトです。多くはないものの、20以上のテーマが公開されています。Bulmaを使ってこれから何か作る予定...2017.04.16 | 10時38分16秒
軽量シンプルなツールチップライブラリ・「Tippy.js」 Tippy.js Tippy.jsは軽量シンプルなツールチップライブラリです。他ライブラリを必要としない非依存型となっています。Popper.jsがベースみたいですね。オプションもいろいろ。使い方も簡単そうですね。ライセンスはMIT。...2017.04.12 | 10時09分50秒
シンプルでエクステンシブルなフレームワークを目指したCSSフレームワーク・「Vanilla Framework」 Vanilla Framework Vanilla Frameworkはシンプルでエクステんシブルなフレームワークを目指しているCSSフレームワークです。OSのUbuntuをサポートするカノニカル社が公開しているみたいですね。シンプル...2017.04.09 | 10時02分17秒
スクロールに応じて要素にアニメーションエフェクトを付与できるライブラリ・「AOS」 AOS AOSはスクロールに応じて要素にアニメーションエフェクトを付与出来るライブラリです。Animate On Scrollの略だそうで、簡単にスクロールに応じたエフェクトを実装する事が出来ます。ライブラリを読み込んでエフェクトを与...2017.04.04 | 10時43分09秒
基本的なUIコンポーネントを備えたミニマルなCSSフレームワーク・「Look」 Look Lookはリストやボタン、フォーム、カラーパターン等の基本的なUIコンポーネントを備えたミニマルなCSSフレームワークです。基本的なUIと言っても、ある程度のコンポーネントを全て揃えているものではないようです。他、配置の為の...2017.04.03 | 10時22分18秒
SVGを使ったプログレスバーを実装出来るスクリプト・「jQuery-svg-progress」 jQuery-svg-progress jQuery-svg-progressはSVGを使ったプログレスバーを実装出来るスクリプトです。jQueryに依存します。SVGなのである程度自由にカスタマイズできる点が魅力ですね。モニター幅の...2017.04.02 | 10時32分30秒
JSONデータから年表のようなタイムラインを作れるスクリプト・「Albe Timeline」 Albe Timeline Albe TimelineはJSONデータから年表を作成出来るスクリプトです。jQueryに依存しています。JSON形式で書かれたデータで自動的に上図のようなタイムラインを作ることが出来ます。シンプルに、た...2017.04.01 | 10時01分43秒
SNSのシェアボタンを手軽に設置できるスクリプト・「jquery.sharebox」 jquery.sharebox jquery.shareboxはSNSのシェアボタンを手軽に設置できるスクリプトです。名前のとおり、jQueryに依存しています。スクリプトとCSSを読み込んで空の要素を設置すればそのページに対応したシ...2017.03.30 | 10時31分36秒
Webアプリの為のミニマルなフロントエンドフレームワーク・「uix」 uix uixはモダンなWebアプリケーションの為に構築されたミニマルなフロントエンドフレームワークです。Webアプリケーション構築の際のスタイリングプロセスを簡素化するコンポーネントを提供するのが目的で、拡張性を考慮し、ミニマル設計...2017.03.27 | 10時46分44秒
基本的なUIコンポーネントも備わったベーシックなCSSフレームワーク・「Caramel」 Caramel Caramelは基本的なUIコンポーネントも備わったベーシックでモダン、レスポンシブなCSSフレームワークです。ボタンのスタイルやRWDに対応したナビゲーション、通知、パンくずやテーブル、プログレスバーからページネーシ...2017.03.26 | 10時17分46秒
ITCSSガイドラインに沿って設計されたWebアプリの為のCSSフレームワーク・「Base-L」 Base-L Base-LはITCSSガイドラインに沿って設計されたWebアプリの為のCSSフレームワークです。ITCSSはあまり聞き慣れない方も多いかもしれませんが、CSS Wizardryの人が提唱したメソドロジーです。詳しく解説...2017.03.24 | 10時19分37秒
Meteor + Vue.jsのマテリアルデザインUIフレームワーク・「viu」 viu viuはMeteor + Vue.jsのUIフレームワークです。マテリアルデザインに基づいたスタイルとなっています。モバイルファーストで各コンポーネントが用意されています。詳細が書かれてないので今後の事等は分かりませんが、ライ...2017.03.22 | 10時55分35秒
軽量でベーシックなレスポンシブWebデザイン対応CSSフレームワーク・「Cirrus」 Cirrus Cirrusは軽量でベーシックなRWD対応CSSフレームワークです。コアに加えて必要なコンポーネントのをモジュール式に追加する形のようですね。最低限のコンポーネントに加えてホバーエフェクトやカードスタイルも用意されている...2017.03.20 | 10時15分23秒
手軽に使える、スクロールに応じて動作するパララックス系スクリプト・「paroller.js」 paroller.js paroller.jsは手軽に導入できるパララックススクリプトです。jqueryに依存します。スクリプトを読みこんで設定、対象の要素に指定されたカスタムデータ属性を付与するだけと、楽に導入できるのが魅力です。こ...2017.03.17 | 10時54分26秒
flexboxを使った、シンプル軽量なグリッドシステム・「Waffle grid」 Waffle grid Waffle gridはflexboxを使った、シンプル軽量なグリッドシステムです。7kbほどのスタイルシートでレスポンシブ、カスタマイズ性も考慮された設計との事です。ありがちなclassなのでフレームワーク的...2017.03.16 | 10時44分48秒
使用してないCSSを解析して削除、使用中のものだけ残してくれる・「UnCSS」 UnCSS UnCSSはCSSををパースして使用してないスタイルを削除、使用中のものだけ残してくれるツールです。OSSとしてもソースコードが公開されています。この手のは先発のツールがありますので好みで。複数Webページにまたがってパー...2017.03.15 | 10時36分15秒
CSSアニメーションを手軽に作成、コードをコピー出来る・「Animista」 Animista Animistaは手軽にCSSアニメーションを作成、コードをコピーできるWebツールです。BasicやEntrance、TextやAttentionなどを選択してアニメーションを作成すればコードが発行されます。動作を...2017.03.14 | 10時25分26秒