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

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

グリッド

Materializeでは行(row)と列(col)の構造でレイアウトを構築できる。これをグリッドレイアウトと呼ぶ。

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

1カラムレイアウト

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

2カラムレイアウト

.s1〜.s11の範囲で列の幅を指定できる。

6:6

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

4:8

<div class="row">
  <div class="col s4">.col .s4</div>
  <div class="col s8">.col .s8</div>
</div>
.col .s4
.col .s8

2:10

<div class="row">
  <div class="col s2">.col .s2</div>
  <div class="col s10">.col .s10</div>
</div>
.col .s2
.col .s10

3カラムレイアウト

4:4:4

<div class="row">
  <div class="col s4">.col .s4</div>
  <div class="col s4">.col .s4</div>
  <div class="col s4">.col .s4</div>
</div>
.col .s4
.col .s4
.col .s4
<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>

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

Materializeのメリット

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

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

Materializeのデメリット

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

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

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

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

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