Materialize入門 | マテリアルデザインCSSフレームワークの使い方

Materializeとは、Googleが推奨するマテリアルデザインのWebサイトを簡単に構築できるCSSフレームワークです。この記事では、Materializeの使い方を入門者向けにサンプルを交えて解説します。この記事自体もMaterializeを使っています。

Materializeの使い方

MaterializeのCSSフレームワークは、CSSとJavaScriptから構成されている。

Materializeのコンポーネント
用途 コンポーネント 説明
通常版 materialize.css MaterializeのCSS
materialize.js MaterializeのJavaScript
縮小版 materialize.min.css サイズを縮小化したMaterializeのCSS
materialize.min.js サイズを縮小化したMaterializeのJavaScript

通常版はCSSやJavaScriptを見やすくするために、改行や字下げを行っている。デバッガでMaterializeのJavaScriptの中まで追いたい場合に便利である。

縮小化版はCSSやJavaScriptを見やすくするための改行や字下げを行っていない。サイズが小さいので、通常は縮小化版を使うとよい。

CDNの使い方

MaterializeはCDN(コンテンツ・デリバリ・ネットワーク)を利用すると高速化できる。

CDNからMaterializeをインポートするには、次のようにする。

<!DOCTYPE html>
<html>
  <head>
    <!-- Googleアイコンフォントのインポート -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- モバイル向けに最適化 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <!-- コンテンツ -->

    <!-- Materialize JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

materialize.jsをインポートする箇所はどこでもよいが、Webブラウザの初期レンダリングを遅延させないために、body要素の最後でインポートするのが望ましい。

グリッド

Materializeのグリッドでは、水平方向を12分割している。

1カラムレイアウト

<div class="row">
  <div class="col s12">.col .s12</div>
</div>
.col .s12

2カラムレイアウト

<div class="row">
  <div class="col s16">.col .s6</div>
  <div class="col s16">.col .s6</div>
</div>
.col .s6
.col .s6

Materializeで現在の位置を表わすパンくずリストを作成するには、div要素にnav-wrapperクラスを指定する。

<nav>
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="/" class="breadcrumb">SE学院</a>
      <a href="/css/" class="breadcrumb">CSS</a>
      <a href="/css/materialize/" class="breadcrumb">Materialize</a>
    </div>
  </div>
</nav>

上記のHTMLは、Materializeで次のように表示される。

Google検索がパンくずリストを正確に認識するために、パンくずリストを構造化データでマークアップすることが望ましい。

<nav>
  <div class="nav-wrapper">
    <div class="container">
      <a href="/" class="brand-logo">SE学院</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li class="active"><a href="/css/">CSS</a></li>
        <li><a href="/html/">HTML</a></li>
        <li><a href="/javascript/">JavaScript</a></li>
      </ul>
    </div>
  </div>
</nav>

ヘッダの実際の表示例は、このページの一番上をご覧ください。

スライドメニュー

<nav>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
  <div class="nav-wrapper">
    <div class="container">
      <a href="/" class="brand-logo">SE学院</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li class="active"><a href="/css/">CSS</a></li>
        <li><a href="/html/">HTML</a></li>
        <li><a href="/javascript/">JavaScript</a></li>
      </ul>
    </div>
  </div>
</nav>
<ul id="slide-out" class="sidenav">
  <li>
    <div class="user-view">
      <div class="background">
        <img src="/img/background.png">
      </div>
      <a href="https://twitter.com/ghg02770"><img class="circle" src="/img/tsuka.png"></a>
      <a href="https://twitter.com/ghg02770"><span class="white-text name">tsuka</span></a>
    </div>
  </li>
  <li><a href="/css/">CSS</a></li>
  <li><a href="/html/">HTML</a></li>
  <li><a href="/javascript/">JavaScript</a></li>
</ul>

スライドメニューの実際の表示例は、スマホでこのページをご覧ください。

Materializeでフッタを作成するには、footer要素にpage-footerクラスを指定する。

<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col s6">
        <h5 class="white-text">SE学院</h5>
        <p>システムエンジニアやプログラマのスキルアップに役立つ情報を提供しています。</p>
      </div>
      <div class="col s6">
        <h5>CSSフレームワーク</h5>
        <ul>
          <li><a href="/css/bootstrap/" class="white-text">Bootstrap</a></li>
          <li><a href="/css/google-code-prettify.html" class="white-text">Google code-prettify</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      &copy; 2018 SE学院
    </div>
  </div">
</footer">

フッタの実際の表示例は、このページの一番下をご覧ください。

COLOR

Materializeで色を指定するには、次のクラスを指定する。

色を指定するMaterializeのクラス
クラス名 説明
red 赤色
pink 桃色
purple 紫色
deep-purple 深紫色
indigo 藍色
blue 青色
light-blue 水色
cyan シアン色
teal 深緑色
green 緑色
light-green 黄緑色
lime 黄土色
yellow 黄色
amber 橙色
orange オレンジ色
deep-orange 朱色
brown 茶色
grey 灰色
blue-grey 鈍色
black 黒色
white 白色
transparent 透明

色に加えて、色の明度をクラスで指定できる。

色の明度を指定するMaterializeのクラス
クラス名 説明
lighten-5 めっちゃ明るい
lighten-4 かなり明るい
lighten-3 明るい
lighten-2 やや明るい
lighten-1 わずかに明るい
darken-1 わずかに暗い
darken-2 やや暗い
darken-3 暗い
darken-4 かなり暗い
darken-5 めっちゃ暗い
.red
.pink
.purple
.deep-purple
.indigo
.blue
.light-blue
.cyan
.teal
.green
.light-green
.lime
.yellow
.amber
.orange
.deep-orange
.brown
.grey
.blue-grey
.black
.white

ICON

Googleアイコンフォントをインポートしておけば、マテリアルアイコンを表示することができる。

<i class="material-icons">info</i>
<i class="material-icons tiny">info</i>
<i class="material-icons small">info</i>
<i class="material-icons medium">info</i>
<i class="material-icons large">info</i>

info info info info info

Materializeのメリット

Materializeはタグの構造が簡単です。Bootstrapではタグを入れ子にしなければならないところを、Materializeは簡素な構造でできます。

クラス名を指定する頻度も低いです。

Materializeのデメリット

Materializeは英語を基準としてデザインされているため、日本語で使うと文字のバランスが悪いです。

この記事もMaterializeを使っていますが、見出しの文字が大きすぎで、本文の文字は小さすぎます。

とくにh1やh2の文字が大きすぎて、スマホで表示させるには不向きです。h5やh6にすればちょうどよいのですが、見た目を変えるためだけにh5やh6を使うのは、構造化文章を記述するHTMLからすれば本末転倒です。

この記事はMaterializeのサンプルとするために、あえてそのままにしています。実際には、文字の大きさを自分で再定義する必要があるでしょう。

mode_edit
このエントリーをはてなブックマークに追加