.dropdown-content
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
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>.nav-wrapper
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>
menu
.brand-logo
Materialize のナビゲーション・バーにブランド・ロゴを付けるには、brand-logo クラスを指定する。
<nav>
<div class="nav-wrapper">
<div class="container">
<a href="/" class="brand-logo">SE学院</a>
</div>
</div>
</nav>
.right
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>
menu
.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>
menu
.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を使う。
