Material Design Liteの汎用クラス

harada 80views 更新:2017年4月18日

Material Design Liteを利用することで簡単にマテリアルデザインを利用したサイトを構築することができます。
細かく汎用クラスが設定されており、よく使いそうなクラスをメモしておきます。
Material Design Lite

テキスト色と背景色を変更する

以下の例のクラスのカラー名と数字をマテリアルデザインのパレットに当てはめることで色を指定できます。
色指定の詳細はこちらの記事にリストで掲載されており、ありがたかったです。
Material Design Liteの文字色・背景色変更用class名と色の見本帳

テキスト色を変更する(例:レッドの100%)

mdl-color-text--red-100

背景色を変更する(例:レッドの100%)

mdl-color--red-100

テキストの位置を調整する

//真ん中
mdl-typography--text-center
//左寄せ
mdl-typography--text-left
//右寄せ
mdl-typography--text-right

フォントの太さを調整する

//font-weight:200
mdl-typography--font-thin
//font-weight:300
mdl-typography--font-light
//font-weight:400
mdl-typography--font-regular
//font-weight:500
mdl-typography--font-medium
//font-weight:700
mdl-typography--font-bold
//font-weight:900
mdl-typography--font-black

縦位置真ん中レイアウト

<div class="mdl-grid">
<div class="mdl-cell--middle">
縦位置真ん中
</div>
</div>

グリッドスタイルのpaddingを0に

mdl-gridと同時に利用します。

<div class="mdl-grid mdl-grid--no-spacing">
</div>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません