はじめに

• chat_bubble_outlineこのドキュメントの役割

  このドキュメントはデザインフレームワークMaterializeの勉強ついでにまとめたものです。
  レスポンシブかつマテリアルなデザインを簡単に作ることができます。
  
  とにかくMaterializeの使い方を早く知りたいよ！！という方向けに、ソースを明示しながら紹介していきます。
  
  このページのソースはGithubに公開してます。

• system_update_altダウンロード

  公式サイトからGETしましょう！
  
  Sassとかとりあえずいいので、左側のボタンから.zipをダウンロードしましょう。

  
• inputセットアップ

  .zipを解答すると3つのフォルダが中に入っています。css,font,jsです。詳細はこちら。cssとjsはそれぞれの中に入っているmaterialize.min.*さえあれば大丈夫です。
  
  その後（ファイルを適切な場所において、それに基づいて）htmlにリンクを書きましょう。
  こんな感じです！
  

• infoこの部品について

  Collapsibleという名前です。
  
  この例ではulタグのclassに"popout"をつけていて、少し面白い動きをしてくれます。デフォルトで展開しておく際は、ulの子要素が<div class="collapsible-header active">となります。
  
  なおCollapsibleを使う際は、JavaScriptで初期処理を記載する必要があるので、ご注意を！
  

カード

タイトル

マテリアルデザインでおなじみ、カードがつくれ、このように画像をいれたり、リンク先を指定ができます。

カードは<div class="card">にて作れ、次の構造を取ります。

<div class="card">
  <div class="card-image"></div>
  <div class="card-content"></div>
  <div class="card-action"></div>
</div>

右（もしくは下）のカードはマウスオーバーで浮き上がるエフェクトがついてます。これは、hoverableを指定することで可能です。

<div class="card hoverable">

リンク

ボタン

<a class="btn">ボタン</a>

<a class="btn"><i class="material-icons left">thumb_up</i>ボタン</a>

<a class="btn"><i class="material-icons right">thumb_up</i>ボタン</a>

<a class="btn-floating"><i class="material-icons">add</i>ボタン</a>

<a class="btn waves-effect">ボタン</a>

<a class="btn waves-effect waves-light">ボタン</a>

入力フォーム

<div class="input-field">
  <input id="hoge" type="下の例のいずれかを指定" class="validate">
  <label for="hoge">ラベルの文字列</label>
</div>

<div class="input-field">
  <select>
    <option value="" disabled selected>選んでください</option>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
  </select>
  <label>ラベルの文字列</label>
</div>