mdl

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)

タグ: ,

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

最新情報をお届けします

楽天モバイル

楽天モバイル、「年末年始大感謝セール」開催 P9 liteはスーパーSALEよりも安い14,990円

楽天スーパーセールでも安売りを行っていた楽天モバイルですが、それとは関係なく「年末年始大感謝セール」としてZenFone 2 Laserが82%オフなどなのセールを開始しました。 年末年始大感謝セール

mobile-offline-folders-1300x760

Dropbox、モバイルアプリでオフラインアクセスが可能に

DropboxがAndroid、iOS版アプリでオフラインアクセスに対応することを発表しました。 Windows/Mac版では以前からオフラインアクセス(フォルダ同期)に対応していましたが、モバイル版

honor

HUAWEIのサブブランドhonorが12月16日に新製品を発表 Xiaomi Mi MIXに対抗したベゼルレス端末?

HUAWEIのサブブランド、honorが12月16日に新製品を発表するということで公式サイト上でティザーを公開しています。 ティザーの中にも書かれていますが、発表されるのはhonor Magic。 X

Adobe CC

Adobe Creative Cloudコンプリート版がトータル約41% OFFの大特価セール中

先日までAmazonで30%オフセールが行われていたAdobeのCriative Cloudですが、今度は27%オフ+レジで20%オフ(トータル約41%オフ)という大規模セールが実施されています。 対

BenQ Wit

BenQの目に優しいデスクライトWiTは子供の勉強机で使うには理想的かもしれない【AD】

会社を辞めてから、特に予定がない場合はほとんどの時間を机に向かって過ごしているのですが、さすがに最近目の疲れが気になりだしてきました。 昼間はまだいいのですが、特に夜が顕著でディスプレイを見ながら手元

SonyのSmartWatch 3が公式ストアで9,880円に値下がり コストコでは8,980円

SonyのSmartWatch 3が公式ストアで9,880円に値下がり コストコでは8,980円

SonyのAndroid Wearスマートウォッチ、SmartWatch 3 SWR50がコストコで8,980円(税込)で販売されていました。 売っていたのはコストコの幕張店。 もともと2...

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEIの最新モデル、HUAWEI Mate 9を購入したので早速レビューです。 まだ1ShopmobileやExpansys、GearBestなどのECサイトには入荷していなかったので、今回...

Pebble Time 2、Pebble Coreはキャンセルされ、返金が行われるとのこと(追記あり)

Pebble Time 2、Pebble Coreはキャンセルされ、返金が行われるとのこと(追記あり)

FitbitによるPebbleの買収の話が出ていますが、これにより開発中だったPebble Time 2、Pebble Coreはキャンセルされるという話をBloombergが伝えています。 関...

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

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

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

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

MENU

back to top