簡単にマテリアルデザインが適用できる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

<!-- 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>