読者です 読者をやめる 読者になる 読者になる

りぺんぎんの書きなぐり技術書

基本、ITの技術について書きます

マテリアルデザイン(material design lite)

あけましておめでとうございます。まだまだ寒いです。

material design について勉強をはじめました

  1. マテリアルデザインってなに?
  2. どのフレームワーク使っているのか
  3. 触ってみて困ったこと
  4. いままでに解決したこと

①マテリアルデザインってなに?

マテリアルデザインなに? って言ってる人はまずこのサイトに辿り着いてないと思いますが 簡単に言うと

google が推進しているマルチプラットフォームにおいて現実の法則(影や重さなど)を取り入れた共有のUIを使うことで直感的な操作を可能とするデザイン

です。

どんなものかは

Introduction - Material design - Material design guidelines

を見ればわかるでしょう。

androidはこのマテリアルデザインを採用していてandroidの画面がPCにも来るというのが最も早いかもしれません。

②どのフレームワーク使っているのか

マテリアルデザインのcssフレームワークはたくさんありますが

中でも私が使っているのが

material design lite

Material Design Lite

です。

googleが出しているフレームワークの一つでbootstrapと似ています。

polymer

Welcome - Polymer Project

googleが出しているフレームワークの一つですが敷居は高いです。

③触ってみて困ったこと

  1. form の入力値チェック機能があるが required(必須) だけ簡単に実装できない(これほんと謎、もしかしたらあるのかもしれない)
  2. table のスクロールが実装できない (わりと困ります)
  3. まだまだ解説サイトが少ない

④. いままでに解決したこと

(1)レイアウトの単純な中央揃えが上手くいかない

material design lite は bootstrapと同じようにgridシステムを使っていますが中央揃えがずれるんですよね

これはStack Overflow で解決しました

f:id:repenguin:20170103210615p:plain

<div class="mdl-grid">
 <div class="mdl-layout-spacer"style="background-color: #1CB94A"></div>
 <div class="mdl-typography--display-1" style="background-color: red">中央揃え</div>
 <div class="mdl-layout-spacer"style="background-color: #1CB94A"></div>
</div>

真ん中にしたい要素を

<div class="mdl-layout-spacer"></div>

で囲んでやるだけですね。

(2)table の幅がレスポンシブにならない

f:id:repenguin:20170103210619p:plain

これを見ると(上)わかりますが公式サイトのtableをそのままgridに当てはめると幅が固定されます。

これはクラスでどうこうするものではなく

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width: 100%">
<!-- 省略 -->                        
</table>

table に width:100%をつけることで解決します。

頑張ってWEBサービスを作っていきます