Materialize CSSフレームワークを使ってみました

＊Materialize とは

Googleが推奨するマテリアルデザインを取り入れたフレームワークです。
スタイルやアニメーションがデフォルトで使えるようになっていて、統一されたデザインを簡単に実装することができるようになっています。

＊参考

＊環境

MacOS
Materialize 1.0.0

＊ダウンロード

公式ドキュメントにある Getting Started から Materialize のダウンロードボタンを押下します。

ダウンロードしたZipファイルを展開すると下記のディレクトリ構成になっています。

materialize
├── LICENSE
├── README.md
├── css
│   ├── materialize.css
│   └── materialize.min.css
└── js
    ├── materialize.js
    └── materialize.min.js

必要なのは圧縮版のmaterialize.min.cssとmaterialize.min.jsなので、この2つを任意のディレクトリに移動します。そのあと、そのディレクトリ直下にindex.htmlを作成します。

sample
├── css
│   └── materialize.min.css
├── index.html
└── js
    └── materialize.min.js

＊HTMLの作成

cssファイルとjsファイルを読み込むため、index.htmlを下記内容で更新します。

 <!DOCTYPE html>
 <html>
   <head>
     <!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
     <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

     <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body>
     <!--JavaScript at end of body for optimized loading-->
     <script type="text/javascript" src="js/materialize.min.js"></script>
   </body>
 </html>

＊ボタン

bodyタグの中に下記を追加します。

<!--Button-->
<div>
  <!--普通のボタン-->
  <a class="btn">ボタン</a>
  <!--左にGoodアイコンがあるボタン-->
  <a class="btn"><i class="material-icons left">thumb_up</i>ボタン</a>
  <!--右にGoodアイコンがあるボタン-->
  <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>
</div>
<div>
  <!--submit用のアイコンがあるボタン-->
  <button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
  </button>
</div><br>
<div>
  <!--大きいサイズのボタン-->
  <a class="waves-effect waves-light btn-large">Button</a>
  <!--大きいサイズの左に雲アイコンがあるボタン-->
  <a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a>
  <!--大きいサイズの右に雲アイコンがあるボタン-->
  <a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a>
</div>

＊コレクション

bodyタグの中に下記を追加します。
カーソルを当てると該当の行が灰色になります。

<div class="collection">
    <a href="#!" class="collection-item"><span class="badge">1</span>Alan</a>
    <a href="#!" class="collection-item"><span class="new badge">4</span>Alan</a>
    <a href="#!" class="collection-item">Alan</a>
    <a href="#!" class="collection-item"><span class="badge">14</span>Alan</a>
</div>

＊Navber

bodyタグの中に下記を追加します。

<div>
  <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>
</div>

＊カード

bodyタグの中に下記を追加します。

<div>
  <div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
            I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>
</div>

＊アイコン

bodyタグの中に下記を追加します。
アイコンは様々なタイプが用意されていて、公式ドキュメントで確認することができます。大きくしたい場合はclassにlargeを指定します。

公式ドキュメント/ icons

<div>
  <i class="material-icons">add</i>
</div>
<div>
  <i class="large material-icons">accessibility</i>
  <i class="large material-icons">adb</i>
  <i class="large material-icons">alarm</i>
  <i class="large material-icons">bluetooth</i>
</div>

＊ページング

bodyタグの中に下記を追加します。

<div>
  <ul class="pagination">
    <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
    <li class="active"><a href="#!">1</a></li>
    <li class="waves-effect"><a href="#!">2</a></li>
    <li class="waves-effect"><a href="#!">3</a></li>
    <li class="waves-effect"><a href="#!">4</a></li>
    <li class="waves-effect"><a href="#!">5</a></li>
    <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
  </ul>
</div>

＊ローディング

ページの読み込み中に進捗を表示させます。
バーのタイプとサークルのタイプがあります。
bodyタグの中に下記を追加します。

<div>
  <div class="progress">
    <div class="indeterminate"></div>
  </div>
</div>
<div>
  <div class="preloader-wrapper big active">
    <!--バーで進捗が表示されるタイプ-->
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
      <div class="circle"></div>
    </div>
    <!--サークルで進捗が表示されるタイプ-->
    <div class="circle-clipper right">
      <div class="circle"></div>
    </div>
    </div>
  </div>
</div>

＊チップ

bodyタグの中に下記を追加します。

<div>
  <div class="chip">
    Tag
    <i class="close material-icons">close</i>
  </div>
</div>

＊チェックボックス

bodyタグの中に下記を追加します。

<div>
  <form action="#">
    <p>
      <label>
        <input type="checkbox" />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" checked="checked" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in" checked="checked" />
        <span>Filled in</span>
      </label>
    </p>
    <p>
      <label>
        <input id="indeterminate-checkbox" type="checkbox" />
        <span>Indeterminate Style</span>
      </label>
    </p>
    <p>
      <label>
        <!--非活性-->
        <input type="checkbox" checked="checked" disabled="disabled" />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <!--非活性-->
        <input type="checkbox" disabled="disabled" />
        <span>Brown</span>
      </label>
    </p>
  </form>
</div>

＊入力フィールド

bodyタグの中に下記を追加します。
入力しようとすると色が変わります。

<div>
  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
</div>

＊ラジオボタン

bodyタグの中に下記を追加します。

<div>
  <form action="#">
    <p>
      <label>
        <!--選択するとラジオボタンが全部塗りつぶされるタイプ-->
        <input name="group1" type="radio" checked />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <!--選択するとラジオボタンの外側が白くなるタイプ-->
        <input class="with-gap" name="group1" type="radio"  />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <!--非活性-->
        <input name="group1" type="radio" disabled="disabled" />
        <span>Brown</span>
      </label>
    </p>
  </form>
</div>

＊スイッチボタン

bodyタグの中に下記を追加します。

<div>
  <div class="switch">
    <label>
      Off
      <input type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>
  <div class="switch">
    <label>
      Off
      <input disabled type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>
</div>

＊画像

bodyタグの中に下記を追加します。
選択した画像が中央に表示されます。

<div>
  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
  </div>
</div>

Javascriptの処理も必要になるため、htmlタグの下に下記を追記します。

<script type="text/javascript">
  M.AutoInit();
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  });
</script>

＊所感

簡単にスタイリッシュな部品を作成することができました。
この記事で紹介した以外にも、Javascriptを使えばさらに動きのある部品を作ることが可能です。
様々な場面で使えそうなので、Webページを作成する際には実際に使ってみようと思います。

もぐもぐプログラミング