Androidをはじめ、Googleサービスで導入されているMaterial Design(マテリアルデザイン)のUI/UXを簡単に使うことができるライブラリが公開されました。
配布元はGoogleで、Material Design Liteと呼ばれるライブラリです。
- CSS
- font
- Javascript
のライブラリです。
早速使い方と使用例を見て行きたいと思います。
ダウンロード
上記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ライブラリを使うことも可能です。是非お試しください。
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事