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)

タグ: ,

この記事が気に入ったらフォロー・購読をお願いします

最新情報をお届けします

News >モバイル

HUAWEIとGoogle、Raspberry PiっぽいAndroid向け開発ボードを発表

HUAWEIとGoogleが、Raspberry PiののようなSingle Board Computer(SBC)、HiKey 960を発表しました。 Raspberry Piのようにそれを使ってなにかしらをDIYする ...

News >モバイル

Google、Nexus / Pixelへのセキュリティアップデート提供期限を公開

GoogleのNexusとPixelは、発売から2年間はAndroidのアップデートを提供、3年間はセキュリティアップデートを提供ということになっています。でも実際いつまで?というのはなかなか把握しきれなかったりするもの ...

News >モバイル

任天堂、3D表示のなくなった3DS、new 2DS LLを7月に発売

任天堂がnew 3DS LLから3D機能を取り除いたnew 2DS LLを7月13日に発売すると発表しました。価格は税抜14,980円。 折りたためない廉価版扱いの2DSはすでに発売中ですが、new 2DS LLは通常の ...

News >モバイル

背面が透明なGalaxy S8を作る方法。フィルムさえ剥がせれば意外と簡単そう

透明で中が見えるシースルーなガジェットというのはいつの時代もなかなかに魅力的なもの。今回は発売されたばかりのGalaxy S8の背面をシースルーにするハックがYouTubeで公開されています。 ガラスバックを採用している ...

最大60%オフ! PlayStation VRタイトル 期間限定セール開催中

PlayStation Storeが期間限定でPlayStaion VRのタイトルを最大60%オフとするセールを開催しています。 PlayStation VRタイトル 期間限定セール サマーレッスンが含まれていないので、 ...

MENU

back to top