【JavaScript】マテリアルデザインCSSフレームワーク「MUI」
MUI とは
MUIは数あるマテリアルデザインCSSフレームワークの一つです。MUIを使うことで、Webページを簡単にマテリアルデザイン風にすることができます。
マテリアルデザインとは
マテリアルデザインとは、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
を指定すると、対象タグの領域が少し浮き上がった「紙」のデザインになります。
<div class="mui-panel"> mui-panel </div>
Button
ボタン。buttonタグに使用可能です。
こちらも少し浮き上がったデザインに。
<button class="mui-btn">Button</button>
AppBar
タグclassにmui-appbar
を指定。
アプリのタイトルバーに使えます。
<div class="mui-appbar"> App </div>
Form
入力フォーム。form/タグと、inputタグを子要素に持つタグに使用可能です。
<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
を使っていくだけでも割りとそれっぽく作ることはできます。