簡単！マテリアルデザイン「Materialize」でサイト作ってみた！第3回目

2015.02.06

Googleマテリアルデザインのフレームワーク「Materialize」でWEBサイトの作り方やコンポーネントの紹介、第三回目です！
 
/* マテリアルデザイン「Materialize」でサイト作ってみた！ */
●第一回目-「DLからナビゲーション実装まで」
●第二回目-「グリットレイアウトとパララックスまで」
●第三回目-「アイコン、ボタン、シャドー設置まで」
 

早速WEBサイトを作っていきましょ！

ボリュームがありすぎるので数回に分けて紹介します！
今回はアイコン、シャドー、ボタン設置までです！
 




1）アイコンを使います！
2）ボタンを設置します！
3）シャドーを付けます！

 

デモサイト
デモサイト
URL：https://liruu.com/demo/materialize/
 

1）アイコンを使います！
 
沢山のアイコンが用意されています。
基本的なアイコンから、可愛らしいものまでありますので、設置したいアイコンの下にある文字列「mdi-」をクラスに指定します。
サイズは4つ用意されています。
必要に応じて指定してください。
 

「Materialize」のアイコン一覧
 

ちなみに、まだrem指定に慣れていないので、
ピクセル単位も併せて記載しました。
 

コードはこちら　↓

/*---------*/

●アイコンのみ指定
<i class="mdi-hardware-keyboard"></i>

●アイコンとサイズの指定
<i class="large mdi-hardware-keyboard"></i>

●アイコンとサイズとフォントカラーの指定
<i class="cyan-text large mdi-hardware-keyboard"></i>

/*---------*/

2）ボタンを設置します！
 

 
ボタンのメインスタイルは3つ！
「Raised」・・・長方形で背景色付きの標準ボタン
「Floating」・・・円形ボタン
「Flat」・・・長方形で背景色無しのボタン
 
コードはこちら↓

/*---------*/

●標準ボタン（クリックアニメーション無し）
<a class="btn">標準ボタン</a>

●円形ボタン（クリックアニメーション無し）
<a class="btn-floating">円形ボタン</a>

●フラットボタン（クリックアニメーション無し）
<a class="btn-flat">円形ボタン</a>

/*---------*/

 
実装サンプルはデモサイトをご覧ください！
デモサイト
 
ホバー・クリックアニメーション、カラー、大きいサイズ、シャドーが指定できます！
 

/*---------*/

●ウェーブのデフォルト　暗いウェーブ
<a class="waves-effect btn">暗いウェーブ</a>

●明るいウェーブ
<a class="waves-effect waves-light btn">明るいウェーブ</a>

●大きいサイズ
<a class="waves-effect waves-light btn-large">大きいサイズ</a>

●シャドー付きのボタン
<a class="waves-effect waves-light btn-large z-depth-4">シャドー付きボタン</a>

/*---------*/

また先に説明したアイコンも挿入できます！
 

3）シャドーを付けます！
 
ボタンやカラムなど、さまざまな要素にシャドーを付け、視覚効果で立体感のあるデザインに仕上げるのも簡単！！
またありがたいことにサイズが5パターン用意されており、サイズによってホバーアニメーションも自動的に変わります。
 

 
コードはこちら↓

/*---------*/

<p class="z-depth-1">z-depth-1</p>

/*---------*/

「z-depth-」後の数値を任意に変更するだけで、指定した要素にシャドーが付加されます。
 

今回紹介した要素は、マテリアルデザインで重要です！
統一することでユーザビリティも向上しますので、
次回はJS周りを紹介します！
 

/* マテリアルデザイン「Materialize」でサイト作ってみた！ */
●第一回目-「DLからナビゲーション実装まで」
●第二回目-「グリットレイアウトとパララックスまで」
●第三回目-「アイコン、ボタン、シャドー設置まで」