はじめに

Material Design Lite (MDL) の **バッジ** コンポーネントは、画面上の通知要素です。バッジは、通常は数字やその他の文字を含む小さな円形で、別のオブジェクトの近くに表示されます。バッジは、オブジェクトに関連付けられた追加のアイテムがあることを通知するものであり、アイテムの数を示すインジケーターでもあります。

バッジを使用して、ユーザーが気付かない可能性のあるアイテムにさりげなく注意を引いたり、アイテムに注意が必要であることを強調したりすることができます。たとえば

• 「新しいメッセージ」の通知には、未読メッセージの数が含まれるバッジが付いている場合があります。
• 「ショッピングカートに未購入のアイテムがあります」というリマインダーには、カート内のアイテム数を示すバッジが含まれている場合があります。
• 「ディスカッションに参加しましょう！」ボタンには、現在ディスカッションに参加しているユーザー数を示すバッジが付いている場合があります。

バッジは、ほとんどの場合、リンクの近くに配置されるため、ユーザーはバッジによって示された追加情報に簡単にアクセスできます。ただし、意図によっては、バッジ自体がリンクの一部であるとは限りません。

バッジはユーザーインターフェースの新しい機能であり、ユーザーに関連する追加コンテンツを発見するための視覚的な手がかりを提供します。したがって、そのデザインと使い方は、全体的なユーザーエクスペリエンスにおいて重要な要素です。

MDL **バッジ** コンポーネントを含めるには

 1. <a>（アンカー/リンク）または<span>要素を記述します。必要な属性とコンテンツを含めます。

<a href="#">This link has a badge.</a>

 2. class属性を使用して、1つ以上のMDLクラスをスペースで区切って要素に追加します。

<a href="#" class="mdl-badge">This link has a badge.</a>

 3. data-badge属性と、バッジの引用符で囲まれた文字列値を追加します。

<a href="#" class="mdl-badge" data-badge="5">This link has a badge.</a>

バッジコンポーネントは使用準備ができました。

**注:** バッジコンポーネントのサイズは小さいため、data-badge値には通常、1〜3文字を含める必要があります。3文字を超える文字を含めてもエラーは発生しませんが、一部の文字はバッジの外側に表示されるため、見にくい場合や見えない場合があります。data-badge属性の値は、バッジの中央に配置されます。

例

リンク内のバッジ。

<a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>

リンクの近くにあるが、リンクに含まれていないバッジ。

<a href="#">This link is followed by a badge.</a>
<span class="mdl-badge" data-badge="12"></span>

バッジに収まりきらない文字数の多いリンク内のバッジ。

<a href="#" class="mdl-badge" data-badge="123456789">
This badge has too many characters.</a>

バッジの背景色が設定されていないリンク内のバッジ。

<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="123">
This badge has no background color.</a>

設定オプション

MDL CSSクラスは、バッジにさまざまな事前に定義された視覚的な強化を適用します。以下の表に、使用可能なクラスとその効果を示します。

はじめに

Material Design Lite (MDL) の **ボタン** コンポーネントは、標準的なHTML <button> 要素の拡張バージョンです。ボタンは、ユーザーがクリックまたはタッチしたときにどのようなアクションが発生するかを明確に伝えるテキストや画像で構成されます。MDLボタンコンポーネントはさまざまな種類のボタンを提供し、表示効果とクリック効果の両方を追加できます。

ボタンは、サイトのコンテンツや機能に関係なく、ほとんどのユーザーインターフェースに普遍的に存在する機能です。したがって、そのデザインと使い方は、全体的なユーザーエクスペリエンスにおいて重要な要素です。詳細は、ボタンコンポーネントの マテリアルデザイン仕様ページ を参照してください。

使用可能なボタンの表示タイプは、フラット（デフォルト）、立体、fab、ミニfab、およびアイコンです。これらのタイプのいずれも、プレーン（ライトグレー）またはカラーにすることができ、最初は、またはプログラムによって無効にできます。fab、ミニfab、およびアイコンボタンタイプは、通常、テキストではなく小さな画像をキャプションとして使用します。

MDL **ボタン** コンポーネントを含めるには

 1. <button> 要素を記述します。IDやイベントハンドラーなどの必要な属性と値を含め、必要に応じてテキストキャプションまたは画像を追加します。

<button>Save</button>

 2. class 属性を使用して、1 つ以上の MDL クラスをスペースで区切ってボタンに追加します。

<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>

ボタンコンポーネントは使用準備ができました。

例

「立体」効果のあるボタン。

<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>

「fab」効果のあるボタン。

<button class="mdl-button mdl-js-button mdl-button--fab">OK</button>

「アイコン」と「カラー」効果のあるボタン。

<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">?</button>

設定オプション

MDL CSS クラスは、ボタンにさまざまな事前に定義された視覚的および動作上の強化を適用します。以下の表に、使用可能なクラスとその効果を示します。

**注:** 使用可能なすべてのボタンタイプの無効バージョンが提供されており、標準的なHTMLブール属性disabledを使用して呼び出されます。<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>立体リップル無効</button>。あるいは、mdl-button--disabledクラスを使用して同じスタイルを実現できますが、要素の機能は無効になりません。この属性は、スクリプティングによってプログラムで追加または削除できます。

はじめに

Material Design Lite (MDL) の **カード** コンポーネントは、写真、テキスト、リンクなど、単一の主題に関する関連データを含む仮想的な紙片を表すユーザーインターフェース要素です。

カードは、異なる種類のオブジェクトで構成される関連コンテンツを一貫して表示する便利な手段です。また、サイズやサポートされるアクションが大きく異なる同様のオブジェクト（可変長のキャプション付きの写真など）の提示にも適しています。カードには一定の幅と、コンテンツに応じて可変の高さがあります。

カードはユーザーインターフェースの比較的新しい機能であり、ユーザーはより複雑で詳細な情報へのアクセス ポイントを提供します。そのデザインと使い方は、全体的なユーザーエクスペリエンスにおいて重要な要素です。詳細は、カードコンポーネントの マテリアルデザイン仕様ページ を参照してください。

MDL **カード** コンポーネントを含めるには

1. <div> 要素を記述します。これはカードのすべてのコンテンツを保持することを目的とした「外部」コンテナです。

<div>
</div>

2. div の中に、目的のコンテンツブロックごとに 1 つ以上の「内部」div を記述します。タイトル、画像、テキスト、アクションバーを含むカードには、すべて兄弟要素である 4 つの「内部」div が含まれます。

<div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</div>

3. class 属性を使用して、「外部」div と「内部」div（それぞれの用途に応じて）に、スペースで区切った 1 つ以上の MDL クラスを追加します。

<div class="mdl-card">
  <div class="mdl-card__title">
  ...
  </div>
  <div class="mdl-card__media">
  ...
  </div>
  <div class="mdl-card__supporting-text">
  ...
  </div>
  <div class="mdl-card__actions">
  ...
  </div>
</div>

4. 標準的な HTML 要素と、必要に応じて追加の MDL クラスを使用して、「内部」div にコンテンツを追加します（これも用途によって異なります）。

<div class="mdl-card">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">title Text Goes Here</h2>
  </div>
  <div class="mdl-card__media">
    <img src="photo.jpg" width="220" height="140" border="0" alt="" style="padding:20px;">
  </div>
  <div class="mdl-card__supporting-text">
    This text might describe the photo and provide further information, such as where and
    when it was taken.
  </div>
  <div class="mdl-card__actions">
    <a href="(URL or function)">Related Action</a>
  </div>
</div>

カードコンポーネントが使用できるようになりました。

例

タイトル、画像、テキスト、アクションを含むカード（影なし）。

<div class="mdl-card">
  <div class="mdl-card__title">
     <h2 class="mdl-card__title-text">Auckland Sky Tower<br>Auckland, New Zealand</h2>
  </div>
  <div class="mdl-card__media">
    <img src="skytower.jpg" width="173" height="157" border="0" alt=""
     style="padding:10px;">
  </div>
  <div class="mdl-card__supporting-text">
  The Sky Tower is an observation and telecommunications tower located in Auckland,
  New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
  in the Southern Hemisphere.
  </div>
  <div class="mdl-card__actions">
     <a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29">Wikipedia entry</a>
  </div>
</div>

画像、キャプション、テキストを含むカード（レベル3の影）。

<div class="mdl-card mdl-shadow--4dp">
  <div class="mdl-card__media"><img src="skytower.jpg" width="173" height="157" border="0"
   alt="" style="padding:10px;">
  </div>
  <div class="mdl-card__supporting-text">
    Auckland Sky Tower, taken March 24th, 2014
  </div>
  <div class="mdl-card__supporting-text">
  The Sky Tower is an observation and telecommunications tower located in Auckland,
  New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
  in the Southern Hemisphere.
  </div>
</div>

設定オプション

MDL CSS クラスは、カードにさまざまな定義済みの視覚的および動作上の拡張機能を適用します。以下の表に、使用可能なクラスとその効果を示します。

はじめに

Material Design Lite (MDL) の**チップ**コンポーネントは、小さくインタラクティブな要素です。チップは、一般的に連絡先、テキスト、ルール、アイコン、写真に使用されます。

MDL チップコンポーネントを含めるには

1. チップのコンテナ要素を作成します。通常は<span>と<div>が使用されますが、任意のコンテナ要素でも同様に機能します。インタラクティブな機能が必要な場合は、<button>を使用するか、コンテナにtabindex属性を追加します。

<span>
</span>

2. テキストラッパーと MDL クラスを追加します。

<span class="mdl-chip">
    <span class="mdl-chip__text">Chip Text</span>
</span>

3. 削除可能なチップの場合、削除アイコンを追加します。これは<a>、<button>、または<span>などの非インタラクティブなタグにすることができます。

<span class="mdl-chip">
    <span class="mdl-chip__text">Chip Text</span>
    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</span>

4. コンタクトチップには、コンテナにmdl-chip--contactクラスと、コンタクトアイコン用の別のコンテナを追加する必要があります。写真用のアイコンコンテナは通常<img>タグですが、少し追加のCSSを使用すれば、他の種類のコンテンツも使用できます。

<span class="mdl-chip">
    <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
    <span class="mdl-chip__text">Chip Text</span>
    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</span>

例

コンタクト画像がbackground-imageを持つ<span>であるボタンベースのコンタクトチップ。

<style>
    .demo-chip .mdl-chip__contact {
        background-image: url("./path/to/image");
        background-size: cover;
    }
</style>

<button class="mdl-chip demo-chip">
    <span class="mdl-chip__contact">&nbsp;</span>
    <span class="mdl-chip__text">Chip Text</span>
    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</button>

CSS クラス

はじめに

Material Design Lite (MDL) の**ダイアログ**コンポーネントを使用すると、ユーザーアクションの確認、簡単なデータ入力、ユーザーに追加情報を提供するためのアラートを行うことができます。

基本的な使用方法

dialog 要素をサポートするブラウザを使用している必要があります。執筆時点では、Chrome と Opera のみがネイティブサポートしています。他のブラウザでは、dialog ポリフィルを含めるか、独自のものを作成する必要があります。

ダイアログのサポートが得られたら、ダイアログ要素を作成します。ポリフィルを使用する場合、要素は**必ず**body要素の子要素である必要があります。そのコンテナ内に、mdl-dialog__contentクラスを持つコンテンツ要素を追加します。コンテンツを追加してから、mdl-dialog__actionsクラスを持つアクションコンテナを作成します。最後にマークアップとして、このコンテナ内にダイアログ機能をトリガーするためのボタンを追加します。

アクションの順序は自動的に反転されることに注意してください。Material Design では、プライマリ（確認）アクションを最後に表示する必要があります。そのため、最初に作成するアクションは、アクションバーの最後に表示されます。これにより、仕様に従いつつ、より自然なコーディングとタブの順序付けが可能になります。

アクション項目のイベントハンドラーを追加することを忘れないでください。ダイアログのマークアップを作成したら、ダイアログを表示するようにトリガーするイベントリスナーをページに追加します。

例として

  var button = document.querySelector('button');
  var dialog = document.querySelector('dialog');
  button.addEventListener('click', function() {
    dialog.showModal();
    /* Or dialog.show(); to show the dialog without a backdrop. */
  });

例

シンプルなダイアログ

codepenでこのライブ例を参照してください。

<body>
  <button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Allow data collection?</h4>
    <div class="mdl-dialog__content">
      <p>
        Allowing us to collect data will let us get you the information you want faster.
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button">Agree</button>
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>
</body>

アクションの幅全体を使用するダイアログ

codepenでこのライブ例を参照してください。

<body>
  <button type="button" class="mdl-button show-modal">Show Modal</button>
  <dialog class="mdl-dialog">
    <div class="mdl-dialog__content">
      <p>
        Allow this site to collect usage data to improve your experience?
      </p>
    </div>
    <div class="mdl-dialog__actions mdl-dialog__actions--full-width">
      <button type="button" class="mdl-button">Agree</button>
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    var showModalButton = document.querySelector('.show-modal');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showModalButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>
</body>

CSS クラス

ブロック

要素

修飾子

はじめに

Material Design Lite (MDL) の**レイアウト**コンポーネントは、MDL 開発の原則を使用し、MDL コンポーネントを効率的に使用できるようにし、さまざまなブラウザ、画面サイズ、デバイスに自動的に適応する包括的なページレイアウトアプローチです。

適切でアクセス可能なレイアウトは、サイトのコンテンツや機能に関係なく、すべてのユーザーインターフェースの重要な機能です。したがって、ページのデザインとプレゼンテーションは、全体的なユーザーエクスペリエンスにおいて重要な要素です。詳細については、レイアウトコンポーネントのMaterial Design 仕様ページを参照してください。

MDL レイアウトの原則を使用すると、再利用可能なコンポーネントを提供することにより、スケーラブルなページの作成が簡素化され、認識可能な視覚要素を確立し、論理的な構造グリッドに準拠し、複数のプラットフォームと画面サイズで適切な間隔を維持することにより、環境全体の一貫性が促進されます。MDL レイアウトは非常に強力で動的であり、外見と動作の一貫性を高めながら、開発の柔軟性と使いやすさを維持できます。

基本的な MDL **レイアウト**コンポーネントを含めるには

1. <div> 要素を記述します。これはレイアウト全体を保持する「外部」div です。

<div>
</div>

**注:** レイアウトは<body>要素に直接適用できません。常にネストされた<div>要素を作成してください。

2. class 属性を使用して、スペースで区切った MDL クラスを div に追加します。

<div class="mdl-layout mdl-js-layout">
</div>

3. div の中に<header>要素を記述します。これには、大画面で表示されるナビゲーションリンクを含むヘッダー行と、小さい画面のナビゲーションドロワーを開くメニューアイコンが含まれます。class 属性を使用して、ヘッダーに MDL クラスを追加します。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
  </header>
</div>

4. ヘッダーの中に、メニューアイコンを作成するための<div>を追加し、指示どおりに MDL クラスを含めます。div 自体にはコンテンツはありません。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
  </header>
</div>

5. ヘッダーの中に、ヘッダー行のコンテンツを保持するための別の<div>を追加し、指示どおりに MDL クラスを含めます。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
    </div>
  </header>
</div>

6. ヘッダー行の div の中に、レイアウトタイトルを含む span を追加し、指示どおりに MDL クラスを含めます。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
    </div>
  </header>
</div>

7. span の後に、ヘッダーのナビゲーションリンクを右揃えにするための<div>を追加し、指示どおりに MDL クラスを含めます。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
    </div>
  </header>
</div>

8. スペーサー div の後に、ヘッダーのナビゲーションリンクを含む<nav>要素を追加し、指示どおりに MDL クラスを含めます。nav の中に、ヘッダーリンクごとにアンカー<a>要素を 1 つ追加し、指示どおりに MDL クラスを含めます。これでレイアウトのヘッダーが完成しました。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
</div>

9. ヘッダーの後に、スライドアウトドロワーのコンテンツを保持するための<div>要素を追加し、指示どおりに MDL クラスを追加します。ドロワーは小さい画面で自動的に表示され、任意の画面サイズでメニューアイコンを使用して開くことができます。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
  </div>
</div>

10. ドロワー div の中に、レイアウトタイトルを含む span を追加します（これは手順 5 のタイトルと一致する必要があります）。指示どおりに MDL クラスを含めます。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Simple Layout</span>
  </div>
</div>

11. span の後に、ドロワーのナビゲーションリンクを含む<nav>要素を追加し、ドロワーリンクごとにアンカー<a>要素を 1 つ追加します（これらは手順 7 のリンクと一致する必要があります）。指示どおりに MDL クラスを含めます。これでレイアウトのドロワーが完成しました。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Simple Layout</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Nav link 1</a>
      <a class="mdl-navigation__link" href="#">Nav link 2</a>
      <a class="mdl-navigation__link" href="#">Nav link 3</a>
    </nav>
  </div>
</div>

12. 最後に、ドロワー div の後に、レイアウトの主要なコンテンツを保持するための<main>要素を追加し、指示どおりに MDL クラスを含めます。その要素の中に、目的のコンテンツを追加します。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Simple Layout</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Nav link 1</a>
      <a class="mdl-navigation__link" href="#">Nav link 2</a>
      <a class="mdl-navigation__link" href="#">Nav link 3</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <p>Content</p>
    <p>Goes</p>
    <p>Here</p>
  </main>
</div>

レイアウトコンポーネントが使用できるようになりました。

例

大画面では固定ヘッダー、小画面では折りたたみ可能なドロワーを持つレイアウト。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Material Design Lite</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Hello</a>
        <a class="mdl-navigation__link" href="#">World.</a>
        <a class="mdl-navigation__link" href="#">How</a>
        <a class="mdl-navigation__link" href="#">Are</a>
        <a class="mdl-navigation__link" href="#">You?</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Material Design Lite</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Hello</a>
      <a class="mdl-navigation__link" href="#">World.</a>
      <a class="mdl-navigation__link" href="#">How</a>
      <a class="mdl-navigation__link" href="#">Are</a>
      <a class="mdl-navigation__link" href="#">You?</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div>Content</div>
  </main>
</div>

コンテンツと共にスクロールする固定されていないヘッダーを持つ同じレイアウト。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--scroll">
    <img class="mdl-layout-icon"></img>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Material Design Lite</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Hello</a>
        <a class="mdl-navigation__link" href="#">World.</a>
        <a class="mdl-navigation__link" href="#">How</a>
        <a class="mdl-navigation__link" href="#">Are</a>
        <a class="mdl-navigation__link" href="#">You?</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Material Design Lite</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Hello</a>
      <a class="mdl-navigation__link" href="#">World.</a>
      <a class="mdl-navigation__link" href="#">How</a>
      <a class="mdl-navigation__link" href="#">Are</a>
      <a class="mdl-navigation__link" href="#">You?</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div>Content</div>
  </main>
</div>

大画面ではサイドバーナビゲーションとして機能する固定ドロワーを持つレイアウト。ドロワーは折りたたまれ、メニューアイコンは小画面で表示されます。

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Fixed drawer layout demo</span>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Material Design Lite</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Hello</a>
      <a class="mdl-navigation__link" href="#">World.</a>
      <a class="mdl-navigation__link" href="#">How</a>
      <a class="mdl-navigation__link" href="#">Are</a>
      <a class="mdl-navigation__link" href="#">You?</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div>Content</div>
  </main>
</div>

固定ドロワーを持つがヘッダーを持たないレイアウト。

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Material Design Lite</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Hello</a>
      <a class="mdl-navigation__link" href="#">World.</a>
      <a class="mdl-navigation__link" href="#">How</a>
      <a class="mdl-navigation__link" href="#">Are</a>
      <a class="mdl-navigation__link" href="#">You?</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div>Content</div>
  </main>
</div>

設定オプション

MDL CSS クラスは、レイアウトにさまざまな定義済みの視覚的および動作上の拡張機能を適用します。以下の表に、使用可能なクラスとその効果を示します。

はじめに

Material Design Lite (MDL)の**グリッド**コンポーネントは、複数の画面サイズに合わせてコンテンツをレイアウトするための簡素化された方法です。さまざまな表示条件でコンテンツブロックを正しく表示するために必要な通常のコーディングの負担を軽減します。

MDLグリッドは、コンテナ要素によって定義および囲まれています。グリッドには、デスクトップ画面サイズで12列、タブレットサイズで8列、電話サイズで4列あり、各サイズには事前に定義されたマージンとガターがあります。セルは、いくつかの例外を除いて、定義されている順序で、行に連続して配置されます。

• セルのサイズが画面サイズのカラム数より小さい場合、次の行に折り返されます。
• セルの指定されたカラムサイズが現在の画面サイズのカラム数以上の場合、その行全体を占めます。

`max-width` CSSプロパティを設定することで、グリッドの最大幅を設定でき、その幅を超えるとグリッドは両側にパディングを付けて中央に配置されたままになります。

グリッドは、ほとんどのユーザーインターフェースでは比較的新しい非標準化機能であり、ユーザーが理解したり保持したりするのが難しい可能性のあるコンテンツを整理された方法で表示する方法を提供します。その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素です。

MDL **グリッド**コンポーネントを含めるには

　1. `<div>`要素を記述します。これは「外部」コンテナであり、グリッドのすべてのセルを保持することを目的としています。必要に応じてdivのスタイルを設定します（色、フォントサイズなど）。

<div>
</div>

　2. `class`属性を使用して、`mdl-grid` MDLクラスをdivに追加します。

<div class="mdl-grid">
</div>

　3. 各セルについて、表示するテキストを含む1つの「内部」divを記述します。

<div class="mdl-grid">
  <div>Content</div>
  <div>goes</div>
  <div>here</div>
</div>

　4. `class`属性を使用して、「内部」divに`mdl-cell`クラスと`mdl-cell--COLUMN-col`クラスを追加します。ここで、COLUMNはセルのカラムサイズを指定します。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">Content</div>
  <div class="mdl-cell mdl-cell--4-col">goes</div>
  <div class="mdl-cell mdl-cell--4-col">here</div>
</div>

　5. オプションで、`mdl-cell--COLUMN-col-DEVICE`クラスを追加します。ここで、COLUMNは特定のデバイスのセルのカラムサイズを指定し、DEVICEはデバイスの種類を指定します。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">Content</div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">goes</div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">here</div>
</div>

グリッドコンポーネントは使用準備ができました。

例

カラムサイズが1の5つのセルを持つグリッド。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
</div>

カラムサイズが6のセル1つ、カラムサイズが4のセル1つ、カラムサイズが2のセル1つの3つのセルを持つグリッド。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">CS 6</div>
  <div class="mdl-cell mdl-cell--4-col">CS 4</div>
  <div class="mdl-cell mdl-cell--2-col">CS 2</div>
</div>

カラムサイズが6の3つのセルで、タブレットデバイスではカラムサイズが8として表示されるグリッド。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
</div>

カラムサイズが2の4つのセルで、電話デバイスではカラムサイズが4として表示されるグリッド。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
</div>

設定オプション

MDL CSSクラスは、グリッドにさまざまな事前に定義された視覚的な拡張機能と動作効果を適用します。以下の表に、使用可能なクラスとその効果を示します。

はじめに

Material Design Lite (MDL)の**タブ**コンポーネントは、異なるコンテンツブロックが互いに排他的な方法で同じ画面スペースを共有できるようにするユーザーインターフェース要素です。タブは常に2つ以上のセットで表示され、アプリのさまざまなビューや機能的な側面を簡単に探索および切り替えたり、カテゴリ化されたデータセットを個別に参照したりすることができます。タブはそれぞれのコンテンツの「見出し」として機能します。アクティブなタブ（現在表示されているコンテンツのタブ）は常に他のタブとは視覚的に区別されるため、ユーザーは現在のコンテンツがどの見出しに属しているかがわかります。

タブは、ユーザーインターフェースにおける確立された非標準化機能であり、異なるがしばしば関連するコンテンツブロック（多くの場合、パネルと呼ばれる）を表示できます。タブは画面の領域を節約し、ナビゲーションと関連するユーザーの混乱を減らしながら、データへの直感的で論理的なアクセスを提供します。その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素です。詳細については、タブコンポーネントのMaterial Design仕様ページを参照してください。

MDL **タブ**コンポーネントのセットを含めるには

　1. `<div>`要素を記述します。これは「外部」divであり、すべてのタブとそのコンテンツを含むことを目的としています。

<div>
</div>

　2. 「外部」divの中に、タブ自体と各タブのコンテンツの「内部」divを記述します。すべて兄弟要素です。つまり、3つのコンテンツタブの場合、4つの「内部」divを記述します。

<div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</div>

　3. 最初の「内部」div（タブ）の中に、各タブのアンカー`<a>`（リンク）タグを記述します。タブの`id`属性値と一致する値を持つ`href`属性と、簡潔なリンクテキストを含めます。残りの「内部」div（コンテンツ）に、リンクの`href`と一致する値を持つ`id`属性を記述します。

<div>
  <div>
    <a href="#tab1">Tab One</a>
    <a href="#tab2">Tab Two</a>
    <a href="#tab3">Tab Three</a>
  </div>
  <div id="tab1">
  ...
  </div>
  <div id="tab2">
  ...
  </div>
  <div id="tab3">
  ...
  </div>
</div>

　4. 残りの「内部」divの中に、各パネルに表示するコンテンツを記述します。標準的なHTMLタグを使用して、必要に応じてコンテンツの構造を記述します。

<div>
  <div>
    <a href="#tab1">Tab One</a>
    <a href="#tab2">Tab Two</a>
    <a href="#tab3">Tab Three</a>
  </div>
  <div id="tab1">
    <p>First tab's content.</p>
  </div>
  <div id="tab2">
    <p>Second tab's content.</p>
  </div>
  <div id="tab3">
    <p>Third tab's content.</p>
  </div>
</div>

　5. `class`属性を使用して、1つ以上のMDLクラスをスペースで区切って「外部」divと「内部」divに追加します。デフォルトで表示するタブには`is-active`クラスを含めるようにしてください。

<div class="mdl-tabs mdl-js-tabs">
  <div class="mdl-tabs__tab-bar">
    <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
    <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
    <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
  </div>
  <div class="mdl-tabs__panel is-active" id="tab1">
    <p>First tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab2">
    <p>Second tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab3">
    <p>Third tab's content.</p>
  </div>
</div>

タブコンポーネントは使用準備ができました。

例

タブリンクにリップル効果のある3つのタブ。

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
    <a href="#about-panel" class="mdl-tabs__tab is-active">About the Beatles</a>
    <a href="#members-panel" class="mdl-tabs__tab">Members</a>
    <a href="#albums-panel" class="mdl-tabs__tab">Discography</a>
  </div>
  <div class="mdl-tabs__panel is-active" id="about-panel">
    <p><b>The Beatles</b> were a four-piece musical group from Liverpool, England.
    Formed in 1960, their career spanned just over a decade, yet they are widely
    regarded as the most influential band in history.</p>
    <p>Their songs are among the best-loved music of all time. It is said that every
    minute of every day, a radio station somewhere is playing a Beatles song.</p>
  </div>
  <div class="mdl-tabs__panel" id="members-panel">
    <p>The Beatles' members were:</p>
    <ul>
      <li>John Lennon (1940-1980)</li>
      <li>Paul McCartney (1942-)</li>
      <li>George Harrison (1943-2001)</li>
      <li>Ringo Starr (1940-)</li>
    </ul>
  </div>
  <div class="mdl-tabs__panel" id="albums-panel">
    <p>The Beatles' original UK LPs, in order of release:</p>
    <ol>
      <li>Please Please Me (1963)</li>
      <li>With the Beatles (1963)</li>
      <li>A Hard Day's Night (1964)</li>
      <li>Beatles for Sale (1964)</li>
      <li>Help! (1965)</li>
      <li>Rubber Soul (1965)</li>
      <li>Revolver (1966)</li>
      <li>Sgt. Pepper's Lonely Hearts Club Band (1967)</li>
      <li>The Beatles ("The White Album", 1968)</li>
      <li>Yellow Submarine (1969)</li>
      <li>Abbey Road (1969)</li>
      <li>Let It Be (1970)</li>
    </ol>
  </div>
</div>

設定オプション

MDL CSSクラスは、タブに様々な定義済みの視覚的および動作的な拡張機能を適用します。以下の表に、利用可能なクラスとその効果を示します。

はじめに

Material Design Lite (MDL)のフッターコンポーネントは、関連する大量のコンテンツを視覚的に魅力的で論理的に直感的な領域に表示することを目的とした包括的なコンテナです。「フッター」と呼ばれていますが、他のコンテンツの前後を問わず、デバイス画面の適切な場所に配置できます。

MDLフッターコンポーネントには、メガフッターとミニフッターの2つの基本的な形式があります。名前が示すように、メガフッターはミニフッターよりも多くの（そしてより複雑な）コンテンツを含みます。メガフッターは水平線で区切られた複数のコンテンツセクションを表示する一方、ミニフッターは単一のコンテンツセクションを表示します。どちらのフッター形式にも独自の内部構造があり、必須要素とオプション要素が含まれ、通常はリンクなどの情報コンテンツとクリック可能なコンテンツの両方が含まれます。

このコンポーネントで表されるフッターは、ユーザーインターフェースにおける比較的新しい機能であり、ユーザーはまとまりのある一貫性のある方法で個別のコンテンツブロックを表示できます。その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素です。

MDLのメガフッターコンポーネントを含めるには

 1a. <footer>要素を記述します。フッターの中に、コンテンツセクションごとに1つの<div>要素を含めます。通常は3つ（上部、中央、下部）です。

<footer>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</footer>

 1b. class属性を使用して、フッターとdivに適切なMDLクラスを追加します。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
  ...
  </div>
  <div class="mdl-mega-footer__middle-section">
  ...
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 2a. 上部セクションのdivの中に、左と右のコンテンツセクションの2つの兄弟「内側」divを記述します。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div>
    ...
    </div>
    <div>
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
  ...
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 2b. class属性を使用して、2つの「内側」の左と右のdivに適切なMDLクラスを追加します。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
  ...
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 3a. 中央セクションのdivの中に、ドロップダウンコンテンツセクションの兄弟「内側」divを1つ以上記述します。つまり、2つのドロップダウンセクションの場合は、2つのdivを記述します。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div>
    ...
    </div>
    <div>
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 3b. class属性を使用して、2つの「内側」のドロップダウンdivに適切なMDLクラスを追加します。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 4a. 下部セクションのdivの中に、セクションの見出しのための「内側」divと、下部セクションのリンクのための兄弟の順序なしリストを記述します。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div>
      ...
    </div>
    <ul>
      ...
    </ul>
  </div>
</footer>

 4b. class属性を使用して、「内側」のdivの見出しとリストに適切なMDLクラスを追加します。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div class="mdl-logo">
    </div>
    <ul class="mdl-mega-footer__link-list">
      ...
    </ul>
  </div>
</footer>

 5. フッターの上部（左と右）、中央（ドロップダウン）、下部（テキストとリンク）セクションにコンテンツを追加します。必要に応じてclass属性を使用して適切なMDLクラスを含めます。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
      <button class="mdl-mega-footer__social-btn"></button>
      <button class="mdl-mega-footer__social-btn"></button>
      <button class="mdl-mega-footer__social-btn"></button>
    </div>
    <div class="mdl-mega-footer__right-section">
      <a href="">Link 1</a>
      <a href="">Link 2</a>
      <a href="">Link 3</a>
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Drop-down 1 Heading</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="">Link A</a></li>
        <li><a href="">Link B</a></li>
        <li><a href="">Link C</a></li>
        <li><a href="">Link D</a></li>
      </ul>
    </div>
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Drop-down 2 Heading</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="">Link A</a></li>
        <li><a href="">Link B</a></li>
        <li><a href="">Link C</a></li>
      </ul>
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div class="mdl-logo">
    Mega-Footer Bottom Section Heading
    </div>
    <ul class="mdl-mega-footer__link-list">
      <li><a href="">Link A</a></li>
      <li><a href="">Link B</a></li>
    </ul>
  </div>
</footer>

メガフッターコンポーネントが使用できるようになりました。

例

3つのセクションと、中央セクションに2つのドロップダウンセクションを持つメガフッターコンポーネント。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
      <button class="mdl-mega-footer__social-btn"></button>
      <button class="mdl-mega-footer__social-btn"></button>
      <button class="mdl-mega-footer__social-btn"></button>
    </div>
    <div class="mdl-mega-footer__right-section">
      <a href="#">Introduction</a>
      <a href="#">App Status Dashboard</a>
      <a href="#">Terms of Service</a>
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Learning and Support</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="#">Resource Center</a></li>
        <li><a href="#">Help Center</a></li>
        <li><a href="#">Community</a></li>
        <li><a href="#">Learn with Google</a></li>
        <li><a href="#">Small Business Community</a></li>
        <li><a href="#">Think Insights</a></li>
      </ul>
    </div>
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Just for Developers</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="#">Google Developers</a></li>
        <li><a href="#">AdWords API</a></li>
        <li><a href="#">AdWords Scipts</a></li>
        <li><a href="#">AdWords Remarketing Tag</a></li>
      </ul>
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div class="mdl-logo">
      More Information
    </div>
    <ul class="mdl-mega-footer__link-list">
      <li><a href="#">Help</a></li>
      <li><a href="#">Privacy and Terms</a></li>
    </ul>
  </div>
</footer>

MDLのミニフッターコンポーネントを含めるには

 1a. <footer>要素を記述します。フッターの中に、左セクションと右セクションの2つの<div>要素を記述します。

<footer>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</footer>

 1b. class属性を使用して、フッターとdivに適切なMDLクラスを追加します。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
  ...
  </div>
  <div class="mdl-mini-footer__right-section">
  ...
  </div>
</footer>

 2a. 左セクションのdivの中に、セクションの見出しのための「内側」divと、左セクションのリンクのための兄弟の順序なしリストを記述します。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div>
      ...
    </div>
    <ul>
      ...
    </ul>
  </div>
  <div class="mdl-mini-footer__right-section">
  ...
  </div>
</footer>

 2b. class属性を使用して、「内側」のdivとリストに適切なMDLクラスを追加します。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div class="mdl-logo">
      ...
    </div>
    <ul class="mdl-mini-footer__link-list">
      ...
    </ul>
  </div>
  <div class="mdl-mini-footer__right-section">
  ...
  </div>
</footer>

 3. フッターの左（テキストとリンク）と右（テキストまたは装飾）セクションにコンテンツを追加します。必要に応じてclass属性を使用して適切なMDLクラスを含めます。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div class="mdl-logo">
      Mini-footer Heading
    </div>
    <ul class="mdl-mini-footer__link-list">
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>
  <div class="mdl-mini-footer__right-section">
    <button class="mdl-mini-footer__social-btn"></button>
    <button class="mdl-mini-footer__social-btn"></button>
    <button class="mdl-mini-footer__social-btn"></button>
  </div>
</footer>

ミニフッターコンポーネントが使用できるようになりました。

例

左セクションと右セクションを持つミニフッター。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div class="mdl-logo">
      More Information
    </div>
    <ul class="mdl-mini-footer__link-list">
      <li><a href="#">Help</a></li>
      <li><a href="#">Privacy and Terms</a></li>
      <li><a href="#">User Agreement</a></li>
    </ul>
  </div>
  <div class="mdl-mini-footer__right-section">
    <button class="mdl-mini-footer__social-btn"></button>
    <button class="mdl-mini-footer__social-btn"></button>
    <button class="mdl-mini-footer__social-btn"></button>
  </div>
</footer>

設定オプション

MDL CSSクラスは、フッターに様々な定義済みの視覚的な拡張機能を適用します。以下の表に、利用可能なクラスとその効果を示します。

はじめに

リストは、複数の行項目を1つの連続した要素として垂直に表示します。コンテンツオプションの詳細については、Material Design Specを参照してください。

MDLのリストコンポーネントを含めるには

基本項目を持つリストを作成します。

 1. クラスmdl-listを持つ<ul>要素を記述します。これは「外側」コンテナであり、リストのすべてのコンテンツを保持することを目的としています。

<ul class='mdl-list'>
</ul>

 2. クラスmdl-list__itemを持つ必要な数の<li>要素を記述します。これは、すべての項目のコンテンツを保持することを目的としています。

<ul class='mdl-list'>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
</ul>

 3. 例えば、適切なコンテンツタイプの修飾クラスを使用して、<li>の子としてコンテンツを追加します。

<ul class='mdl-list'>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
</ul>

設定オプション

MDL CSSクラスは、リストに様々な定義済みの視覚的な拡張機能を適用します。以下の表に、利用可能なクラスとその効果を示します。

はじめに

Material Design Lite (MDL)の**プログレス**コンポーネントは、ウェブページまたはアプリケーションにおけるバックグラウンドアクティビティの視覚的なインジケーターです。プログレスインジケーターは、通常は水平方向のバーで構成され、動きを示すアニメーションが含まれています。一部のプログレスデバイスは完了の概算または具体的な割合を示しますが、MDLプログレスコンポーネントは、アクティビティが進行中でまだ完了していないことを伝えるだけです。

プログレスインジケーターは、ユーザーインターフェースにおける確立されたものの標準化されていない機能であり、アプリケーションのステータスをユーザーに視覚的に示します。したがって、その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素となります。詳細については、プログレスコンポーネントのMaterial Design仕様ページを参照してください。

MDL **プログレス**コンポーネントを含めるには

 1. <div>要素を記述します。idや幅など、必要な属性と値を含めます。通常は、ここに示されているようなインラインstyle属性ではなく、外部CSSを使用して行われます。

<div id="prog1" style="width:250px"></div>

 2. class属性を使用して、スペースで区切った1つ以上のMDLクラスをdivに追加します。

<div id="prog1" style="width:250px" class="mdl-js-progress"></div>

プログレスコンポーネントは使用準備ができました。

例

静的（非アニメーション）プログレスインジケーター。

<div id="progstatic" style="width:250px" class="mdl-js-progress"></div>

アクティブ（アニメーション）プログレスインジケーター。

<div id="progactive" style="width:200px" class="mdl-js-progress
 mdl-progress--indeterminate"></div>

設定オプション

MDL CSSクラスは、プログレスインジケーターにさまざまな定義済みの視覚的および動作上の機能強化を適用します。以下の表は、使用可能なクラスとその効果を示しています。

注：mdl-progress__intermediateはコードベースに存在します。名前がBEMの整合性と一致しないため、非推奨です。2.0で削除されます。

はじめに

Material Design Lite (MDL)の**スピナー**コンポーネントは、従来の「待機カーソル」（ハードウェアやソフトウェアのバージョンによって大きく異なります）の拡張版であり、進行中のプロセスがあり、その結果はまだ利用できないことを示します。スピナーは、時計回りにアニメーション化される際に色が変わる開いた円からなり、プロセスが開始されたがまだ完了していないことを明確に伝えます。

スピナー自体は、表示によっても、ユーザーがクリックまたはタッチしたときにも、何のアクションも行わず、プロセスの具体的な進捗状況や完了度を示すものではありません。MDLスピナーコンポーネントは、さまざまな種類のスピナーを提供し、表示効果を追加できます。

スピナーは、ほとんどのユーザーインターフェースの比較的新しい機能であり、ハードウェアデバイス、オペレーティングシステム、またはブラウザー環境に関係なく、進行中のアクティビティに関する一貫した視覚的な手がかりをユーザーに提供します。その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素となります。

MDL **スピナー**コンポーネントを含めるには

 1. スピナーを含む要素（<div>、<p>、または<span>など）を記述します。要素自体はコンテンツを含んではいけません。

<div></div>

 2. class属性を使用して、スペースで区切った1つ以上のMDLクラスをコンテナーに追加します。

<div class="mdl-spinner mdl-js-spinner is-active"></div>

スピナーコンポーネントは使用準備ができました。

例

div内のデフォルトのスピナー。

<div class="mdl-spinner mdl-js-spinner is-active"></div>

段落内の単色スピナー。

<p class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active"></p>

設定オプション

MDL CSSクラスは、スピナーにさまざまな定義済みの視覚的機能強化を適用します。以下の表は、使用可能なクラスとその効果を示しています。

**注：**スピナーには特定の無効バージョンはありません。is-activeクラスの有無によって、スピナーが表示されるかどうかが決まります。たとえば、このスピナーは非アクティブで非表示です：<div class="mdl-spinner mdl-js-spinner"></div>この属性は、スクリプトを介してプログラムで追加または削除できます。

はじめに

Material Design Lite (MDL)の**メニュー**コンポーネントは、ユーザーが複数のオプションの1つを選択できるユーザーインターフェース要素です。選択は通常、アクションの開始、設定の変更、またはその他の観測可能な効果をもたらします。メニューオプションは常に2つ以上のセットで表示され、必要に応じてプログラムで有効または無効にできます。メニューは、ユーザーが複数のオプションから選択するように求められたときに表示され、選択が完了すると通常は閉じられます。

メニューは、ユーザーインターフェースにおける確立されたものの標準化されていない機能であり、ユーザーはソフトウェアのアクティビティ、進捗状況、または特性を指示する選択を行うことができます。その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素となります。詳細については、メニューコンポーネントのMaterial Design仕様ページを参照してください。

MDL **メニュー**コンポーネントを含めるには

**注：**メニューは、静的でない位置指定された親要素が必要です。メニューが静的に配置されたノード内にある場合、配置オプションが正しく機能しない可能性があります。

 1. <button>要素を記述します。これは、メニューオプションの表示と非表示を切り替えるクリック可能なトグルです。次のステップで記述する順序付けされていないリストのfor（またはdata-mdl-for）属性と一致するid属性を含めます。ボタンの中に、選択したアイコンを含む<i>または<span>要素を記述します。

<button id="menu1">
  <i></i>
</button>

 2. <ul>順序付けられていないリスト要素を記述します。これは、オプションを保持するコンテナーです。ボタン要素のid属性と一致するfor属性を含めます。

<ul for="menu1">
</ul>

 3. 順序付けられていないリストの中に、オプションごとに1つの<li>要素を記述します。idやイベントハンドラーなど、必要な属性と値を含め、必要に応じてテキストキャプションを追加します。

<ul for="menu1">
  <li>Continue</li>
  <li>Stop</li>
  <li>Pause</li>
</ul>

 4. class属性を使用して、スペースで区切った1つ以上のMDLクラスをボタンとspan要素に追加します。

<button id="menu1" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

 5. class属性を使用して、スペースで区切った1つ以上のMDLクラスを順序付けられていないリストとリスト項目に追加します。

<ul class="mdl-menu mdl-js-menu" for="menu1">
  <li class="mdl-menu__item">Continue</li>
  <li class="mdl-menu__item">Stop</li>
  <li class="mdl-menu__item">Pause</li>
</ul>

メニューコンポーネントは使用準備ができました。

例

3つのオプションを持つメニュー。

<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
  <li class="mdl-menu__item">Fast</li>
  <li class="mdl-menu__item">Medium</li>
  <li class="mdl-menu__item">Slow</li>
</ul>

ボタンとオプションリンクにリップル効果のある3つのオプションを持つメニュー。

<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="menu-speed">
  <li class="mdl-menu__item">Fast</li>
  <li class="mdl-menu__item">Medium</li>
  <li class="mdl-menu__item">Slow</li>
</ul>

3つのオプションを持つメニュー。2番目のオプションはデフォルトで無効になっています。

<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
  <li class="mdl-menu__item">Fast</li>
  <li class="mdl-menu__item" disabled>Medium</li>
  <li class="mdl-menu__item">Slow</li>
</ul>

設定オプション

MDL CSSクラスは、メニューにさまざまな定義済みの視覚的および動作上の機能強化を適用します。以下の表は、使用可能なクラスとその効果を示しています。

(1) ここでは例として「more-vert」アイコンクラスが使用されています。クラス名を変更することで、他のアイコンを使用できます。使用可能なアイコンのリストについては、このページを参照してください。アイコンの上にカーソルを合わせると、クラス名が表示されます。

(2) 「button」要素のiまたはspan要素は、相互に交換して使用できます。

**注：**メニューオプションの無効バージョンが用意されており、標準的なHTMLブール属性disabledまたはdata-mdl-disabledを使用して呼び出されます。<li class="mdl-menu__item" disabled>Medium</li>この属性は、スクリプトを介してプログラムで追加または削除できます。

はじめに

Material Design Lite (MDL)の**スライダー**コンポーネントは、新しいHTML5の<input type="range">要素の拡張版です。スライダーは、小さな移動可能なディスク（サム）と、通常はユーザーが移動したときに設定される値を明確に伝えるテキストが水平線上に配置されたものから構成されます。

スライダーは、ユーザーインターフェースにおける比較的新しい機能であり、ユーザーはサムを範囲内で移動することで（低い値は左に、高い値は右に）、事前に決められた範囲から値を選択できます。その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素となります。詳細については、スライダーコンポーネントのMaterial Design仕様ページを参照してください。

拡張されたスライダーコンポーネントは、最初は、またはプログラムで無効にすることができます。

MDL **スライダー**コンポーネントを含めるには

 1. <p>段落要素を記述し、必要に応じてスタイルを設定します。スライダーのサイズを決めるCSSのwidthプロパティ（直接またはCSSクラスを介して）を含めます。

<p style="width:300px">
...
</p>

 2. 段落コンテナ内に<input>要素を記述し、その`type`属性の値を`"range"`にします。スクリプトからアクセスできるように`id`属性も付与し、スライダーの範囲を指定する`min`属性と`max`属性を値と共に指定します。スライダーの初期位置を設定する`value`属性（省略可能、省略時は最大値の50%）、そしてサムが移動する増分を指定する`step`属性（省略可能、省略時は1）も値と共に指定します。最後に、ユーザーがスライダーの値を変更したときに実行されるイベントハンドラーを付与します。

<p style="width:300px">
  <input type="range" id="s1" min="0" max="10" value="4" step="2">
</p>

 3. `class`属性を使用して、スペースで区切った1つ以上のMDLクラスをスライダーに追加します。

<p style="width:300px">
  <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>

スライダーコンポーネントは使用準備完了です。

例

音量を制御するスライダー。

<p style="width:300px">
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>

設定オプション

MDL CSSクラスは、スライダーに様々な事前に定義された視覚的および動作的な拡張機能を適用します。以下の表に、利用可能なクラスとその効果を示します。

注記: スライダーの無効化バージョンが用意されており、標準的なHTMLブール属性`disabled`を使用して呼び出されます。<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled> この属性は、スクリプトを介してプログラム的に追加または削除できます。

注記: `value`属性はスライダーの初期値を設定するために使用されますが、プログラム的に値を変更するために使用しないでください。代わりに、MDLの`change()`メソッドを使用してください。例えば、`slider1`がスライダーオブジェクトであり、`newvalue`が目的の値を含む変数であると仮定すると、`slider1.value = newvalue`を使用する代わりに、`slider1.MaterialSlider.change(newvalue)`を使用してください。

ライセンス

Copyright Google, 2015. Apache-2ライセンスに基づいてライセンス供与されています。

はじめに

Material Design Lite (MDL)のsnackbarコンポーネントは、操作の状態をユーザーに通知するために使用されるコンテナです。画面下部に表示されます。snackbarには、ユーザーがコマンドを実行するためのアクションボタンを含めることができます。アクションは、コミットされたアクションを取り消すか、失敗した場合は再試行する必要があります。アクションは、snackbarを閉じるためのものであってはなりません。アクションを提供しない場合、snackbarはtoastコンポーネントになります。

基本的な使用方法

コンテナdiv要素でsnackbarを開始します。そのコンテナで`mdl-js-snackbar`と`mdl-snackbar`クラスを定義します。このコンテナにaria-liveとaria-atomicの値を追加することも有益です。

コンテナ内に、メッセージのコンテナ要素を作成します。この要素には`mdl-snackbar__text`クラスが必要です。この要素は空のままにしてください！テキストは、snackbarの表示が呼び出されたときに追加されます。

コンテナの次に、ボタン要素を追加します。この要素には`mdl-snackbar__action`クラスが必要です。フォームが誤って送信されないように、タイプをボタンに設定することをお勧めします。ここでもテキストコンテンツは空のままにしてください！イベントハンドラーを直接適用しないでください。

これで、snackbarが機能するためのマークアップが完成しました。残りは、JavaScript内でsnackbarコンテナに対して`showSnackbar`メソッドを呼び出すだけです。これは、snackbarのコンテンツを適切に構成するためのプレーンオブジェクトを取ります。複数回連続して呼び出すことができ、メッセージは積み重ねられます。

例

すべてのsnackbarは、同じ要素を通して表示する必要があります。

マークアップ

<div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button type="button" class="mdl-snackbar__action"></button>
</div>

注記：この例には、アクセシビリティのためのいくつかのaria属性が含まれています。必要に応じて、サイトに合わせて変更してください。

Snackbar

var notification = document.querySelector('.mdl-js-snackbar');
var data = {
  message: 'Message Sent',
  actionHandler: function(event) {},
  actionText: 'Undo',
  timeout: 10000
};
notification.MaterialSnackbar.showSnackbar(data);

Toast

var notification = document.querySelector('.mdl-js-snackbar');
notification.MaterialSnackbar.showSnackbar(
  {
    message: 'Image Uploaded'
  }
);

CSS クラス

ブロック

要素

修飾子

データオブジェクト

Snackbarコンポーネントの`showSnackbar`メソッドは、snackbarデータのオブジェクトを取ります。以下の表に、プロパティとその使用方法を示します。

はじめに

Material Design Lite (MDL)のチェックボックスコンポーネントは、標準的なHTML<input type="checkbox">要素の拡張バージョンです。チェックボックスは小さな四角形で構成され、通常は、ユーザーがクリックまたはタッチしたときに設定または解除される2値条件を明確に伝えるテキストが含まれています。チェックボックスは、グループで表示されることが一般的ですが、必ずしもそうではなく、個別に選択および選択解除できます。MDLチェックボックスコンポーネントを使用すると、表示とクリック効果を追加できます。

チェックボックスは、サイトのコンテンツや機能に関係なく、ほとんどのユーザーインターフェースの一般的な機能です。したがって、その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素です。詳細については、チェックボックスコンポーネントのMaterial Design仕様ページを参照してください。

拡張されたチェックボックスコンポーネントは、標準的なチェックボックスよりも鮮やかな視覚的な外観を持ち、最初に、またはプログラム的に無効化することができます。

MDLのチェックボックスコンポーネントを含めるには

 1. <label>要素を記述し、その`for`属性の値を、含めるチェックボックスの一意のidにします。<input>要素が<label>要素内に含まれている場合、`for`属性は省略可能ですが、明確にするために推奨されます。

<label for="chkbox1">
...
</label>

 2. ラベル内に<input>要素を記述し、その`type`属性の値を`"checkbox"`にします。また、その`id`属性の値を、ラベルの`for`属性の値と一致させます。

<label for="chkbox1">
  <input type="checkbox" id="chkbox1">
</label>

 3. ラベル内にも、チェックボックスの後に、チェックボックスのテキストキャプションを含む<span>要素を記述します。

<label for="chkbox1">
  <input type="checkbox" id="chkbox1">
  <span>Enable AutoSave</span>
</label>

 4. `class`属性を使用して、スペースで区切った1つ以上のMDLクラスを、ラベル、チェックボックス、キャプションに追加します。

<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox">
  <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Enable AutoSave</span>
</label>

チェックボックスコンポーネントは使用準備完了です。

例

リップルクリック効果のあるチェックボックス。

<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
  <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Enable AutoSave</span>
</label>

設定オプション

MDL CSSクラスは、チェックボックスに様々な事前に定義された視覚的および動作的な拡張機能を適用します。以下の表に、利用可能なクラスとその効果を示します。

注記: 利用可能なすべてのチェックボックスタイプの無効化バージョンが用意されており、標準的なHTMLブール属性`disabled`を使用して呼び出されます。<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled> この属性は、スクリプトを介してプログラム的に追加または削除できます。

はじめに

Material Design Lite (MDL)のラジオコンポーネントは、標準的なHTML<input type="radio">、または「ラジオボタン」要素の拡張バージョンです。ラジオボタンは小さな円形で構成され、通常は、ユーザーがクリックまたはタッチしたときに設定される条件を明確に伝えるテキストが含まれています。ラジオボタンは常に2つ以上のグループで表示され、個別に選択できますが、同じグループ内の別のラジオボタンを選択することによってのみ選択解除できます（これにより、グループ内の他のすべてのラジオボタンが選択解除されます）。MDLラジオコンポーネントを使用すると、表示とクリック効果を追加できます。

ラジオボタンは、サイトのコンテンツや機能に関係なく、ほとんどのユーザーインターフェースの一般的な機能です。したがって、その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素です。詳細については、ラジオコンポーネントのMaterial Design仕様ページを参照してください。

拡張されたラジオコンポーネントは、標準的なラジオボタンよりも鮮やかな視覚的な外観を持ち、最初に、またはプログラム的に無効化することができます。

MDLのラジオコンポーネントを含めるには

 1. <label>要素を記述し、その`for`属性の値を、含めるラジオボタンの一意のidにします。<input>要素が<label>要素内に含まれている場合、`for`属性は省略可能ですが、明確にするために推奨されます。

<label for="radio1">
...
</label>

 2. ラベル内に<input>要素を記述し、その`type`属性の値を`"radio"`にします。また、その`id`属性の値を、ラベルの`for`属性の値と一致させ、`name`属性の値をラジオボタングループを識別するものにします。必要に応じて、スクリプト目的でラジオボタンに関する情報を提供する`value`属性を値と共に指定します。

<label for="radio1">
  <input type="radio" id="radio1" name="flash" value="on">
</label>

 3. ラベル内にも、ラジオボタンの後に、ラジオボタンのテキストキャプションを含む<span>要素を記述します。

<label for="radio1">
  <input type="radio" id="radio1" name="flash" value="on">
  <span>Always on</span>
</label>

 4. `class`属性を使用して、スペースで区切った1つ以上のMDLクラスを、ラベル、チェックボックス、キャプションに追加します。

<label for="radio1" class="mdl-radio mdl-js-radio">
  <input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button">
  <span class="mdl-radio__label">Always on</span>
</label>

 5. グループ内の他のラジオコンポーネントについても、手順1から4を繰り返します。それぞれについて

• `label`要素で、一意の`for`属性値を指定します
• `input`要素で、その`label`要素の`for`属性値と一致する`id`属性値を指定します
• `input`要素で、グループ内のすべてのラジオコンポーネントに同じ`name`属性値を指定します
• 必要に応じて、`input`要素で一意の`value`属性値を指定します

ラジオコンポーネントは使用準備完了です。

例

カメラのフラッシュ設定を制御するラジオボタンのグループ。

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash1">
  <input checked class="mdl-radio__button" id="flash1" name="flash" type="radio"
   value="on">
  <span class="mdl-radio__label">Always on</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash2">
  <input class="mdl-radio__button" id="flash2" name="flash" type="radio" value="off">
  <span class="mdl-radio__label">Always off</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash3">
  <input class="mdl-radio__button" id="flash3" name="flash" type="radio" value="auto">
  <span class="mdl-radio__label">Automatic</span>
</label>

設定オプション

MDL CSSクラスは、ラジオボタンに様々な事前に定義された視覚的および動作的な拡張機能を適用します。以下の表に、利用可能なクラスとその効果を示します。

注記: 利用可能なすべてのラジオボタングループの無効化バージョンが用意されており、標準的なHTMLブール属性`disabled`を使用して呼び出されます。<input type="radio" id="radio5" name="flash" class="mdl-radio__button" disabled> この属性は、スクリプトを介してプログラム的に追加または削除できます。

はじめに

Material Design Lite (MDL)のアイコントグルコンポーネントは、標準的なHTML<input type="checkbox">要素の拡張バージョンです。アイコントグルは、ユーザーが定義したアイコンで構成され、視覚的な強調表示によって、ユーザーがクリックまたはタッチしたときに設定または解除される2値条件を示します。チェックボックスと同様に、アイコントグルは個別に、またはグループで表示でき、個別に選択および選択解除できます。

アイコントグルは、特に特定のチェックボックスの代替として、サイトのコンテンツや機能に関係なく、ユーザーインターフェースの貴重な機能となる可能性があります。したがって、その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素です。詳細については、アイコントグルコンポーネントのMaterial Design仕様ページを参照してください。

アイコントグルコンポーネントは、標準的なチェックボックスよりもカスタマイズされた視覚的な外観を持つことができ、最初に、またはプログラム的に無効化することができます。

MDLのアイコン・トグルコンポーネントを含めるには

　1. <label>要素を記述し、for属性に含めるアイコン・トグルの一意のIDを値として指定します。

<label for="icon-toggle-1">
...
</label>

 2. ラベル内に<input>要素を記述し、その`type`属性の値を`"checkbox"`にします。また、その`id`属性の値を、ラベルの`for`属性の値と一致させます。

<label for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1">
</label>

　3. また、label要素内、入力要素の後に、アイコン・トグルに必要なアイコンを含む<i>要素を記述します。

<label for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1">
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

　4. class属性を使用して、label要素と入力要素に、スペースで区切った1つ以上のMDLクラスを追加します。

<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

アイコン・トグルコンポーネントが使用できるようになります。

例

リップルクリック効果のあるアイコン・トグル。

<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

設定オプション

MDLのCSSクラスは、アイコン・トグルに様々な定義済みの視覚的および動作的な拡張機能を適用します。以下の表に、使用可能なクラスとその効果を示します。

注記: 使用可能なすべての入力タイプについて、無効化されたバージョンが提供され、標準的なHTMLブール属性disabledを使用して呼び出されます。<input type="checkbox" id="icon-toggle-5" class="mdl-icon-toggle__input" disabled> この属性は、スクリプトを使用してプログラム的に追加または削除できます。

はじめに

Material Design Lite（MDL）のスイッチコンポーネントは、標準的なHTML<input type="checkbox">要素を拡張したものです。スイッチは、目立つ円形のステートインジケーターと、通常はユーザーがクリックまたはタッチしたときに設定または解除される2値の状態を明確に伝えるテキストを持つ短い水平方向の「トラック」で構成されます。チェックボックスと同様に、スイッチは個別に、またはグループで表示され、個別に選択および選択解除できます。ただし、スイッチは、その状態をより直感的に視覚的に表現します。オフの場合は左/グレー、オンの場合は右/カラーです。MDLスイッチコンポーネントを使用すると、表示効果とクリック効果の両方を追加できます。

特に特定のチェックボックスの代替として、スイッチは、サイトのコンテンツや機能に関係なく、ユーザーインターフェースにおいて貴重な機能となる可能性があります。したがって、その設計と使い方は、全体的なユーザーエクスペリエンスにおいて重要な要素です。スイッチコンポーネントのマテリアルデザイン仕様ページで詳細を確認してください。

拡張されたスイッチコンポーネントは、標準的なチェックボックスよりも鮮やかな視覚的な外観を持ち、最初に、またはプログラム的に無効化できます。

MDLのスイッチコンポーネントを含めるには

　1. <label>要素を記述し、for属性に含めるスイッチの一意のIDを値として指定します。

<label for="switch1">
...
</label>

 2. ラベル内に<input>要素を記述し、その`type`属性の値を`"checkbox"`にします。また、その`id`属性の値を、ラベルの`for`属性の値と一致させます。

<label for="switch1">
  <input type="checkbox" id="switch1">
</label>

　3. また、label要素内、チェックボックスの後に、スイッチのテキストキャプションを含む<span>要素を記述します。

<label for="switch1">
  <input type="checkbox" id="switch1">
  <span>Sound off/on</span>
</label>

　4. class属性を使用して、label、スイッチ、キャプションに、スペースで区切った1つ以上のMDLクラスを追加します。

<label for="switch1" class="mdl-switch mdl-js-switch">
  <input type="checkbox" id="switch1" class="mdl-switch__input">
  <span class="mdl-switch__label">Sound off/on</span>
</label>

スイッチコンポーネントが使用できるようになります。

例

リップルクリック効果のあるスイッチ。

<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
  <input type="checkbox" id="switch1" class="mdl-switch__input">
  <span class="mdl-switch__label">Sound off/on</span>
</label>

設定オプション

MDLのCSSクラスは、スイッチに様々な定義済みの視覚的および動作的な拡張機能を適用します。以下の表に、使用可能なクラスとその効果を示します。

注記: 使用可能なすべてのスイッチタイプについて、無効化されたバージョンが提供され、標準的なHTMLブール属性disabledを使用して呼び出されます。<input type="checkbox" id="switch5" class="mdl-switch__input" disabled> この属性は、スクリプトを使用してプログラム的に追加または削除できます。

はじめに

Material Design Lite（MDL）のデータテーブルコンポーネントは、標準的なHTML<table>を拡張したものです。データテーブルは、適切なユーザーインタラクション機能を備えた、適切にフォーマットされたデータの行と列で構成されます。

表は、サイトのコンテンツや機能に関係なく、ほとんどのユーザーインターフェースに普遍的に存在する機能です。したがって、その設計と使い方は、全体的なユーザーエクスペリエンスにおいて重要な要素です。データテーブルコンポーネントのマテリアルデザイン仕様ページで詳細を確認してください。

データテーブルで使用可能な行/列/セルのタイプは、ほとんどが自己フォーマットです。つまり、データテーブルが定義されると、個々のセルは非常に少ない特定の注意しか必要としません。たとえば、行はマウスオーバーと選択時にシェーディング動作を示し、数値はデフォルトで自動的にフォーマットされ、単一のクラスを追加すると、テーブル行を個別にまたはまとめて選択できるようになります。これにより、データテーブルコンポーネントは、開発者にとって便利で簡単にコーディングでき、ユーザーにとって魅力的で直感的なものになります。

MDLのデータテーブルコンポーネントを含めるには

　1. <table>要素を記述します。タイトル行とデータ行をそれぞれ保持する<thead>要素と<tbody>要素を含めます。

<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

　2. class属性を使用して、テーブルに、スペースで区切った1つ以上のMDLクラスを追加します。

<table class="mdl-data-table mdl-js-data-table">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

　2. <thead>内には、各列に1つのテーブルヘッダーセル<th>を含むテーブル行<tr>を正確に1つ記述し、ヘッダーセルに必要なテキストを含めます。ヘッダーの適切な配置を確保するために、テキストのみの列のヘッダーセルに「非数値」MDLクラスを追加します。（データセルはデフォルトで数値としてフォーマットされます。）

<table class="mdl-data-table mdl-js-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th>Age</th>
      <th>ID Number</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

　3. <tbody>内には、各データ行に1つのテーブル行<tr>と、行の各列に1つのテーブルデータセル<td>を記述します。ヘッダーセルと同様に、テキストのみのデータセルに「非数値」MDLクラスを追加して、適切な配置を確保します。

<table class="mdl-data-table mdl-js-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th>Age</th>
      <th>ID Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Don Aubrey</td>
      <td>25</td>
      <td>49021</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Sophia Carson</td>
      <td>32</td>
      <td>10258</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Steve Moreno</td>
      <td>29</td>
      <td>12359</td>
    </tr>
  </tbody>
</table>

データテーブルコンポーネントが使用できるようになります。

例

「マスター」選択チェックボックスと個々の行選択チェックボックスを持つデータテーブル。

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>250</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$12.35</td>
    </tr>
  </tbody>
</table>

主にテキストデータを含む選択チェックボックスのないデータテーブル。

<table class="mdl-data-table mdl-js-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th class="mdl-data-table__cell--non-numeric">Nickname</th>
      <th>Age</th>
      <th class="mdl-data-table__cell--non-numeric">Living?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">John Lennon</td>
      <td class="mdl-data-table__cell--non-numeric">The smart one</td>
      <td>40</td>
      <td class="mdl-data-table__cell--non-numeric">No</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Paul McCartney</td>
      <td class="mdl-data-table__cell--non-numeric">The cute one</td>
      <td>73</td>
      <td class="mdl-data-table__cell--non-numeric">Yes</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">George Harrison</td>
      <td class="mdl-data-table__cell--non-numeric">The shy one</td>
      <td>58</td>
      <td class="mdl-data-table__cell--non-numeric">No</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Ringo Starr</td>
      <td class="mdl-data-table__cell--non-numeric">The funny one</td>
      <td>74</td>
      <td class="mdl-data-table__cell--non-numeric">Yes</td>
    </tr>
  </tbody>
</table>

設定オプション

MDLのCSSクラスは、データテーブルに様々な定義済みの視覚的および動作的な拡張機能を適用します。以下の表に、使用可能なクラスとその効果を示します。

はじめに

Material Design Lite（MDL）のテキストフィールドコンポーネントは、標準的なHTML<input type="text">および<input type="textarea">要素を拡張したものです。テキストフィールドは、キーボード入力ができる場所を示す水平線と、通常はテキストフィールドの意図された内容を明確に伝えるテキストで構成されます。MDLテキストフィールドコンポーネントは、様々なタイプのテキストフィールドを提供し、表示効果とクリック効果の両方を追加できます。

テキストフィールドは、サイトのコンテンツや機能に関係なく、ほとんどのユーザーインターフェースに共通の機能です。したがって、その設計と使い方は、全体的なユーザーエクスペリエンスにおいて重要な要素です。テキストフィールドコンポーネントのマテリアルデザイン仕様ページで詳細を確認してください。

拡張されたテキストフィールドコンポーネントは、標準的なテキストフィールドよりも鮮やかな視覚的な外観を持ち、最初に、またはプログラム的に無効化できます。テキストフィールドコンポーネントには、それぞれ独自の基本的なコーディング要件を持つ3つの主要なタイプのテキストフィールドがあります。そのタイプは、シングルライン、マルチライン、および拡張可能です。

シングルラインのMDLテキストフィールドコンポーネントを含めるには

　1. テキストフィールドを保持する<div>要素を記述します。

<div>
...
</div>

　2. div要素内には、type属性が"text"（テキストフィールド）で、id属性が任意の値の<input>要素を記述します。

<div>
  <input type="text" id="user">
</div>

　3. また、div要素内、テキストフィールドの後に、for属性の値がinput要素のid値と一致し、フィールドのプレースホルダーテキストとして使用する短い文字列を含む<label>要素を記述します。

<div>
  <input type="text" id="user">
  <label for="user">User name</label>
</div>

　4. オプションで、<input>要素にpattern属性と値を追加し（詳細についてはW3C HTML5フォーム仕様を参照）、<label>の後に<span>要素に関連するエラーメッセージを含めます。

<div>
  <input type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label for="user">User name</label>
  <span>Letters and spaces only</span>
</div>

　5. class属性を使用して、divコンテナ、テキストフィールド、フィールドラベル、エラーメッセージに、スペースで区切った1つ以上のMDLクラスを追加します。

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label class="mdl-textfield__label" for="user">User name</label>
  <span class="mdl-textfield__error">Letters and spaces only</span>
</div>

シングルラインテキストフィールドコンポーネントが使用できるようになります。

例

標準的なラベルを持つシングルラインテキストフィールド。

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="fname">
  <label class="mdl-textfield__label" for="fname">First name</label>
</div>

フローティングラベルを持つシングルラインテキストフィールド。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="addr1">
  <label class="mdl-textfield__label" for="addr1">Address line 1</label>
</div>

標準的なラベル、パターンマッチング、エラーメッセージを持つシングルラインテキストフィールド。

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
  <label class="mdl-textfield__label" for="phone">Phone</label>
  <span class="mdl-textfield__error">Digits only</span>
</div>

マルチラインのMDLテキストフィールドコンポーネントを含めるには

　1. テキストフィールドを保持する<div>要素を記述します。

<div>
...
</div>

　2. div要素内には、type属性が"text"（マルチラインテキストフィールド）で、id属性が任意の値の<textarea>要素を記述します。rows属性に"1"を値として含めます（この属性は、同時に表示される入力行の数を設定します）。

<div>
  <textarea type="text" rows="1" id="address"></textarea>
</div>

　3. また、div要素内、テキストフィールドの後に、for属性の値が<textarea>要素のid値と一致し、フィールドのプレースホルダーテキストとして使用する短い文字列を含む<label>要素を記述します。

<div>
  <textarea type="text" rows="1" id="address"></textarea>
  <label for="address">Full address</label>
</div>

　4. class属性を使用して、divコンテナ、テキストフィールド、フィールドラベルに、スペースで区切った1つ以上のMDLクラスを追加します。

<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="1" id="address"></textarea>
  <label class="mdl-textfield__label" for="address">Full address</label>
</div>

マルチラインテキストフィールドコンポーネントが使用できるようになります。

例

1つの表示入力行を持つマルチラインテキストフィールド。

<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="1" id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended</label>
</div>

1つの表示入力行とフローティングラベルを持つマルチラインテキストフィールド。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <textarea class="mdl-textfield__input" type="text" rows= "1" id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended</label>
</div>

複数の表示入力行と最大行数を持つマルチラインテキストフィールド。

<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="3" maxrows="6"
   id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended (max. 6)</label>
</div>

拡張可能なMDLテキストフィールドコンポーネントを含めるには

　1. 拡張可能なテキストフィールドを保持する「外部」<div>要素を記述します。

<div>
...
</div>

　2. div要素内には、for属性の値が<input>要素のid値（ステップ5で記述）と一致する<label>要素を記述します。

<div>
  <label for="expando1">
  ...
  </label>
</div>

　3. label要素内には、<span>要素を記述します。span要素は空で、ラベルの唯一のコンテンツである必要があります。この要素には、拡張可能なテキストフィールドのアイコンが含まれます。

<div>
  <label for="expando1">
    <span></span>
  </label>
</div>

　4. 「外部」div要素内、spanを含むラベルの後に、「内部」（ネストされた）<div>要素を記述します。

<div>
  <label for="expando1">
    <span></span>
  </label>
  <div>
  ...
  </div>
</div>

　5. 「内部」div要素内には、type属性が"text"（テキストフィールド）で、id属性の値がステップ2のfor属性の値と一致する<input>要素を記述します。

<div>
  <label for="expando1">
    <span></span>
  </label>
  <div>
    <input type="text" id="expando1">
  </div>
</div>

 6. "inner" div の中に、テキストフィールドの後に、<label> 要素を記述します。for 属性の値は、ステップ 5 で記述した <input> 要素の id 属性の値と一致させ、短い文字列をプレースホルダーテキストとして使用します。

<div>
  <label for="expando1">
    <span></span>
  </label>
  <div>
    <input type="text" id="expando1">
    <label for="expando1">Expandable text field</label>
  </div>
</div>

 7. "outer" div コンテナ、ラベル、span、そして "inner" div コンテナ、テキストフィールド、フィールドラベルに、class 属性を使用して、スペースで区切られた 1 つ以上の MDL クラスを追加します。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="expando1">
    <label class="mdl-textfield__label" for="expando1">Expandable text field</label>
  </div>
</div>

拡張可能なテキストフィールドコンポーネントが使用可能になりました。アイコン（空の <span>）をクリックするか、フォーカスを受けると展開されます。

例

標準ラベル付きの拡張可能なテキストフィールド。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="search-expandable">
    <label class="mdl-textfield__label" for="search-expandable">Search text</label>
  </div>
</div>

フローティングラベル付きの拡張可能なテキストフィールド。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
 mdl-textfield--floating-label">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable2">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="search-expandable2">
    <label class="mdl-textfield__label" for="search-expandable2">
      Enter search text below
    </label>
  </div>
</div>

設定オプション

MDL CSS クラスは、テキストフィールドにさまざまな定義済みの視覚的および動作的な機能強化を適用します。以下の表に、使用可能なクラスとその効果を示します。

(1) ここでは例として「検索」アイコンを使用しています。テキストを変更することで、他のアイコンを使用できます。使用可能なアイコンの一覧については、このページを参照してください。

注記： 各テキストフィールドタイプの無効バージョンが提供されており、標準の HTML ブール属性 disabled を使用して呼び出されます。<input class="mdl-textfield mdl-js-textfield" type="text" disabled> この属性は、スクリプトを使用してプログラムによって追加または削除できます。

はじめに

Material Design Lite (MDL) のツールチップコンポーネントは、title 属性によって生成される標準の HTML ツールチップの拡張バージョンです。ツールチップは、ユーザーが要素の上にホバーしたとき、またはタッチベースの UI では要素をタッチしたときに、要素に関する追加情報を明確に伝えるテキストや画像で構成されます。MDL ツールチップコンポーネントは、（色、フォント、その他の設定は material.min.css に含まれています）事前にスタイルが設定されており、関連するが通常は必須ではないコンテンツ（例：定義、説明、または簡単な指示）を表示する鮮やかで魅力的な視覚要素を提供します。

ツールチップは、サイトのコンテンツや機能に関係なく、ほとんどのユーザーインターフェースに普遍的に存在する機能です。その設計と使用は、全体的なユーザーエクスペリエンスにおいて重要な要素です。詳細は、ツールチップコンポーネントのMaterial Design 仕様ページを参照してください。

MDL のツールチップコンポーネントを含めるには

 1. <div>、<p>、<span>などの要素を記述し、必要に応じてスタイルを設定します。これがツールチップのターゲットになります。id 属性と一意の値を含めて、コンテナをツールチップにリンクします。

<p id="tt1">HTML</p>

 2. ターゲット要素の後に、<div>、<p>、<span>などの2番目の要素を記述します。これがツールチップ自体になります。for（またはdata-mdl-for）属性の値をターゲットのidの値と一致させます。

<p id="tt1">HTML</p>
<span for="tt1">HyperText Markup Language</span>

 3. class 属性を使用して、スペースで区切られた 1 つ以上の MDL クラスをツールチップ要素に追加します。

<p id="tt1">HTML</p>
<span for="tt1" class="mdl-tooltip">HyperText Markup Language</span>

ツールチップコンポーネントが使用可能になりました。

例

シンプルなテキストツールチップを持つターゲット。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">eXtensible Markup Language</span>

「リッチ」（HTML マークアップを含む）なツールチップテキストを持つターゲット。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage</span>

自動的に折り返される長いテキストツールチップを持つターゲット。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">XML is an acronym for eXtensible Markup Language</span>

より大きなフォントサイズのツールチップテキストを持つターゲット。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip mdl-tooltip--large" for="xml">eXtensible Markup Language</span>

画像とテキストの両方を含むツールチップを持つターゲット。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">
<img src="xml-logo-small.png" width="20" height="10"> eXtensible Markup Language</span>

設定オプション

MDL CSS クラスは、ツールチップにさまざまな定義済みの視覚的機能強化を適用します。以下の表に、使用可能なクラスとその効果を示します。