WEBサイトにMaterial Designの要素を簡単に実装できるMaterial Design Liteが公開されました

2015.7.7 (更新日:2016.03.02)
mdl

GoogleがAndroid 5.0 Lollipopから採用したMaterial Designを簡単にWEBに持ってこれるフレームワーク、Material Design Light(MDL)が公開されました。

Google公式というわけではありませんが、Googleのエンジニアが作成したものです。

これで何ができるかというと、下記のようなMaterial Designでおなじみのアニメーション効果のあるボタンが簡単に作れます。

MDL2

使い方は簡単で、まずヘッダーにMDLのファイルへのリンクを設定します。

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

ボタンそのものは、下記のようなHTMLで表示可能です。

 <!-- Accent-colored raised button with ripple -->
 <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">Button</button>
 <!-- Colored FAB button -->
 <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"><i class="material-icons">add</i></button>

実際にボタンを表示しようかと思いましたが、スタイルシートの調整が面倒なのでやめました。

WEBサイトでMaterial Designを実現する方法としては、Polymerというライブラリが存在していますが、使い方が若干難しいです。

その点、MDLはやれることは少ないですが、使用方法は簡単ですね。

なお、MDLはPolymerとも共存が可能になっています。

このサイトもそろそろ真面目にこういうライブラリを使ってMaterial Design対応しないとなぁ。

(via XDA-Developer)
(source medium.com)

タグ: ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Amazonでビデオレンタルに使える200円クーポンを配布中(2月26日まで)

2月24日から始まったプレミアムフライデー、導入企業はSSRガチャ並みのレア度で実際に恩恵にあずかれた人はごくわずかのようです。 しかし、Amazonではプレミアだった人もそうじゃなかった人もビデオで

スライドQWERTYなMoto Modsが間もなくIndiegogoでキャンペーンを開始

やっぱり出てきた、Moto Z用QWERTYなMoto Mods! motorolaのMoto Z / Moto Z PlayはMoto Modsという着せ替えジャケットに対応しており、バッテリーやカ

指紋認証で管理するパーソナル金庫のような財布Cashewがindiegogoを通じて販売中

各種電子マネーや、bitcoinなどの仮想通貨はだいぶ浸透してきていますが、まだまだ現金が必要ですし、クレジットカードなども持ち運ぶ必要があります。 ただそれらを財布に入れて持ち運ぶのは紛失などが心配

Qualcomm、スタンドアロンVR開発キットをSnapdragon 835にアップデート

QuaicommがSnapdragon 835になったスタンドアロンVRの開発キットを発表しました。 昨年9月にはSnapdragon 820版の開発キットを発表していたので、そのバージョンアップです

SIMトレイを搭載したHUAWEI Watch 2の画像がリーク

HUAWEIが今週末から始まるMWCでHUAWEI P10とともに発表するスマートウォッチ、HUAWEI Watch 2がリークしています。 Android Wear 2.0を搭載する端末で、LG W

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

スライドQWERTYなMoto Modsが間もなくIndiegogoでキャンペーンを開始

スライドQWERTYなMoto Modsが間もなくIndiegogoでキャンペーンを開始

やっぱり出てきた、Moto Z用QWERTYなMoto Mods! motorolaのMoto Z / Moto Z PlayはMoto Modsという着せ替えジャケットに対応しており、バッテリ...

指紋認証で管理するパーソナル金庫のような財布Cashewがindiegogoを通じて販売中

指紋認証で管理するパーソナル金庫のような財布Cashewがindiegogoを通じて販売中

各種電子マネーや、bitcoinなどの仮想通貨はだいぶ浸透してきていますが、まだまだ現金が必要ですし、クレジットカードなども持ち運ぶ必要があります。 ただそれらを財布に入れて持ち運ぶのは紛失などが...

Amazonでビデオレンタルに使える200円クーポンを配布中(2月26日まで)

Amazonでビデオレンタルに使える200円クーポンを配布中(2月26日まで)

2月24日から始まったプレミアムフライデー、導入企業はSSRガチャ並みのレア度で実際に恩恵にあずかれた人はごくわずかのようです。 しかし、Amazonではプレミアだった人もそうじゃなかった人もビデ...

SIMトレイを搭載したHUAWEI Watch 2の画像がリーク

SIMトレイを搭載したHUAWEI Watch 2の画像がリーク

HUAWEIが今週末から始まるMWCでHUAWEI P10とともに発表するスマートウォッチ、HUAWEI Watch 2がリークしています。 Android Wear 2.0を搭載する端末で、L...

MENU

back to top