Materialize

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

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

CSSフレームワーク

Materialize
公式サイト https://materializecss.com/
開発者 Materialize
ライセンス MIT
グリッド 12列
GitHub stars 38.4k
Twitter @MaterializeCSS
Materialize v1.0.0
モジュールサイズ
materialize.min.css 138KB
materialize.min.js 176KB

使い方

CDN

MaterializeはCDN (Contents Delivery Network) を通じて利用できる。

<!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>

.container

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

Materialize におけるドロップダウン・メニューは、トリガーとコンテンツから構成される。

<!-- Dropdown Trigger -->
<a class="dropdown-trigger btn" href="#" data-target="framework">Framework</a>

<!-- Dropdown Structure -->
<ul id="framework" class="dropdown-content">
  <li>
    <a href="/css/bootstrap/">Bootstrap</a>
  </li>
  <li>
    <a href="/css/bulma/">Bulma</a>
  </li>
</ul>
Framework

.input-field

Materialize CSSフレームワークで input-field クラスを使うためには、JavaScriptまたはjQueryで初期化する必要がある。

$(document).ready(function(){
  $('select').formSelect();
});
<div class="input-field">
  <select>
    <option value="1">普通預金</option>
    <option value="2">当座預金</option>
  </select>
  <label>口座種別</label>
</div>

multiple

<div class="input-field">
  <select multiple>
    <option value="1">普通預金</option>
    <option value="2">当座預金</option>
  </select>
  <label>口座種別</label>
</div>

.browser-default

<label>口座種別</label>
<select class="browser-default">
  <option value="1">普通預金</option>
  <option value="2">当座預金</option>
</select>

.material-icons

MaterializeではGoogleの Material Icon を使うことができる。

Material Iconを使うには、Material Iconを読み込む必要がある。

<!DOCTYPE html>
<html>
  <head>
    <!-- Google icon font -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
</html>
<i class="material-icons">info</i>

info

.tiny

<i class="material-icons tiny">info</i>

info

.small

<i class="material-icons small">info</i>

info

.medium

<i class="material-icons medium">info</i>

info

.large

<i class="material-icons large">info</i>

info

.table-of-contents

Materializeは目次を作成するために table-of-contents クラスを提供している。

<ul class="section table-of-contents">
  <li>
    <a href="/css/">CSS</a>
  </li>
  <li>
    <a href="/html/">HTML</a>
  </li>
</ul>

Materialize でナビゲーション・バーを作成するには、nav-wrapper クラスを指定する。

<nav>
  <div class="nav-wrapper">
    <ul class="hide-on-med-and-down">
      <li>
        <a href="/css/bootstrap/">Bootstrap</a>
      </li>
      <li>
        <a href="/css/bulma/">Bulma</a>
      </li>
    </ul>
  </div>
</nav>

Materialize のナビゲーション・バーにブランド・ロゴを付けるには、brand-logo クラスを指定する。

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

Materialize のナビゲーション・バーを右寄せにするには、right クラスを指定する。

<nav>
  <div class="nav-wrapper">
    <div class="container">
      <a href="/" class="brand-logo right">SE学院</a>
    </div>
  </div>
</nav>
<nav>
  <div class="nav-wrapper">
    <ul class="right hide-on-med-and-down">
      <li class="active">
        <a href="#">Materialize</a>
      </li>
      <li>
        <a href="/css/milligram/">Milligram</a>
      </li>
    </ul>
  </div>
</nav>

.center

Materialize のナビゲーション・バーを中央寄せにするには、center クラスを指定する。

<nav>
  <div class="nav-wrapper">
    <div class="container">
      <a href="/" class="brand-logo center">SE学院</a>
    </div>
  </div>
</nav>
<nav>
  <div class="nav-wrapper">
    <ul class="center hide-on-med-and-down">
      <li>
        <a href="/css/primer/">Primer CSS</a>
      </li>
      <li>
        <a href="/css/pure/">Pure.css</a>
      </li>
    </ul>
  </div>
</nav>

.striped

<table class="striped">
  <caption>Materializeのブレークポイント</caption>
  <thead>
    <tr>
      <th>Class</th>
      <th>画面幅</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>s</td>
      <td>≤ 600px</td>
    </tr>
    <tr>
      <td>m</td>
      <td>> 600px</td>
    </tr>
    <tr>
      <td>l</td>
      <td>> 992px</td>
    </tr>
    <tr>
      <td>xl</td>
      <td>> 1200px</td>
    </tr>
  </tbody>
</table>
Materializeのブレークポイント
Class画面幅
s≤ 600px
m> 600px
l> 992px
xl> 1200px

.highlight

<table class="highlight">
  <caption>Materializeのブレークポイント</caption>
  <thead>
    <tr>
      <th>Class</th>
      <th>画面幅</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>s</td>
      <td>≤ 600px</td>
    </tr>
    <tr>
      <td>m</td>
      <td>> 600px</td>
    </tr>
    <tr>
      <td>l</td>
      <td>> 992px</td>
    </tr>
    <tr>
      <td>xl</td>
      <td>> 1200px</td>
    </tr>
  </tbody>
</table>
Materializeのブレークポイント
Class画面幅
s≤ 600px
m> 600px
l> 992px
xl> 1200px

.centered

<table class="centered">
  <caption>Materializeのブレークポイント</caption>
  <thead>
    <tr>
      <th>Class</th>
      <th>画面幅</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>s</td>
      <td>≤ 600px</td>
    </tr>
    <tr>
      <td>m</td>
      <td>> 600px</td>
    </tr>
    <tr>
      <td>l</td>
      <td>> 992px</td>
    </tr>
    <tr>
      <td>xl</td>
      <td>> 1200px</td>
    </tr>
  </tbody>
</tbody>
</table>
Materializeのブレークポイント
Class画面幅
s≤ 600px
m> 600px
l> 992px
xl> 1200px

.responsive-table

tableタグにresponsive-tableクラスを指定すると、レスポンシブなテーブルになる。レスポンシブなテーブルは、画面幅が小さいときに行と列を入れ替えて表示する。

<table class="responsive-table">
  <caption>Breakpoints</caption>
  <thead>
    <tr>
      <th>Class</th>
      <th>Width</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>s</td>
      <td>≤ 600px</td>
    </tr>
    <tr>
      <td>m</td>
      <td>> 600px</td>
    </tr>
    <tr>
      <td>l</td>
      <td>> 992px</td>
    </tr>
    <tr>
      <td>xl</td>
      <td>> 1200px</td>
    </tr>
  </tbody>
</table>
Breakpoints
ClassWidth
s≤ 600px
m> 600px
l> 992px
xl> 1200px

.left-align

<p class="left-align">左寄せ</p>

左寄せ

.center-align

<p class="center-align">中央寄せ</p>

中央寄せ

.right-align

<p class="right-align">右寄せ</p>

右寄せ

Margin

Materializeはマージンを設定するユーティリティクラスを提供していない。マージンを設定するには、カスタムCSSを使う。

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, {});
});
mode_edit