簡単!マテリアルデザイン「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からナビゲーション実装まで」 ●第二回目-「グリットレイアウトとパララックスまで」 ●第三回目-「アイコン、ボタン、シャドー設置まで」
Contact