このシリーズを見る
CSSマスター 公開日

【CSS】Googleが公開したUI/UXライブラリ「Material Design Lite」を試してみた

, , ,
Tsukasa Nagata
編集長 and ユニマルCOO
twitter64 Facebook38 Google+0 B!はてブ228 Pocket154

Androidをはじめ、Googleサービスで導入されているMaterial Design（マテリアルデザイン）のUI/UXを簡単に使うことができるライブラリが公開されました。
配布元はGoogleで、Material Design Liteと呼ばれるライブラリです。

  • CSS
  • font
  • Javascript

のライブラリです。
早速使い方と使用例を見て行きたいと思います。

ダウンロード

Material Design Lite

上記URLからどうぞ。
DLが済んだら配置し、以下のように指定してあげます。

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

ちなみにCDN版もあります。

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

BOWERもあります。

bower install material-design-lite --save

Let’s TRY!!

See the Pen vOjJWL by Tsukasa Nagata (@nt-uni) on CodePen.0

さっそく試してみました。
コンポーネントとしては、

  • Badges
  • Buttons
  • Cards
  • Layout
  • Loading
  • Menus
  • Sliders
  • Toggles
  • Tables
  • Text Fields
  • Tooltips

とあり、全てクラスにmdl-xxxという感じでMaterial Design Liteを示す接頭語が付きます。
Layoutでは12個のグリッドで配置することができます。

詳しくはこちらをどうぞ。
Material Design Lite

まとめ

テンプレートとしてダッシュボード系のUIや、ANDROID.COMのページなどが用意されています。
クリックエフェクトも細かくコンポーネント化されており、簡単に今どきのUXを実装することが可能です。

Material Design Lite｜CUSTOMIZEではメインカラーとアクセントカラーを選択することでカスタマイズされたMaterial Design Liteライブラリを使うことも可能です。是非お試しください。

この記事を読んだ人にオススメ！

twitter64 Facebook38 Google+0 B!はてブ228 Pocket154

フォローして続編をチェック

Universions
@universionsをフォロー