119
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

フロムスクラッチAdvent Calendar 2017

Day 16

googleのMaterial Designを使って一瞬でデザインをレベルアップさせる

Last updated at Posted at 2017-12-17

こちらはフロムスクラッチ Advent Calendar 2017の16日目の記事です。

35歳になってエンジニアに挑戦中の元PMです。
自分もエンジニアになって見たいと思っている方は、こちらもどうぞ。

ちょっとデザインをよくしたい。でもbootstrapはありきたりで・・・

そんな時って、ないでしょうか(笑)

前回、[Rails]slackでチャットを一括削除する方法という記事を書いたのですが、そのデザインセンスのなさに切なさを覚えました。。。

↓ これ・・・。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3130343432342f39356338333430352d636537662d636138352d376431652d3161663633313835643966342e706e67.png

流石に、もうちょっとよくした方が良いかなということで、デザインを直してみようと思います。
でもbootstrapはありきたりで・・・と思う方に、ちょうどいい感じでおしゃれなのがこちら。

Google 「Material Design」

Material_Design_Lite_と_「Rails_googleのMaterial_Designを使ってみる」を編集-_Qiita.png

テキストに、マウスを置くと、文字が左上にスライドしたりと、いちいち小洒落ております。

早速、利用して見ます。
こちらからCDNを持ってきます。
https://getmdl.io/started/index.html#download
headタグに追加

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

レイアウトは、Fixed headerを利用します。

Material_Design_Lite.png

一覧のテーブルには、こちらのOrganize dataを利用。
Material_Design_Liteあ.png

ということで、出来上がりがこちら。
この間、わずか10分。(短時間で記事がかけてラッキーw)

before

Untitled2.png

after

なんということでしょう。。。!!
ほんの10分で、デザインがあたり、かつ素のbootstrapとはまた違ったおしゃれなデザインになったのではないでしょうか!?

Untitled2_と_Understanding_Event_Delegation___jQuery_Learning_Center.png

ということで、デザインも当てたのをgithubに置いておきます。

119
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
119
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?