Material Design Lite（マテリアルデザインライト）

はじめに

マスターCSSとJavaScriptを含める

プロジェクトの各HTMLページにMaterial LiteのCSSとJavaScriptファイルを含めます。CDNでホストされているファイルを使用することをお勧めします。また、カスタマイズしてダウンロードして自分でホストしたり、ソースコードからビルドしたり、npm/Bowerプロジェクトにインストールしたりすることもできます。

ホストダウンロードビルド Bower npm

HTMLページに次の<link>と<script>要素を追加するだけです（gzip圧縮で27kB）

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

カラースキームを選択

マテリアルデザインで使用されるカラースキームは、プライマリカラーとアクセントカラーに基づいており、パーソナライズすることができます。これらの色は、material.{primary}-{accent}.min.css（例：material.indigo-pink.min.css）のパターンに従ってCSSファイル名で指定されます。CDNは、一般的なマテリアルデザインカラーに基づいた多くのカラーコンビネーションをホストしています。利用可能なカラーコンビネーションを確認してプレビューするには、カスタマイズとプレビューツールを使用してください。

縮小版のCSSとJavascriptをダウンロードする（gzip圧縮で27kB）

HTMLページに<link>と<script>要素を追加してこれらのファイルを参照し、マテリアルアイコンフォントも含めます。

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

カラースキームを選択

マテリアルデザインで使用されるカラースキームは、プライマリカラーとアクセントカラーに基づいており、パーソナライズすることができます。カスタマイズとプレビューツールを使用して、サイトのプライマリカラーとアクセントカラーの組み合わせを選択してプレビューします。次に、ボタンを使用してカスタマイズされたMaterial Design Lite CSSをダウンロードし、`material.min.css`をカスタマイズされたものに置き換えます。

ソースコードはGitHubでホストされています。コードをダウンロードしてビルドする必要があります。

シェルで次のコマンドを実行します

# Clone/copy the Material Design lite source code.
git clone https://github.com/google/material-design-lite.git
# Go into the newly created folder containing the source code.
cd material-design-lite
# Install necessary dependencies.
npm install && npm install -g gulp
# Build a production version of the components.
gulp

Material Design Liteライブラリのファイルはdistフォルダにあります。プロジェクトにコピーしてください。

HTMLページに<link>と<script>要素を追加してこれらのファイルを参照し、マテリアルアイコンフォントも含めます

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意

この方法を使用すると、MDL要素のカラースキームをカスタマイズできません。カラースキームをカスタマイズする場合は、CDNでホストされているライブラリまたはダウンロード可能なライブラリを使用してください。この場合は、カスタマイズとプレビューツールを使用してください。

Bowerが有効になっているプロジェクトに、Material Design Liteファイルを簡単にインストールするには、次を使用します。

シェルで次のコマンドを実行します

bower install material-design-lite --save

これにより、Material Design Liteライブラリファイルがプロジェクトのbower_componentsフォルダにインストールされます。

HTMLページに<link>と<script>要素を追加してこれらのファイルを参照し、マテリアルアイコンフォントも含めます

<link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意

npmが有効になっているプロジェクトに、Material Design Liteファイルを簡単にインストールするには、次を使用します。

シェルで次のコマンドを実行します

npm install material-design-lite --save

これにより、Material Design Liteライブラリファイルがプロジェクトのnode_modulesフォルダにインストールされます。

HTMLページに<link>と<script>要素を追加してこれらのファイルを参照し、マテリアルアイコンフォントも含めます

<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

注意

これで完了です！サイトにMDLコンポーネントを追加する準備ができました。

コンポーネントを使用する

以下に、MDLのボタン要素の例をいくつか示します。リップル付きボタンとFABボタンです。対応するソースコードをプロジェクトのHTMLページの<body>にコピー＆ペーストするだけで、以下のように要素がレンダリングされます。

レイズドボタン

色付きFAB

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>
<style></style>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>
<style></style>
<style>
body {
  padding: 20px;
  background: #fafafa;
  position: relative;
}
</style>

MDL要素は、CSSクラスを追加することで微調整および構成できます。たとえば、MDL ボタンにmdl-js-ripple-effectを追加すると、ボタンをクリックしたときにリップル効果が追加され、mdl-button--fabを追加すると、ボタンのスタイルがFABボタンに変更されます。

カードコンテナ、スライダー、テーブル、メニューなど、他にも多くの要素があります... MDL要素とオプションの完全なセットについては、コンポーネントページをご覧ください。

テンプレートもご覧ください。これらは、MDLコンポーネントを使用したすぐに使えるウェブサイトテンプレートです。次のプロジェクトをすぐに始めるために、お気軽にご覧ください。

一般的なルールと原則

一般的に、HTMLページでMDLコンポーネントを使用するには、次の基本的な手順に従います。

使用するMDLコンポーネントに応じて、<button>、<div>、または<ul>などの標準HTML要素から始めます。これにより、ページに要素が確立され、MDLの変更の準備が整います。
コンポーネントに応じて、mdl-buttonまたはmdl-tabs__panelなどの1つ以上のMDL固有のCSSクラスを要素に追加します。クラスは、MDLの拡張機能を要素に適用し、MDLコンポーネントに変換します。

モバイルデバイスが正しくレンダリングされるように、ドキュメントにメタビューポートタグを含めることを忘れないでください。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML要素とMDL CSSクラスに関する注意

Material Design Liteは、コンポーネントを構築するために、名前空間付きのBEMクラス（ほぼすべてのHTML要素に適用可能）を使用します。一部のコンポーネントでは、ほぼすべての要素を使用できます。各コンポーネントのドキュメントの例では、そのコンポーネントとしてうまく機能する要素を使用しています。例に示されている要素以外の要素を使用する必要がある場合は、アプリケーションに最適なHTML要素とMDL CSSクラスの組み合わせを見つけるために実験することをお勧めします。

動的なウェブサイトでMDLを使用する

Material Design Liteは、ページの読み込み時にMDLクラスでマークされたすべての要素を自動的に登録してレンダリングします。ただし、DOM要素を動的に作成している場合は、upgradeElement関数を使用して新しい要素を登録する必要があります。上記セクションに示されているのと同じレイズドボタンをリップル付きで動的に作成する方法は次のとおりです。

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

MDLの役割とは？

Material Design Liteは、ウェブサイト向けに軽量で基本的なマテリアルデザインコンポーネントとテンプレートを提供するように構築されています。このプロジェクトは、考えられるすべてのUXニーズを作成するための構造を提供することを意図しておらず、構築できる摩擦の少ないマテリアルデザインの実装を提供することを意図しています。マテリアルデザイン自体の中でも、特にカードは、すべての組み合わせをシームレスに提供することは不可能です。ドロワーのドロップダウンなど、提供されていないものが見つかった場合は、独自のコンポーネントをコーディングする必要がある場合があります。

チームは、liteの約束に忠実でありながら、開発者に素晴らしいエクスペリエンスを提供することに尽力しています。

次のステップ

MDLクラスとその効果、コーディングに関する考慮事項、構成オプションなど、コンポーネントの使用に関する詳細な手順については、コンポーネントページをご覧ください。MDL要素を一緒に使用しているサイトの例は、テンプレートページにあります。

ライセンス

ダウンロードキット

目次

マスターCSSとJavaScriptを含める

カラースキームを選択

カラースキームを選択

注意

注意

注意

コンポーネントを使用する

一般的なルールと原則

HTML要素とMDL CSSクラスに関する注意

動的なウェブサイトでMDLを使用する

MDLの役割とは？

次のステップ

ライセンス