Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize
Post on:2014年11月11日
最近のWebページでよく使用されているさまざまなコンポーネントやエレメントがフラットにデザインされたCSSベースのフレームワークを紹介します。
オープンソースで、個人でも商用でも無料で利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111101.png)
Materialize
Materialize -GitHub
MaterializeはGoogleが提唱する「Material Design」をベースに、ユーザエクスペリエンスにフォーカスされたCSSベースのフレームワークです。
もちろん、デスクトップ、タブレット、スマホなどのレスポンシブ対応です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111103.png)
Materializeの特徴
さまざまなコンポーネントが数多く用意されており、簡単なHTMLで実装できます。
下記にいくつかご紹介。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111102-01.png)
まずは、見出しやパラグラフなどのタイポグラフィ。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111102-02.png)
グリッドは使いやすい12カラムベース。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111102-03.png)
Material Designのスタイルを踏襲したフォーム。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111102-04.png)
ボタンにはクリック・タップに「波紋」のエフェクトが適用されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111102-05.png)
ロゴを伴ったバースタイルのナビゲーション。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111102-06.png)
最近増えてきたカード型のコンポーネントも用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111104-02.png)
SassのさまざまなMixinも用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111104-03.png)
カラーは同一色相の繊細で美しいグラデーションが簡単に利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111104-04.png)
シャドウはふわりとしたものから、かなり浮かんでいるものまで。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111104-05.png)
スクリプトを使ったコンポーネントも数多く用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111104-06.png)
タブ、ツールチップ、ドロップダウン、モーダルボックスなどの定番もの。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111104-07.png)
パララックスは制作中っぽいです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014111104-08.png)
画像を拡大表示するLightboxは、Material Designにあったスタイルで。
sponsors