これなら簡単で便利!最近見かけるCSSのさまざまなコンポーネントをコピペで利用できる -CodyHouse Framework
Post on:2019年6月20日
HTMLとCSS、そしてJavaScriptで実装された最近のWebページやスマホアプリで見かけるさまざまなコンポーネントを簡単に利用できるフレームワークを紹介します。
各コンポーネントは単体でもHTMLとCSSのコピペで利用できるので、既存ページや他のフレームワークにも簡単に使うことができて便利です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019061900-01.png)
CodyHouse Framework Components
CodyHouse Framework -GitHub
CodyHouse Frameworkの特徴
CodyHouse Frameworkは、最近のWebページやスマホアプリで見かけるさまざまなコンポーネントを簡単に利用できるフレームワークです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018081006.png)
-
- CSSベースの軽量フレームワーク
- アクセシブルで、Webページやスマホアプリのインターフェースを構築するための8Kb軽量フロントエンドフレームワーク。
-
- さまざまなコンポーネント
- HTMLとCSS、そしてJavaScriptで実装された、87種類のコンポーネント。
-
- 実装もカスタマイズも簡単
- コピペで利用でき、既存のCSSルールを上書きする必要はありません。
-
- モバイルファースト
- すべてのコンポーネントは、モバイルファーストで実装されています。
-
- プログレッシブエンハンスメント
- すべてのコンポーネントは、プログレッシブエンハンスメントに従って構築されています。
-
- ライセンス
- MITライセンスで、個人でも商用でも無料で利用できます。
一つコンポーネントを見てましょう。
テキストリンクをホバーすると、背景がハイライトするエフェクトです。ハイライトのアニメーションは、さまざまな種類が用意されています。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201903/2019061900-10.gif)
コンポーネントを利用するのも簡単。
デモページの右上から、HTMLやSCSSのコードを表示でき、コピペで利用できます。
![デモのHTMLとCSS](http://coliss.com/wp-content/uploads-201903/2019061900-11.gif)
CodyHouse Frameworkのコンポーネント
コンポーネントは10カテゴリに、87種類が現在利用できます。
対応ブラウザはすべてのモダンブラウザで、IE 10+, Edgeもサポートされています。IE 9はアクセスは可能だけれど、スタイルが少し異なるサポートになっています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019061900-02.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019061900-03.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019061900-04.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019061900-05.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019061900-06.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019061900-07.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019061900-08.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019061900-09.png)
sponsors