Cntlog > 開発 > フレームワーク > Google謹製Material Design Liteを触ってみた所感

Google謹製Material Design Liteを触ってみた所感

Googleがマテリアルデザインの考えを取り入れた公式フレームワーク「Material Design Lite」(以下、MDL)を公開しました。
少し触ってみましたので、基礎的な使い方と自分の備忘録も兼ねてまとめてみます。

Material Design Liteとは

Google謹製のマテリアルデザインの概念で作られたフレームワークです。
操作性・見た目をマテリアルデザインで形成しており、HTML、CSS,JavaScriptのコンポーネントを組み合わせて、手軽にウェブサイトやブログ、ランディングページなどを作成することができます。

またMDLで作られたページはブラウザの差異、デバイスに依存しないなどプログレッシブ・エンハンスメントとは逆の考え方で作られてます(多分)

ちなみにGoogleでは2014年「Web Starter Kit」というMDLに似たフレームワークが発表されていました。
FAQにはMDLは「Web Starter Kit」の進化版のようなものと記載されています。(多分)
FAQ

ブラウザ対応

みんな最初に気になるブラウザ対応ですが、MDLはすべてのブラウザ(Chrome, Firefox, Opera, Microsoft Edge)そしてSafariにも対応しています。
ただIEは基本10以上を推奨しておりIE9は少し見た目が変わる程度の劣化でサポートは可能とのことです。
FAQ

ちなみにIE8はサポートしないと明言されています。

Material Design Liteの使い方

とても簡単です。
CDNが用意されているのでコピペして読み込むだけ。

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

ねっ、簡単でしょ。

その他の特徴

他にも気になる細かい特徴がありましたので羅列します。

とても軽い

JSとCSSを合わせて、27KBという軽量っぷりです。
ちなみにbootstrapは180KB
私の体重はお察し…。

CSSの設計がBEM

BEMとはCSSの命名規則の一つで、Block, Element, Modifier の3つ構成で成り立っています。
噂で見たことあったくらいで私も詳しくはありませんのでこれから覚えようと思います。
ちなみに私はOOCSSの設計が好きです。

CSSプリプロセッサ

Web Starter Kit同様、Sassを使われています。
LESSの対応の予定はないようです。…辛い。


コーポネント(一部)抜粋

一番大事なポイントですね。
マテリアルデザインを利用したパーツがいくつも用意されています。

コンポーネントを正しく利用するには、マテリアルデザインのゴールや重要性を理解しておくことが重要になってきます。Googleの公式ドキュメントに目を通していないひとは、一度確認してくださいとGoogle先生が言っています。

BADGES(バッジ)

See the Pen MDL|Badges by conti (@contiki9) on CodePen.0

BUTTONS(ボタン)

ボタンもシンプル。
.mdl-button–raisedでボックス型。
.mdl-button–fabでサークル型のボタンにできる。
.mdl-js-ripple-effectを付けることでエフェクトをつける。
disabledの付けることでクリックをさせないようにできる。

See the Pen MDL|BTN1 by conti (@contiki9) on CodePen.0

カード

See the Pen MDL|CARD by conti (@contiki9) on CodePen.

カードの基本レイアウト構成。
<div class="mdl-card">
<div class="mdl-card__title">
...
</div>
<div class="mdl-card__media">
...
</div>
<div class="mdl-card__supporting-text">
...
</div>
<div class="mdl-card__actions">
...
</div>
</div>

他にも、ローディングやグリッドレイアウト、ドロップダウンメニュー、トグルボタン、ツールチップなど様々(最低限)のパーツ(Components)は揃っています。
全部触ってると時間が足りないので、取りあえず今回はこの辺でとどめておきます。

所感

MDLは他のCSSフレームワークと異なり、マテリアルデザインを実行するための最低限のフレームワークといった印象です。

Web Starter Kit(以下WSK)が出た時も感じたのですが、これらのフレームワークは我々制作者に何かを始めさせる(慣れさせる・覚えさせる)ために用意されたフレームワークのように感じます。
WSKでは、gulpなどのタスクラインナー、MDLではマテリアルデザインなど、流行らせたい属性に合わせて用意されたようなもののように感じています。

フレームワーク全般に言えることなのですが、フレームワークを使うだけではすごいものは出来ません。できるものができるだけです。
フレームワークは道具の集まりです。

道具を理解してモノを作るのが製作者だと思うので、フレームを理解し、道具の適材適所を見極め、自分のスキルを融合させることで初めて自分なりのモノが創りあげれると思います。
ようは、使ってみて、ソースを読んで、覚えて、最後には、

俺が・わたしが!
マテリアルデザインだ!

となろうとさせるフレームワークそれがMaterial Design Lite!って感想です。

ところでだれか、関西でマテリアルデザインの勉強会開いてください。
私待ってる。

関連記事

Flexbox童貞を卒業させるためのフレームワーク(Dlex)作りました。... Flexbox ベースのレスポンシブ CSS フレームワーク Dlex を作りしました。 もともと Flexboxは好きではなく、display:table派だったのですが、長いことFlexboxを放置していたのですが、 Disろうと思って学び直して見たらつい熱が入りフレームワーク化してしてま...
bootstrap並にイケてたCSSフレームワーク※サンプル有り... 新年もあけましたので新しいCSSフレームワークを探していたら素敵なものと出会いました。 Gumby Gumbyで作られたサイト 作成したサンプル CSSフレームワークって? CSSフレームワークとは、htmlソースにフレームワークに沿った記述をするだけで、簡単に...
CSSフレームワークの使いドコロ CSSフレームワークは以前からありましたが、レスポンシブデザインが流行するのに比例して、こちらの注目度も高まってきています。 レスポンシブ対応を0から自作しようと思うと時間と労力もかかりますし、メンテナンスにも欠けてしまうあたりが流行出した理由でしょうか。 CSSフレームワークと...
学習コストが低くて使いやすいCSSフレームワーク(Skeleton)... 最近色々なサイトを作る機会に恵まれました。 普段はUikitといった大型のCSSフレームワークを使うのですが、ふとした機会にミニマムなCSSフレームワークに出会い、一目惚れしましたのでご紹介します。 Skeletonとは Skeletonはとても...