Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【JavaScript】マテリアルデザインCSSフレームワーク「MUI」

MUI とは

MUIは数あるマテリアルデザインCSSフレームワークの一つです。MUIを使うことで、Webページを簡単にマテリアルデザイン風にすることができます。

f:id:rennnosukesann:20180218224447p:plain

マテリアルデザインとは

マテリアルデザインとは、2014年にGoogleが提唱した(*1)UI/UXの体系です。

マテリアルデザインではWebページのコンポーネントを現実世界の「紙」と「インク」になぞらえ、さらに光や影、奥行きなどの表現を取り入れることで人間にとって違和感のないUXを生み出します。

これによりユーザの操作感が統一され、デバイスが変わってもユーザにとって負担のないアプリケーションを作ることができ、 最近ではブラウザ・ネイティブ・デスクトップのあらゆるアプリケーションでこのマテリアルデザインが採用されています。

マテリアルデザインのさらなる詳細はこちら(本家)。

Usage

js/css読み込み

MUIはCDNでjsとcssを参照してすぐに使うことができます
(もちろんjs/cssをダウンロードしてローカル参照も可能)。

<!-- load MUI -->
<link href="https://cdn.muicss.com/mui-0.9.36/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.muicss.com/mui-0.9.36/angular/mui-angular.min.js"></script>

コンポーネント

Panel

タグclassにmui-panelを指定すると、対象タグの領域が少し浮き上がった「紙」のデザインになります。

f:id:rennnosukesann:20180218230620p:plain

<div class="mui-panel">
    mui-panel
</div>

Button

ボタン。buttonタグに使用可能です。
こちらも少し浮き上がったデザインに。

f:id:rennnosukesann:20180218231255p:plain

<button class="mui-btn">Button</button>

AppBar

タグclassにmui-appbarを指定。
アプリのタイトルバーに使えます。

f:id:rennnosukesann:20180218231936p:plain

<div class="mui-appbar">
  App
</div>

Form

入力フォーム。form/タグと、inputタグを子要素に持つタグに使用可能です。

f:id:rennnosukesann:20180218233104p:plain

<form class="mui-form">
  <legend>mui-form</legend>
  <div class="mui-textfield">
    <input type="text" placeholder="Input">
  </div>
  <div class="mui-textfield">
    <textarea placeholder="Textarea"></textarea>
  </div>
  <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>

上記の例以外にもTableやDropdownのマテリアルデザインなど、基本的コンポーネントに対しては一通りデザインが用意されているようです。 ただmui-panelを使っていくだけでも割りとそれっぽく作ることはできます。

f:id:rennnosukesann:20180218234439p:plain

参考文献

*1 マテリアルデザイン - Wikipedia

Introduction - Material Design