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)

タグ: ,

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

最新情報をお届けします

LINEモバイルにLINE MUSICもカウントフリーになる「MUSIC+プラン」が誕生

LINEモバイルに新プランとなる「MUSIC+プラン」が誕生しました。 LINE MUSICがカウントフリーになるMUSIC+ LINEモバイルではLINEアプリがカウントフリー、つまりデータ量を消費

Windows Helloに対応したセキュリティ認証デバイス「Yubikey」の使い勝手を試してみた

2016年9月にWindows Helloに対応したこともあり、昨年末あたりから海外サイトで何かと話題を目にするようになったYubikeyを購入してみました。 認証デバイス Yubikey Yubik

Biglobe、海外版のiPhoen SE販売開始 シャッター音が鳴るか鳴らないかは運次第?

Biglobeが海外版iPhone SEの販売を開始しています。 16GBモデルでカラーはゴールドのみとなっています。 BiglobeのiPhone SE 価格 価格はアシストパックLで下記の通り。

BIGLOBE、2月1日から事務手数料に「SIMカード準備料 394円」を追加

Biglobeが2月1日申し込み分から、SIMカード準備料として394円(税別)が新たに発生すると発表しました。 【お知らせ】「BIGLOBE LTE・3G」SIMカード発行時の「SIMカード準備料」

マクドナルドのFree WiFi(00_MCD-FREE_WIFI)でNetflixの無料動画を視聴してみた

2016年の10月からNetflixと提携し、一部店舗で試験的にNetflixのコンテンツが視聴できるようになっていたマクドナルドのFree WiFiですが、実は11月からはFree WiFiが導入さ

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

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

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

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

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

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

世界最小級の紛失防止タグ「MAMORIO」 ユーザー数が増えると紛失時の発見率も上がる「クラウドトラッキング機能」を搭載

世界最小級の紛失防止タグ「MAMORIO」 ユーザー数が増えると紛失時の発見率も上がる「クラウドトラッキング機能」を搭載

日本でも提供が開始されたスターアップの製品を扱うAmazon Launchpad。 関連:Amazon、スマートアップの製品のみを扱う特設ストア「Amazon Launchpad」を日本でも開始...

マクドナルドのFree WiFi(00_MCD-FREE_WIFI)でNetflixの無料動画を視聴してみた

マクドナルドのFree WiFi(00_MCD-FREE_WIFI)でNetflixの無料動画を視聴してみた

2016年の10月からNetflixと提携し、一部店舗で試験的にNetflixのコンテンツが視聴できるようになっていたマクドナルドのFree WiFiですが、実は11月からはFree WiFiが導...

任天堂のスマートフォンゲーム「ファイアーエムブレム ヒーローズ」発表 iOS/Androidとも2月2日に配信開始

任天堂のスマートフォンゲーム「ファイアーエムブレム ヒーローズ」発表 iOS/Androidとも2月2日に配信開始

任天堂のスマートフォン向けアプリ第3弾として、「ファイアーエムブレム ヒーローズ」が発表されました。 配信予定は2月2日となっています。 既存のファイアーエムブレムシリーズの移植ではなく、スマー...

MENU

back to top