Materializeの使い方

Sidenav

Materializeとは、Googleが推奨するマテリアルデザインのWebサイトを簡単に構築できるCSSフレームワークです。

この記事では、Materializeの使い方を入門者向けにサンプルを交えて解説します。この記事自体もMaterializeを使っています。

Materialize
Item	Description
URL	https://materializecss.com/
License	MIT

Materialize v1.0.0
Module	Size
materialize.min.css	138KB
materialize.min.js	176KB

      Getting started1

              CDN
            

      Badge4

              badge
              new
              data-badge-caption
              color
            

      Background21

              red
              pink
              purple
              deep-purple
              indigo
              blue
              light-blue
              cyan
              teal
              green
              light-green
              lime
              yellow
              amber
              orange
              deep-orange
              brown
              grey
              blue-grey
              black
              white
            

      Breadcrumb1

              breadcrumb
            

    

      Button8

              btn
              btn-large
              btn-small
              btn-flat
              btn-floating
              disabled
              with Icon
              Floating action button
            

      Card2

              card
              card-image
            

      Color21

              red-text
              pink-text
              purple-text
              deep-purple-text
              indigo-text
              blue-text
              light-blue-text
              cyan-text
              teal-text
              green-text
              light-green-text
              lime-text
              yellow-text
              amber-text
              orange-text
              deep-orange-text
              brown-text
              grey-text
              blue-grey-text
              black-text
              white-text
            

      Container1

              container
            

    

      Footer2

              page-footer
              footer-copyright
            

      Form7

              text
              placeholder
              checkbox
              filled-in
              disabled
              radio
              with-gap
            

      Grid5

              Breakpoint
              .s{n}
              .m{n}
              .l{n}
              .xl{n}
            

      Icon5

              material-icons
              tiny
              small
              medium
              large
            

    

      Navbar2

              brand-logo
              Links
            

      Shadow1

              z-depth-{n}
            

      Table4

              striped
              highlight
              centered
              responsive-table
            

      Text2

              center-align
              right-align
            

    

Getting started with Materialize via CDN

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- Google icon font -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  </head>
  <body>
    <!-- Materialize JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

Badge

<div class="collection">
  <a href="/css/" class="collection-item">
    <span class="badge">1</span>CSS
  </a>
</div>

1CSS

New badge

<div class="collection">
  <a href="/css/" class="collection-item">
    <span class="new badge">1</span>CSS
  </a>
</div>

1CSS

Data badge caption

<div class="collection">
  <a href="/css/" class="collection-item">
    <span class="badge" data-badge-caption="update">1</span>CSS
  </a>
  <a href="/html/" class="collection-item">
    <span class="new badge" data-badge-caption="update">2</span>HTML
  </a>
</div>

1CSS 2HTML

Badge color

<div class="collection">
  <a href="/css/" class="collection-item">
    <span class="new badge blue">1</span>CSS
  </a>
</div>

1CSS

Red

<div class="red lighten-5">Red lighten 5</div>
<div class="red lighten-4">Red lighten 4</div>
<div class="red lighten-3">Red lighten 3</div>
<div class="red lighten-2">Red lighten 2</div>
<div class="red lighten-1">Red lighten 1</div>
<div class="red">Red</div>
<div class="red darken-1">Red darken 1</div>
<div class="red darken-2">Red darken 2</div>
<div class="red darken-3">Red darken 3</div>
<div class="red darken-4">Red darken 4</div>

Red lighten 5

Red lighten 4

Red lighten 3

Red lighten 2

Red lighten 1

Red

Red darken 1

Red darken 2

Red darken 3

Red darken 4

Pink

<div class="pink lighten-5">Pink lighten 5</div>
<div class="pink lighten-4">Pink lighten 4</div>
<div class="pink lighten-3">Pink lighten 3</div>
<div class="pink lighten-2">Pink lighten 2</div>
<div class="pink lighten-1">Pink lighten 1</div>
<div class="pink">Pink</div>
<div class="pink darken-1">Pink darken 1</div>
<div class="pink darken-2">Pink darken 2</div>
<div class="pink darken-3">Pink darken 3</div>
<div class="pink darken-4">Pink darken 4</div>

Pink lighten 5

Pink lighten 4

Pink lighten 3

Pink lighten 2

Pink lighten 1

Pink

Pink darken 1

Pink darken 2

Pink darken 3

Pink darken 4

Purple

<div class="purple lighten-5">Purple lighten 5</div>
<div class="purple lighten-4">Purple lighten 4</div>
<div class="purple lighten-3">Purple lighten 3</div>
<div class="purple lighten-2">Purple lighten 2</div>
<div class="purple lighten-1">Purple lighten 1</div>
<div class="purple">Purple</div>
<div class="purple darken-1">Purple darken 1</div>
<div class="purple darken-2">Purple darken 2</div>
<div class="purple darken-3">Purple darken 3</div>
<div class="purple darken-4">Purple darken 4</div>

Purple lighten 5

Purple lighten 4

Purple lighten 3

Purple lighten 2

Purple lighten 1

Purple

Purple darken 1

Purple darken 2

Purple darken 3

Purple darken 4

Deep purple

<div class="deep-purple lighten-5">Deep purple lighten 5</div>
<div class="deep-purple lighten-4">Deep purple lighten 4</div>
<div class="deep-purple lighten-3">Deep purple lighten 3</div>
<div class="deep-purple lighten-2">Deep purple lighten 2</div>
<div class="deep-purple lighten-1">Deep purple lighten 1</div>
<div class="deep-purple">Deep purple</div>
<div class="deep-purple darken-1">Deep purple darken 1</div>
<div class="deep-purple darken-2">Deep purple darken 2</div>
<div class="deep-purple darken-3">Deep purple darken 3</div>
<div class="deep-purple darken-4">Deep purple darken 4</div>

Deep purple lighten 5

Deep purple lighten 4

Deep purple lighten 3

Deep purple lighten 2

Deep purple lighten 1

Deep purple

Deep purple darken 1

Deep purple darken 2

Deep purple darken 3

Deep purple darken 4

Indigo

<div class="indigo lighten-5">Indigo lighten 5</div>
<div class="indigo lighten-4">Indigo lighten 4</div>
<div class="indigo lighten-3">Indigo lighten 3</div>
<div class="indigo lighten-2">Indigo lighten 2</div>
<div class="indigo lighten-1">Indigo lighten 1</div>
<div class="indigo">Indigo</div>
<div class="indigo darken-1">Indigo darken 1</div>
<div class="indigo darken-2">Indigo darken 2</div>
<div class="indigo darken-3">Indigo darken 3</div>
<div class="indigo darken-4">Indigo darken 4</div>

Indigo lighten 5

Indigo lighten 4

Indigo lighten 3

Indigo lighten 2

Indigo lighten 1

Indigo

Indigo darken 1

Indigo darken 2

Indigo darken 3

Indigo darken 4

Blue

<div class="blue lighten-5">Blue lighten 5</div>
<div class="blue lighten-4">Blue lighten 4</div>
<div class="blue lighten-3">Blue lighten 3</div>
<div class="blue lighten-2">Blue lighten 2</div>
<div class="blue lighten-1">Blue lighten 1</div>
<div class="blue">Blue</div>
<div class="blue darken-1">Blue darken 1</div>
<div class="blue darken-2">Blue darken 2</div>
<div class="blue darken-3">Blue darken 3</div>
<div class="blue darken-4">Blue darken 4</div>

Blue lighten 5

Blue lighten 4

Blue lighten 3

Blue lighten 2

Blue lighten 1

Blue

Blue darken 1

Blue darken 2

Blue darken 3

Blue darken 4

Light blue

<div class="light-blue lighten-5">Light blue lighten 5</div>
<div class="light-blue lighten-4">Light blue lighten 4</div>
<div class="light-blue lighten-3">Light blue lighten 3</div>
<div class="light-blue lighten-2">Light blue lighten 2</div>
<div class="light-blue lighten-1">Light blue lighten 1</div>
<div class="light-blue">Light blue</div>
<div class="light-blue darken-1">Light blue darken 1</div>
<div class="light-blue darken-2">Light blue darken 2</div>
<div class="light-blue darken-3">Light blue darken 3</div>
<div class="light-blue darken-4">Light blue darken 4</div>

Light blue lighten 5

Light blue lighten 4

Light blue lighten 3

Light blue lighten 2

Light blue lighten 1

Light blue

Light blue darken 1

Light blue darken 2

Light blue darken 3

Light blue darken 4

Cyan

<div class="cyan lighten-5">Cyan lighten 5</div>
<div class="cyan lighten-4">Cyan lighten 4</div>
<div class="cyan lighten-3">Cyan lighten 3</div>
<div class="cyan lighten-2">Cyan lighten 2</div>
<div class="cyan lighten-1">Cyan lighten 1</div>
<div class="cyan">Cyan</div>
<div class="cyan darken-1">Cyan darken 1</div>
<div class="cyan darken-2">Cyan darken 2</div>
<div class="cyan darken-3">Cyan darken 3</div>
<div class="cyan darken-4">Cyan darken 4</div>

Cyan lighten 5

Cyan lighten 4

Cyan lighten 3

Cyan lighten 2

Cyan lighten 1

Cyan

Cyan darken 1

Cyan darken 2

Cyan darken 3

Cyan darken 4

Teal

<div class="teal lighten-5">Teal lighten 5</div>
<div class="teal lighten-4">Teal lighten 4</div>
<div class="teal lighten-3">Teal lighten 3</div>
<div class="teal lighten-2">Teal lighten 2</div>
<div class="teal lighten-1">Teal lighten 1</div>
<div class="teal">Teal</div>
<div class="teal darken-1">Teal darken 1</div>
<div class="teal darken-2">Teal darken 2</div>
<div class="teal darken-3">Teal darken 3</div>
<div class="teal darken-4">Teal darken 4</div>

Teal lighten 5

Teal lighten 4

Teal lighten 3

Teal lighten 2

Teal lighten 1

Teal

Teal darken 1

Teal darken 2

Teal darken 3

Teal darken 4

Green

<div class="green lighten-5">Green lighten 5</div>
<div class="green lighten-4">Green lighten 4</div>
<div class="green lighten-3">Green lighten 3</div>
<div class="green lighten-2">Green lighten 2</div>
<div class="green lighten-1">Green lighten 1</div>
<div class="green">Green</div>
<div class="green darken-1">Green darken 1</div>
<div class="green darken-2">Green darken 2</div>
<div class="green darken-3">Green darken 3</div>
<div class="green darken-4">Green darken 4</div>

Green lighten 5

Green lighten 4

Green lighten 3

Green lighten 2

Green lighten 1

Green

Green darken 1

Green darken 2

Green darken 3

Green darken 4

Light green

<div class="light-green lighten-5">Light green lighten 5</div>
<div class="light-green lighten-4">Light green lighten 4</div>
<div class="light-green lighten-3">Light green lighten 3</div>
<div class="light-green lighten-2">Light green lighten 2</div>
<div class="light-green lighten-1">Light green lighten 1</div>
<div class="light-green">Light green</div>
<div class="light-green darken-1">Light green darken 1</div>
<div class="light-green darken-2">Light green darken 2</div>
<div class="light-green darken-3">Light green darken 3</div>
<div class="light-green darken-4">Light green darken 4</div>

Light green lighten 5

Light green lighten 4

Light green lighten 3

Light green lighten 2

Light green lighten 1

Light green

Light green darken 1

Light green darken 2

Light green darken 3

Light green darken 4

Lime

<div class="lime lighten-5">Lime lighten 5</div>
<div class="lime lighten-4">Lime lighten 4</div>
<div class="lime lighten-3">Lime lighten 3</div>
<div class="lime lighten-2">Lime lighten 2</div>
<div class="lime lighten-1">Lime lighten 1</div>
<div class="lime">Lime</div>
<div class="lime darken-1">Lime darken 1</div>
<div class="lime darken-2">Lime darken 2</div>
<div class="lime darken-3">Lime darken 3</div>
<div class="lime darken-4">Lime darken 4</div>

Lime lighten 5

Lime lighten 4

Lime lighten 3

Lime lighten 2

Lime lighten 1

Lime

Lime darken 1

Lime darken 2

Lime darken 3

Lime darken 4

Yellow

<div class="yellow lighten-5">Yellow lighten 5</div>
<div class="yellow lighten-4">Yellow lighten 4</div>
<div class="yellow lighten-3">Yellow lighten 3</div>
<div class="yellow lighten-2">Yellow lighten 2</div>
<div class="yellow lighten-1">Yellow lighten 1</div>
<div class="yellow">Yellow</div>
<div class="yellow darken-1">Yellow darken 1</div>
<div class="yellow darken-2">Yellow darken 2</div>
<div class="yellow darken-3">Yellow darken 3</div>
<div class="yellow darken-4">Yellow darken 4</div>

Yellow lighten 5

Yellow lighten 4

Yellow lighten 3

Yellow lighten 2

Yellow lighten 1

Yellow

Yellow darken 1

Yellow darken 2

Yellow darken 3

Yellow darken 4

Amber

<div class="amber lighten-5">Amber lighten 5</div>
<div class="amber lighten-4">Amber lighten 4</div>
<div class="amber lighten-3">Amber lighten 3</div>
<div class="amber lighten-2">Amber lighten 2</div>
<div class="amber lighten-1">Amber lighten 1</div>
<div class="amber">Amber</div>
<div class="amber darken-1">Amber darken 1</div>
<div class="amber darken-2">Amber darken 2</div>
<div class="amber darken-3">Amber darken 3</div>
<div class="amber darken-4">Amber darken 4</div>

Amber lighten 5

Amber lighten 4

Amber lighten 3

Amber lighten 2

Amber lighten 1

Amber

Amber darken 1

Amber darken 2

Amber darken 3

Amber darken 4

Orange

<div class="orange lighten-5">Orange lighten 5</div>
<div class="orange lighten-4">Orange lighten 4</div>
<div class="orange lighten-3">Orange lighten 3</div>
<div class="orange lighten-2">Orange lighten 2</div>
<div class="orange lighten-1">Orange lighten 1</div>
<div class="orange">Orange</div>
<div class="orange darken-1">Orange darken 1</div>
<div class="orange darken-2">Orange darken 2</div>
<div class="orange darken-3">Orange darken 3</div>
<div class="orange darken-4">Orange darken 4</div>

Orange lighten 5

Orange lighten 4

Orange lighten 3

Orange lighten 2

Orange lighten 1

Orange

Orange darken 1

Orange darken 2

Orange darken 3

Orange darken 4

Deep orange

<div class="deep-orange lighten-5">Deep orange lighten 5</div>
<div class="deep-orange lighten-4">Deep orange lighten 4</div>
<div class="deep-orange lighten-3">Deep orange lighten 3</div>
<div class="deep-orange lighten-2">Deep orange lighten 2</div>
<div class="deep-orange lighten-1">Deep orange lighten 1</div>
<div class="deep-orange">Deep orange</div>
<div class="deep-orange darken-1">Deep orange darken 1</div>
<div class="deep-orange darken-2">Deep orange darken 2</div>
<div class="deep-orange darken-3">Deep orange darken 3</div>
<div class="deep-orange darken-4">Deep orange darken 4</div>

Deep orange lighten 5

Deep orange lighten 4

Deep orange lighten 3

Deep orange lighten 2

Deep orange lighten 1

Deep orange

Deep orange darken 1

Deep orange darken 2

Deep orange darken 3

Deep orange darken 4

Brown

<div class="brown lighten-5">Brown lighten 5</div>
<div class="brown lighten-4">Brown lighten 4</div>
<div class="brown lighten-3">Brown lighten 3</div>
<div class="brown lighten-2">Brown lighten 2</div>
<div class="brown lighten-1">Brown lighten 1</div>
<div class="brown">Brown</div>
<div class="brown darken-1">Brown darken 1</div>
<div class="brown darken-2">Brown darken 2</div>
<div class="brown darken-3">Brown darken 3</div>
<div class="brown darken-4">Brown darken 4</div>

Brown lighten 5

Brown lighten 4

Brown lighten 3

Brown lighten 2

Brown lighten 1

Brown

Brown darken 1

Brown darken 2

Brown darken 3

Brown darken 4

Grey

<div class="grey lighten-5">Grey lighten 5</div>
<div class="grey lighten-4">Grey lighten 4</div>
<div class="grey lighten-3">Grey lighten 3</div>
<div class="grey lighten-2">Grey lighten 2</div>
<div class="grey lighten-1">Grey lighten 1</div>
<div class="grey">Grey</div>
<div class="grey darken-1">Grey darken 1</div>
<div class="grey darken-2">Grey darken 2</div>
<div class="grey darken-3">Grey darken 3</div>
<div class="grey darken-4">Grey darken 4</div>

Grey lighten 5

Grey lighten 4

Grey lighten 3

Grey lighten 2

Grey lighten 1

Grey

Grey darken 1

Grey darken 2

Grey darken 3

Grey darken 4

Blue grey

<div class="blue-grey lighten-5">Blue grey lighten 5</div>
<div class="blue-grey lighten-4">Blue grey lighten 4</div>
<div class="blue-grey lighten-3">Blue grey lighten 3</div>
<div class="blue-grey lighten-2">Blue grey lighten 2</div>
<div class="blue-grey lighten-1">Blue grey lighten 1</div>
<div class="blue-grey">Blue grey</div>
<div class="blue-grey darken-1">Blue grey darken 1</div>
<div class="blue-grey darken-2">Blue grey darken 2</div>
<div class="blue-grey darken-3">Blue grey darken 3</div>
<div class="blue-grey darken-4">Blue grey darken 4</div>

Blue grey lighten 5

Blue grey lighten 4

Blue grey lighten 3

Blue grey lighten 2

Blue grey lighten 1

Blue grey

Blue grey darken 1

Blue grey darken 2

Blue grey darken 3

Blue grey darken 4

Breadcrumb navigation

<nav>
  <div class="nav-wrapper">
    <div class="col s12">
      <a class="breadcrumb" href="/">SE学院</a>
      <a class="breadcrumb" href="/css/">CSS</a>
      <a class="breadcrumb" href="/css/materialize/">Materialize</a>
    </div>
  </div>
</nav>

Button

<a class="waves-effect waves-light btn">Button</a>
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
</button>

Button

Button with icon

<a class="waves-effect waves-light btn">
  <i class="material-icons left">done</i>OK
</a>
<a class="waves-effect waves-light btn">
  <i class="material-icons right">clear</i>Cancel
</a>

OK Cancel

HTML

<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li>
      <a class="btn-floating red">
        <i class="material-icons">insert_chart</i>
      </a>
    </li>
    <li>
      <a class="btn-floating yellow darken-1">
        <i class="material-icons">format_quote</i>
      </a>
    </li>
    <li>
      <a class="btn-floating green">
        <i class="material-icons">publish</i>
      </a>
    </li>
    <li>
      <a class="btn-floating blue">
        <i class="material-icons">attach_file</i>
      </a>
    </li>
  </ul>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.fixed-action-btn');
  var instances = M.FloatingActionButton.init(elems, {});
});

Card

<div class="card">
  <div class="card-content">
    <span class="card-title">Title</span>
    <p>This is a simple card.</p>
  </div>
</div>

Title

This is a simple card.

Image card

<div class="card">
  <div class="card-image">
    <img src="card.jpg">
    <span class="card-title">Title</span>
  </div>
  <div class="card-content">
    <p>This is an image card.</p>
  </div>
</div>

Title

This is an image card.

Red text

<div class="red-text text-lighten-5">Red lighten 5</div>
<div class="red-text text-lighten-4">Red lighten 4</div>
<div class="red-text text-lighten-3">Red lighten 3</div>
<div class="red-text text-lighten-2">Red lighten 2</div>
<div class="red-text text-lighten-1">Red lighten 1</div>
<div class="red-text">Red</div>
<div class="red-text text-darken-1">Red darken 1</div>
<div class="red-text text-darken-2">Red darken 2</div>
<div class="red-text text-darken-3">Red darken 3</div>
<div class="red-text text-darken-4">Red darken 4</div>

Red lighten 5

Red lighten 4

Red lighten 3

Red lighten 2

Red lighten 1

Red

Red darken 1

Red darken 2

Red darken 3

Red darken 4

Pink text

<div class="pink-text text-lighten-5">Pink lighten 5</div>
<div class="pink-text text-lighten-4">Pink lighten 4</div>
<div class="pink-text text-lighten-3">Pink lighten 3</div>
<div class="pink-text text-lighten-2">Pink lighten 2</div>
<div class="pink-text text-lighten-1">Pink lighten 1</div>
<div class="pink-text">Pink</div>
<div class="pink-text text-darken-1">Pink darken 1</div>
<div class="pink-text text-darken-2">Pink darken 2</div>
<div class="pink-text text-darken-3">Pink darken 3</div>
<div class="pink-text text-darken-4">Pink darken 4</div>

Pink lighten 5

Pink lighten 4

Pink lighten 3

Pink lighten 2

Pink lighten 1

Pink

Pink darken 1

Pink darken 2

Pink darken 3

Pink darken 4

Purple text

<div class="purple-text text-lighten-5">Purple lighten 5</div>
<div class="purple-text text-lighten-4">Purple lighten 4</div>
<div class="purple-text text-lighten-3">Purple lighten 3</div>
<div class="purple-text text-lighten-2">Purple lighten 2</div>
<div class="purple-text text-lighten-1">Purple lighten 1</div>
<div class="purple-text">Purple</div>
<div class="purple-text text-darken-1">Purple darken 1</div>
<div class="purple-text text-darken-2">Purple darken 2</div>
<div class="purple-text text-darken-3">Purple darken 3</div>
<div class="purple-text text-darken-4">Purple darken 4</div>

Purple lighten 5

Purple lighten 4

Purple lighten 3

Purple lighten 2

Purple lighten 1

Purple

Purple darken 1

Purple darken 2

Purple darken 3

Purple darken 4

Deep purple text

<div class="deep-purple-text text-lighten-5">Deep purple lighten 5</div>
<div class="deep-purple-text text-lighten-4">Deep purple lighten 4</div>
<div class="deep-purple-text text-lighten-3">Deep purple lighten 3</div>
<div class="deep-purple-text text-lighten-2">Deep purple lighten 2</div>
<div class="deep-purple-text text-lighten-1">Deep purple lighten 1</div>
<div class="deep-purple-text">Deep purple</div>
<div class="deep-purple-text text-darken-1">Deep purple darken 1</div>
<div class="deep-purple-text text-darken-2">Deep purple darken 2</div>
<div class="deep-purple-text text-darken-3">Deep purple darken 3</div>
<div class="deep-purple-text text-darken-4">Deep purple darken 4</div>

Deep purple lighten 5

Deep purple lighten 4

Deep purple lighten 3

Deep purple lighten 2

Deep purple lighten 1

Deep purple

Deep purple darken 1

Deep purple darken 2

Deep purple darken 3

Deep purple darken 4

Indigo text

<div class="indigo-text text-lighten-5">Indigo lighten 5</div>
<div class="indigo-text text-lighten-4">Indigo lighten 4</div>
<div class="indigo-text text-lighten-3">Indigo lighten 3</div>
<div class="indigo-text text-lighten-2">Indigo lighten 2</div>
<div class="indigo-text text-lighten-1">Indigo lighten 1</div>
<div class="indigo-text">Indigo</div>
<div class="indigo-text text-darken-1">Indigo darken 1</div>
<div class="indigo-text text-darken-2">Indigo darken 2</div>
<div class="indigo-text text-darken-3">Indigo darken 3</div>
<div class="indigo-text text-darken-4">Indigo darken 4</div>

Indigo lighten 5

Indigo lighten 4

Indigo lighten 3

Indigo lighten 2

Indigo lighten 1

Indigo

Indigo darken 1

Indigo darken 2

Indigo darken 3

Indigo darken 4

Blue text

<div class="blue-text text-lighten-5">Blue lighten 5</div>
<div class="blue-text text-lighten-4">Blue lighten 4</div>
<div class="blue-text text-lighten-3">Blue lighten 3</div>
<div class="blue-text text-lighten-2">Blue lighten 2</div>
<div class="blue-text text-lighten-1">Blue lighten 1</div>
<div class="blue-text">Blue</div>
<div class="blue-text text-darken-1">Blue darken 1</div>
<div class="blue-text text-darken-2">Blue darken 2</div>
<div class="blue-text text-darken-3">Blue darken 3</div>
<div class="blue-text text-darken-4">Blue darken 4</div>

Blue lighten 5

Blue lighten 4

Blue lighten 3

Blue lighten 2

Blue lighten 1

Blue

Blue darken 1

Blue darken 2

Blue darken 3

Blue darken 4

Light blue text

<div class="light-blue-text text-lighten-5">Light blue lighten 5</div>
<div class="light-blue-text text-lighten-4">Light blue lighten 4</div>
<div class="light-blue-text text-lighten-3">Light blue lighten 3</div>
<div class="light-blue-text text-lighten-2">Light blue lighten 2</div>
<div class="light-blue-text text-lighten-1">Light blue lighten 1</div>
<div class="light-blue-text">Light blue</div>
<div class="light-blue-text text-darken-1">Light blue darken 1</div>
<div class="light-blue-text text-darken-2">Light blue darken 2</div>
<div class="light-blue-text text-darken-3">Light blue darken 3</div>
<div class="light-blue-text text-darken-4">Light blue darken 4</div>

Light blue lighten 5

Light blue lighten 4

Light blue lighten 3

Light blue lighten 2

Light blue lighten 1

Light blue

Light blue darken 1

Light blue darken 2

Light blue darken 3

Light blue darken 4

Cyan text

<div class="cyan-text text-lighten-5">Cyan lighten 5</div>
<div class="cyan-text text-lighten-4">Cyan lighten 4</div>
<div class="cyan-text text-lighten-3">Cyan lighten 3</div>
<div class="cyan-text text-lighten-2">Cyan lighten 2</div>
<div class="cyan-text text-lighten-1">Cyan lighten 1</div>
<div class="cyan-text">Cyan</div>
<div class="cyan-text text-darken-1">Cyan darken 1</div>
<div class="cyan-text text-darken-2">Cyan darken 2</div>
<div class="cyan-text text-darken-3">Cyan darken 3</div>
<div class="cyan-text text-darken-4">Cyan darken 4</div>

Cyan lighten 5

Cyan lighten 4

Cyan lighten 3

Cyan lighten 2

Cyan lighten 1

Cyan

Cyan darken 1

Cyan darken 2

Cyan darken 3

Cyan darken 4

Teal text

<div class="teal-text text-lighten-5">Teal lighten 5</div>
<div class="teal-text text-lighten-4">Teal lighten 4</div>
<div class="teal-text text-lighten-3">Teal lighten 3</div>
<div class="teal-text text-lighten-2">Teal lighten 2</div>
<div class="teal-text text-lighten-1">Teal lighten 1</div>
<div class="teal-text">Teal</div>
<div class="teal-text text-darken-1">Teal darken 1</div>
<div class="teal-text text-darken-2">Teal darken 2</div>
<div class="teal-text text-darken-3">Teal darken 3</div>
<div class="teal-text text-darken-4">Teal darken 4</div>

Teal lighten 5

Teal lighten 4

Teal lighten 3

Teal lighten 2

Teal lighten 1

Teal

Teal darken 1

Teal darken 2

Teal darken 3

Teal darken 4

Green text

<div class="green-text text-lighten-5">Green lighten 5</div>
<div class="green-text text-lighten-4">Green lighten 4</div>
<div class="green-text text-lighten-3">Green lighten 3</div>
<div class="green-text text-lighten-2">Green lighten 2</div>
<div class="green-text text-lighten-1">Green lighten 1</div>
<div class="green-text">Green</div>
<div class="green-text text-darken-1">Green darken 1</div>
<div class="green-text text-darken-2">Green darken 2</div>
<div class="green-text text-darken-3">Green darken 3</div>
<div class="green-text text-darken-4">Green darken 4</div>

Green lighten 5

Green lighten 4

Green lighten 3

Green lighten 2

Green lighten 1

Green

Green darken 1

Green darken 2

Green darken 3

Green darken 4

Light green text

<div class="light-green-text text-lighten-5">Light green lighten 5</div>
<div class="light-green-text text-lighten-4">Light green lighten 4</div>
<div class="light-green-text text-lighten-3">Light green lighten 3</div>
<div class="light-green-text text-lighten-2">Light green lighten 2</div>
<div class="light-green-text text-lighten-1">Light green lighten 1</div>
<div class="light-green-text">Light green</div>
<div class="light-green-text text-darken-1">Light green darken 1</div>
<div class="light-green-text text-darken-2">Light green darken 2</div>
<div class="light-green-text text-darken-3">Light green darken 3</div>
<div class="light-green-text text-darken-4">Light green darken 4</div>

Light green lighten 5

Light green lighten 4

Light green lighten 3

Light green lighten 2

Light green lighten 1

Light green

Light green darken 1

Light green darken 2

Light green darken 3

Light green darken 4

Lime text

<div class="lime-text text-lighten-5">Lime lighten 5</div>
<div class="lime-text text-lighten-4">Lime lighten 4</div>
<div class="lime-text text-lighten-3">Lime lighten 3</div>
<div class="lime-text text-lighten-2">Lime lighten 2</div>
<div class="lime-text text-lighten-1">Lime lighten 1</div>
<div class="lime-text">Lime</div>
<div class="lime-text text-darken-1">Lime darken 1</div>
<div class="lime-text text-darken-2">Lime darken 2</div>
<div class="lime-text text-darken-3">Lime darken 3</div>
<div class="lime-text text-darken-4">Lime darken 4</div>

Lime lighten 5

Lime lighten 4

Lime lighten 3

Lime lighten 2

Lime lighten 1

Lime

Lime darken 1

Lime darken 2

Lime darken 3

Lime darken 4

Yellow text

<div class="yellow-text text-lighten-5">Yellow lighten 5</div>
<div class="yellow-text text-lighten-4">Yellow lighten 4</div>
<div class="yellow-text text-lighten-3">Yellow lighten 3</div>
<div class="yellow-text text-lighten-2">Yellow lighten 2</div>
<div class="yellow-text text-lighten-1">Yellow lighten 1</div>
<div class="yellow-text">Yellow</div>
<div class="yellow-text text-darken-1">Yellow darken 1</div>
<div class="yellow-text text-darken-2">Yellow darken 2</div>
<div class="yellow-text text-darken-3">Yellow darken 3</div>
<div class="yellow-text text-darken-4">Yellow darken 4</div>

Yellow lighten 5

Yellow lighten 4

Yellow lighten 3

Yellow lighten 2

Yellow lighten 1

Yellow

Yellow darken 1

Yellow darken 2

Yellow darken 3

Yellow darken 4

Amber text

<div class="amber-text text-lighten-5">Amber lighten 5</div>
<div class="amber-text text-lighten-4">Amber lighten 4</div>
<div class="amber-text text-lighten-3">Amber lighten 3</div>
<div class="amber-text text-lighten-2">Amber lighten 2</div>
<div class="amber-text text-lighten-1">Amber lighten 1</div>
<div class="amber-text">Amber</div>
<div class="amber-text text-darken-1">Amber darken 1</div>
<div class="amber-text text-darken-2">Amber darken 2</div>
<div class="amber-text text-darken-3">Amber darken 3</div>
<div class="amber-text text-darken-4">Amber darken 4</div>

Amber lighten 5

Amber lighten 4

Amber lighten 3

Amber lighten 2

Amber lighten 1

Amber

Amber darken 1

Amber darken 2

Amber darken 3

Amber darken 4

Orange text

<div class="orange-text text-lighten-5">Orange lighten 5</div>
<div class="orange-text text-lighten-4">Orange lighten 4</div>
<div class="orange-text text-lighten-3">Orange lighten 3</div>
<div class="orange-text text-lighten-2">Orange lighten 2</div>
<div class="orange-text text-lighten-1">Orange lighten 1</div>
<div class="orange-text">Orange</div>
<div class="orange-text text-darken-1">Orange darken 1</div>
<div class="orange-text text-darken-2">Orange darken 2</div>
<div class="orange-text text-darken-3">Orange darken 3</div>
<div class="orange-text text-darken-4">Orange darken 4</div>

Orange lighten 5

Orange lighten 4

Orange lighten 3

Orange lighten 2

Orange lighten 1

Orange

Orange darken 1

Orange darken 2

Orange darken 3

Orange darken 4

Deep orange text

<div class="deep-orange-text text-lighten-5">Deep orange lighten 5</div>
<div class="deep-orange-text text-lighten-4">Deep orange lighten 4</div>
<div class="deep-orange-text text-lighten-3">Deep orange lighten 3</div>
<div class="deep-orange-text text-lighten-2">Deep orange lighten 2</div>
<div class="deep-orange-text text-lighten-1">Deep orange lighten 1</div>
<div class="deep-orange-text">Deep orange</div>
<div class="deep-orange-text text-darken-1">Deep orange darken 1</div>
<div class="deep-orange-text text-darken-2">Deep orange darken 2</div>
<div class="deep-orange-text text-darken-3">Deep orange darken 3</div>
<div class="deep-orange-text text-darken-4">Deep orange darken 4</div>

Deep orange lighten 5

Deep orange lighten 4

Deep orange lighten 3

Deep orange lighten 2

Deep orange lighten 1

Deep orange

Deep orange darken 1

Deep orange darken 2

Deep orange darken 3

Deep orange darken 4

Brown text

<div class="brown-text text-lighten-5">Brown lighten 5</div>
<div class="brown-text text-lighten-4">Brown lighten 4</div>
<div class="brown-text text-lighten-3">Brown lighten 3</div>
<div class="brown-text text-lighten-2">Brown lighten 2</div>
<div class="brown-text text-lighten-1">Brown lighten 1</div>
<div class="brown-text">Brown</div>
<div class="brown-text text-darken-1">Brown darken 1</div>
<div class="brown-text text-darken-2">Brown darken 2</div>
<div class="brown-text text-darken-3">Brown darken 3</div>
<div class="brown-text text-darken-4">Brown darken 4</div>

Brown lighten 5

Brown lighten 4

Brown lighten 3

Brown lighten 2

Brown lighten 1

Brown

Brown darken 1

Brown darken 2

Brown darken 3

Brown darken 4

Grey text

<div class="grey-text text-lighten-5">Grey lighten 5</div>
<div class="grey-text text-lighten-4">Grey lighten 4</div>
<div class="grey-text text-lighten-3">Grey lighten 3</div>
<div class="grey-text text-lighten-2">Grey lighten 2</div>
<div class="grey-text text-lighten-1">Grey lighten 1</div>
<div class="grey-text">Grey</div>
<div class="grey-text text-darken-1">Grey darken 1</div>
<div class="grey-text text-darken-2">Grey darken 2</div>
<div class="grey-text text-darken-3">Grey darken 3</div>
<div class="grey-text text-darken-4">Grey darken 4</div>

Grey lighten 5

Grey lighten 4

Grey lighten 3

Grey lighten 2

Grey lighten 1

Grey

Grey darken 1

Grey darken 2

Grey darken 3

Grey darken 4

Blue grey text

<div class="blue-grey-text text-lighten-5">Blue grey lighten 5</div>
<div class="blue-grey-text text-lighten-4">Blue grey lighten 4</div>
<div class="blue-grey-text text-lighten-3">Blue grey lighten 3</div>
<div class="blue-grey-text text-lighten-2">Blue grey lighten 2</div>
<div class="blue-grey-text text-lighten-1">Blue grey lighten 1</div>
<div class="blue-grey-text">Blue grey</div>
<div class="blue-grey-text text-darken-1">Blue grey darken 1</div>
<div class="blue-grey-text text-darken-2">Blue grey darken 2</div>
<div class="blue-grey-text text-darken-3">Blue grey darken 3</div>
<div class="blue-grey-text text-darken-4">Blue grey darken 4</div>

Blue grey lighten 5

Blue grey lighten 4

Blue grey lighten 3

Blue grey lighten 2

Blue grey lighten 1

Blue grey

Blue grey darken 1

Blue grey darken 2

Blue grey darken 3

Blue grey darken 4

Code

<div class="container red lighten-5">
Container
</div>

Preview

Container

Footer copyright

<footer class="page-footer">
  <div class="container">Footer</div>
  <div class="footer-copyright">
    <div class="container">© Copyright</div>
  </div>
</footer>

Input text

<div class="input-field">
  <label for="first_name">First Name</label>
  <input id="first_name" type="text" class="validate">
</div>

First Name

Placeholder

<div class="input-field">
  <label for="last_name">Last Name</label>
  <input placeholder="Placeholder" id="last_name" type="text" class="validate">
</div>

Last Name

Radio

<label>
  <input name="group1" type="radio" checked />
  <span>On</span>
</label>
<label>
  <input name="group1" type="radio" />
  <span>Off</span>
</label>

On Off

Radio with-gap

<label>
  <input class="with-gap" name="group2" type="radio" checked />
  <span>On</span>
</label>
<label>
  <input class="with-gap" name="group2" type="radio" />
  <span>Off</span>
</label>

On Off

Breakpoints

Materializeのブレークポイント
デバイス	クラスの接頭辞	画面の横幅	コンテナの幅
スマホ	s	600px 以下	90%
タブレット	m	600px 超	85%
ノートパソコン	l	992px 超	70%
デスクトップパソコン	xl	1200px 超	70%

Medium screen

<div class="row">
  <div class="col m4">#1</div>
  <div class="col m4">#2</div>
  <div class="col m4">#3</div>
</div>

Large screen

<div class="row">
  <div class="col l3">#1</div>
  <div class="col l3">#2</div>
  <div class="col l3">#3</div>
  <div class="col l3">#4</div>
</div>

#1
#2
#3
#4

Extra large screen

<div class="row">
  <div class="col xl2">#1</div>
  <div class="col xl2">#2</div>
  <div class="col xl2">#3</div>
  <div class="col xl2">#4</div>
  <div class="col xl2">#5</div>
  <div class="col xl2">#6</div>
</div>

Code

<nav>
  <div class="nav-wrapper">
    <div class="container">
      <a href="/" class="brand-logo">SE学院</a>
    </div>
  </div>
</nav>

Preview

Code

<nav>
  <div class="nav-wrapper">
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li class="active">
        <a href="/css/">CSS</a>
      </li>
      <li>
        <a href="/html/">HTML</a>
      </li>
    </ul>
  </div>
</nav>

Preview

Shadow

<div class="row">
  <div class="col s12 m4">
    <p class="z-depth-1">z-depth-1</p>
  </div>
  <div class="col s12 m4">
    <p class="z-depth-2">z-depth-2</p>
  </div>
  <div class="col s12 m4">
    <p class="z-depth-3">z-depth-3</p>
  </div>
  <div class="col s12 m4">
    <p class="z-depth-4">z-depth-4</p>
  </div>
  <div class="col s12 m4">
    <p class="z-depth-5">z-depth-5</p>
  </div>
</div>

z-depth-1

z-depth-2

z-depth-3

z-depth-4

z-depth-5

Striped table

<table class="striped">
  <caption>Table classes</caption>
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>s</td>
      <td>600px or under</td>
    </tr>
    <tr>
      <td>m</td>
      <td>over 600px</td>
    </tr>
    <tr>
      <td>l</td>
      <td>over 992px</td>
    </tr>
    <tr>
      <td>xl</td>
      <td>over 1200px</td>
    </tr>
  </tbody>
</table>

Table classes
Class	Description
s	600px or under
m	over 600px
l	over 992px
xl	over 1200px

Highlight table

<table class="highlight">
  <caption>Table classes</caption>
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>striped</td>
      <td>striped table</td>
    </tr>
    <tr>
      <td>highlight</td>
      <td>highlight table</td>
    </tr>
  </tbody>
</table>

Table classes
Class	Description
striped	striped table
highlight	highlight table

Centered table

<table class="centered">
  <caption>Table classes</caption>
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>highlight</td>
      <td>highlight table</td>
    </tr>
    <tr>
      <td>centered</td>
      <td>center align all the text in the table</td>
    </tr>
  </tbody>
</table>

Table classes
Class	Description
highlight	highlight table
centered	center align all the text in the table

Responsive table

<table class="responsive-table">
  <caption>Table classes</caption>
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>striped</td>
      <td>striped table</td>
    </tr>
    <tr>
      <td>highlight</td>
      <td>highlight table</td>
    </tr>
    <tr>
      <td>centered</td>
      <td>center align all the text in the table</td>
    </tr>
    <tr>
      <td>responsive-table</td>
      <td>horizontally scrollable on smaller screen widths</td>
    </tr>
  </tbody>
</table>

Table classes
Class	Description
striped	striped table
highlight	highlight table
centered	center align all the text in the table
responsive-table	horizontally scrollable on smaller screen widths

Materializeの使い方

Getting started with Materialize via CDN

Badge

New badge

Data badge caption

Badge color

Red

Pink

Purple

Deep purple

Indigo

Blue

Light blue

Cyan

Teal

Green

Light green

Lime

Yellow

Amber

Orange

Deep orange

Brown

Grey

Blue grey

Black

White

Breadcrumb navigation

Button

Large button

Small button

Flat button

Floating button

Disabled button

Button with icon

HTML

JavaScript

Card

Image card

Red text

Pink text

Purple text

Deep purple text

Indigo text

Blue text

Light blue text

Cyan text

Teal text

Green text

Light green text

Lime text

Yellow text

Amber text

Orange text

Deep orange text

Brown text

Grey text

Blue grey text

Black text

White text

Code

Preview

Footer

Footer copyright

Input text

Placeholder

Checkbox

Filled-in checkbox

Disabled form

Radio

Radio with-gap

Breakpoints

Small screen

Medium screen

Large screen

Extra large screen

Icon

Tiny icon

Small icon

Medium icon