Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize

最近のWebページでよく使用されているさまざまなコンポーネントやエレメントがフラットにデザインされたCSSベースのフレームワークを紹介します。

オープンソースで、個人でも商用でも無料で利用できます。

サイトのキャプチャ

Materialize
Materialize -GitHub

MaterializeはGoogleが提唱する「Material Design」をベースに、ユーザエクスペリエンスにフォーカスされたCSSベースのフレームワークです。

もちろん、デスクトップ、タブレット、スマホなどのレスポンシブ対応です。

サイトのキャプチャ

Materializeの特徴

さまざまなコンポーネントが数多く用意されており、簡単なHTMLで実装できます。
下記にいくつかご紹介。

サイトのキャプチャ

コンポーネント:タイポグラフィ

まずは、見出しやパラグラフなどのタイポグラフィ。

サイトのキャプチャ

コンポーネント:グリッド

グリッドは使いやすい12カラムベース。

サイトのキャプチャ

コンポーネント:フォーム

Material Designのスタイルを踏襲したフォーム。

サイトのキャプチャ

コンポーネント:ボタン

ボタンにはクリック・タップに「波紋」のエフェクトが適用されています。

サイトのキャプチャ

コンポーネント:ナビゲーションバー

ロゴを伴ったバースタイルのナビゲーション。

サイトのキャプチャ

コンポーネント:カード

最近増えてきたカード型のコンポーネントも用意されています。

サイトのキャプチャ

Sass: Mixin

SassのさまざまなMixinも用意されています。

サイトのキャプチャ

Sass: Color

カラーは同一色相の繊細で美しいグラデーションが簡単に利用できます。

サイトのキャプチャ

Sass: Shadow

シャドウはふわりとしたものから、かなり浮かんでいるものまで。

サイトのキャプチャ

JavaScript: Toast

スクリプトを使ったコンポーネントも数多く用意されています。

サイトのキャプチャ

JavaScript: Tabs

タブ、ツールチップ、ドロップダウン、モーダルボックスなどの定番もの。

サイトのキャプチャ

JavaScript: Parallax

パララックスは制作中っぽいです。

サイトのキャプチャ

JavaScript: Material Box

画像を拡大表示するLightboxは、Material Designにあったスタイルで。

top of page

©2018 coliss