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>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>.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
Class Width
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を使う。
