Materializeの使い方

Materializeとは、Googleが推奨するマテリアルデザインのWebサイトを簡単に構築できるCSSフレームワークです。

この記事では、Materializeの使い方を入門者向けにサンプルを交えて解説します。この記事自体もMaterializeを使っています。

Materialize
ItemDescription
URL https://materializecss.com/
License MIT
Materialize v1.0.0
ModuleSize
materialize.min.css 138KB
materialize.min.js 176KB
HTML
<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li>
      <a class="btn-floating red">
        <i class="material-icons">insert_chart</i>
      </a>
    </li>
    <li>
      <a class="btn-floating yellow darken-1">
        <i class="material-icons">format_quote</i>
      </a>
    </li>
    <li>
      <a class="btn-floating green">
        <i class="material-icons">publish</i>
      </a>
    </li>
    <li>
      <a class="btn-floating blue">
        <i class="material-icons">attach_file</i>
      </a>
    </li>
  </ul>
</div>
JavaScript
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.fixed-action-btn');
  var instances = M.FloatingActionButton.init(elems, {});
});
mode_edit
Code
<div class="container red lighten-5">
Container
</div>
Preview
Container
Code
<nav>
  <div class="nav-wrapper">
    <div class="container">
      <a href="/" class="brand-logo">SE学院</a>
    </div>
  </div>
</nav>
Preview
Code
<nav>
  <div class="nav-wrapper">
    <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>
    </ul>
  </div>
</nav>
Preview

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