【Materialize】Materialize ～ 入門編 ～

フロントエンドフレームワーク

■ はじめに

https://dk521123.hatenablog.com/entry/2018/05/26/005948

の続き。

友人がWebサイトを作るそうなので、ちょっと
マテリアル デザイン フレームワークを調べ直してみた。
今回は、いくつかの候補の内、Materialize について取り上げる

目次

【１】Materialize
　１）特徴
　２）ライセンス
　３）公式サイト
【２】使用上の注意（デメリット）
【３】サンプル
【４】今後使用したい場合

【１】Materialize

* マテリアルデザインに準拠したフレームワーク。

 => マテリアル デザイン (Material Design)については、
　　以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2018/05/26/005948

１）特徴

* レスポンシブWebデザイン
* Bootstrapと同様、モジュール分割

２）ライセンス

* MIT License
 => 商用としても無料で使える

https://github.com/Dogfalo/materialize/blob/v1-dev/LICENSE

３）公式サイト

https://materializecss.com/
Github
https://github.com/Dogfalo/materialize

【２】使用上の注意（デメリット）

* Githubを見ると「2020 Jun」なので、3年近く動きが止まっている
* jQuery 依存

【３】サンプル

<!DOCTYPE html>
<html lang="jp">
<head>
  <title>Hello world for Materialize</title>

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
  <!-- Header -->
  <nav role="navigation">
    <div class="nav-wrapper container">
      <a id="logo-container" href="#" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Navbar Link</a></li>
      </ul>

      <ul id="nav-mobile" class="sidenav">
        <li><a href="#">Navbar Link</a></li>
      </ul>
      <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    </div>
  </nav>
  
  <div class="container">
    <div class="section">
    Test
    </div>
  </div>
  <!-- Footer -->
  <footer class="page-footer teal">
    <div class="container">
      <div class="row">
       test
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      Made by <a class="brown-text text-lighten-3" href="#">???</a>
      </div>
    </div>
  </footer>
 
</body>
</html>

【４】今後使用したい場合

* 公式サイトのテンプレや「Getting Started」で動かしてみる

Getting Started
https://materializecss.com/getting-started.html
Templates
https://materializecss.com/templates/starter-template/preview.html
https://materializecss.com/templates/parallax-template/preview.html

* 一般サイトではあるが、以下のサイトも参考になりそう

https://qiita.com/sk2usa/items/78cc001d14418a098ed0

参考文献

https://qiita.com/sk2usa/items/78cc001d14418a098ed0
https://segakuin.com/css/materialize/

関連記事

マテリアル デザイン フレームワーク の比較調査
https://dk521123.hatenablog.com/entry/2018/05/26/005948