Google が発表してからちょこちょこ話題に上がっているマテリアルデザイン.

今回はそのマテリアルデザインをベースとしたフレームワーク『Materialize』使ってみたのでそのメモです. 毎回 bootstrap じゃ飽きちゃいますしね♪

Materialize って？

公式より

A modern responsive front-end framework based on Material Design

「マテリアルデザインをベースとしたモダンでレスポンシブなフロントエンドフレームワークです.」 的なことが書かれてますね.

ざっくり言うと bootstrap のマテリアルデザイン版です.

less ではなく sass 使ってるとことか若干インターフェースが違ったりしますが,
基本的には同じ感じで使えます.

Reference

• Official
• Github
• cdnjs

Materialize の使い方

Materialize 用の css と, jQuery, Materialize 用の js を読み込むだけです. cdnjs に上がっていたのでそこから引っ張ってくるのがお手軽です♪

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.1/css/materialize.min.css' />

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>  
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.1/js/materialize.min.js'></script>  

Materialize のデモ

runstant でボタンを設置したデモを作ってみました.

[runstant]

ボタンをクリックするとポワーンポワーンとマテリアルデザインの特徴である Circle Wave が 広がるのが分かるかと思います.

次回は Materialize を使って簡単な Web ページを作ってみたいと思います.

Reference

• Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize | コリス
• Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT