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