.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 要素または textarea 要素にラベル付ける場合、それらを div 要素で囲む。div 要素には input-field クラスを指定する。
<div class="input-field">
<input type="text" id="first_name">
<label for="first_name">名</label>
</div>
名
テキストフィールドにプレースホルダを指定すると、ラベルの表示方法が変わる。
<div class="input-field">
<input type="text" id="last_name" placeholder="佐藤">
<label for="last_name">姓</label>
</div>
姓
.validate
Materialize CSSフレームワークでフィールドに入力された値を検証するには、validate クラスを指定する。これにより、メールアドレスの形式などをチェックできる。
helper-text クラスを指定した場所に検証結果が表示される。
<div class="input-field">
<input type="email" id="email" class="validate">
<label for="email">メールアドレス</label>
<span class="helper-text" data-error="wrong" data-success="right"></span>
</div>
メールアドレス
Materialize CSSフレームワークで入力フィールドを無効にするには、disabled 属性を指定する。
<div class="input-field">
<input type="text" id="const" disabled="disabled" />
<label for="const">入力不可</label>
</div>
<label>
<input type="checkbox" disabled="disabled" />
<span>入力不可</span>
</label>
入力不可
選択不可
select
Materialize CSSフレームワークでは、select 要素を 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
.z-depth-1
<p class="z-depth-1">z-depth-1</p>z-depth-1
.z-depth-2
<p class="z-depth-2">z-depth-2</p>z-depth-2
.z-depth-3
<p class="z-depth-3">z-depth-3</p>z-depth-3
.z-depth-4
<p class="z-depth-4">z-depth-4</p>z-depth-4
.z-depth-5
<p class="z-depth-5">z-depth-5</p>z-depth-5
.striped
Materialize CSSフレームワークを使って表における各行の背景色を縞模様にするには、<table> タグに striped クラスを指定する。
<table class="striped">
<caption>ブレークポイント</caption>
<thead>
<tr>
<th>ブレークポイント</th>
<th>接頭辞</th>
<th>寸法</th>
</tr>
</thead>
<tbody>
<tr>
<td>mobile</td>
<td>s</td>
<td>≤600px</td>
</tr>
<tr>
<td>tablet</td>
<td>m</td>
<td>>600px</td>
</tr>
<tr>
<td>desktop</td>
<td>l</td>
<td>>992px</td>
</tr>
<tr>
<td>large desktop</td>
<td>xl</td>
<td>>1200px</td>
</tr>
</tbody>
</table>
ブレークポイント
ブレークポイント
接頭辞
寸法
mobile
s
≤600px
tablet
m
>600px
desktop
l
>992px
large desktop
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を使う。
