Material Design Liteを使ってみる

Material Design LiteGoogleが公開しているマテリアルデザインのフレームワークフレームワークであるMaterial Design Liteをご紹介します。まず、マテリアルデザインとは何かと問われると一言で表現するのは難しいですが、あえて言うと「一貫性のあるデザインでストレスを軽減させるために生み出されたものがマテリアルデザイン」でしょうか。詳しくは、マテリアルデザインに関わったディレクターのインタビュー記事をご参照ください。

Material Design Liteの使い方

ダウンロードしたCSS、JSファイルをHTMLに読み込む方法もできますが、GoogleがCDNホストしているファイルをHTMLに読み込むことでも使用できます。

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

2行目のCSSは、CUSTOMIZEページでテーマカラーを変更して使用することが可能です。

コンポーネントを知る

Material Design Liteには以下のリストにあるように多くのコンポーネントが用意されておりサイトを制作する際にコピペで簡単にコンポーネントを使用できます。使い方は、コンポーネントページをご参照ください。

  • Badges
  • Buttons
  • Cards
  • Dialogs
  • Layout
  • Lists
  • Loading
  • Menus
  • Sliders
  • Snackbar
  • Toggles
  • Tables
  • Text Fields
  • Tooltips

テンプレート素材

Material Design Liteには高クオリティのテンプレート素材も公開されておりダウンロードして使用できます。

BLOG

BLOGDemo

ANDROID.COM MDL SKIN

ANDROID.COM MDL SKINDemo

DASHBOARD

DASHBOARDDemo

TEXT-HEAVY WEBPAGE

TEXT-HEAVY WEBPAGEDemo

STAND-ALONE ARTICLE

STAND-ALONE ARTICLEDemo

WordPressテーマ

最後にMaterial Design Liteを使用したWordPressテーマを探してみました。以下のサイトで公開されておりダウンロードして使用できます。

http://mdlwp.com/Material Design Lite WordPress Theme