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

のんびりSEの議事録

プログラミング系のポストからアプリに関してのポストなどをしていきます。まれにアニメ・マンガなど

簡単にマテリアルデザインが適用できるMaterializeを利用してみた

自分は基本サーバサイドをやることが多かったので、大体CSSフレームワークTwitter Bootstrapを利用することが多かったのですが、Googleが提唱するマテリアルデザインに関心があったので、自分のHP用にMaterializeを利用してみました。

マテリアルデザインとは

下記が詳しく記述されているよう、Googleが発表したデザインのガイドラインで、多様なプラットフォーム・デバイスサイズ間で統一感のある体験ができる、「古典的な良いデザインの原則」と「技術や科学の可能性と革新」を融合した Visual Language (視覚的な言語) の作成を目的としているようです。

qiita.com

Materialize

materializecss.com

Twitter Bootstrapとの違い

ざっくり触ってみた感じの違いを一部紹介します。 

  • textやbackgroundのcolor変更がclass指定で行える
  • 日付入力のinputで、デフォルトでDate Pickerが利用できる(Twitter Bootstrapでは拡張する必要がある)

他にもありそうなので、また徐々に調べていこうかなと

導入

ここではCDNを利用します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Materiallize Sample</title>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

  </body>
</html>

作ったHP

単なるランディングページですが。。。

www.nkr-solutions.website

利用したデザイン

Navbar

materializecss.com

<header>
  <nav class="cyan darken-1" role="navigation">
    <!-- nav-wrapperを指定する -->
    <div class="nav-wrapper container">
      <a id="logo-container" href="#index-banner" class="brand-logo text-white">NKR Solutions</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#about" title="about">About Us</a></li>
        <li><a href="#production">Production</a></li>
        <li><a href="#links" title="links">Links</a></li>
        <li><a href="#contact">Contact Us</a></li>
      </ul>
      <!-- スマホ用ナビメニューアイコン -->
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
  </nav>
</header>

<!-- スマホ用ナビ -->
<ul id="nav-mobile" class="side-nav">
  <li><a href="#about" title="about">About Us</a></li>
  <li><a href="#production" title="production">Production</a></li>
  <li><a href="#links" title="links">Links</a></li>
  <li><a href="#contact" title="contact">Contact Us</a></li>
</ul>

<script type="text/javascript">
  $(document).ready(function(){
    // sideNavを利用する
    $('.button-collapse').sideNav();
  });
</script>

CardsとChips

materializecss.com

materializecss.com

<!-- cardデザインを適用したいブロックに指定 -->
<div class="card blue-grey darken-1">
  <!-- card内のコンテンツ -->
  <div class="card-content white-text">
     <!-- cardのタイトル -->
    <span class="card-title">store_api</span>
    <p>
      GooglePlay/AppStoreからランキング情報をスクレイピングして、データを取得するgem
    </p>
  </div>
  <!-- cardの下部に表示される領域 -->
  <div class="card-action">
    <a href="https://rubygems.org/gems/store_api" title="RubyGems store_api" target="_blank">RubyGems</a>
    <a href="https://github.com/kitaro-tn/store_api" title="Source code store_api" target="_blank">GitHub</a>
  </div>
</div>

Input fields

materializecss.com

<!-- input-fieldを指定する -->
<div class="input-field col s6">
  <i class="material-icons prefix">account_circle</i>
  <input id="icon_prefix" type="text" class="validate" value="田中 太郎">
  <label for="icon_prefix">お名前</label>
</div>
<div class="input-field col s6">
  <i class="material-icons prefix">email</i>
  <input id="icon_email" type="text" class="validate" value="taro_tanaka@gmail.com">
  <label for="icon_email">Email</label>
</div>

ちなみにこれ、現段階でサーバサイドにPOSTはしてないんですけどね。。。(-_-;)

所感

基本的にグリッドデザイン等、Twitter Bootstrapに近いものが有り、もともと利用していた人にとっては、やりやすいかなと。 そういった学習コスト面で、選択肢としてTwitter Bootstrap以外も有りかもしれないなと思いました。