Materialize CSSフレームワークを使ってみました

Materialize CSSフレームワークを使ってみました

11月 18, 2018


＊Materialize とは

Googleが推奨するマテリアルデザインを取り入れたフレームワークです。
スタイルやアニメーションがデフォルトで使えるようになっていて、統一されたデザインを簡単に実装することができるようになっています。

＊参考


＊環境

  • MacOS
  • Materialize 1.0.0

＊ダウンロード

公式ドキュメントにある Getting Started から Materialize のダウンロードボタンを押下します。










ダウンロードしたZipファイルを展開すると下記のディレクトリ構成になっています。
materialize
├── LICENSE
├── README.md
├── css
│   ├── materialize.css
│   └── materialize.min.css
└── js
    ├── materialize.js
    └── materialize.min.js

必要なのは圧縮版のmaterialize.min.cssとmaterialize.min.jsなので、この2つを任意のディレクトリに移動します。そのあと、そのディレクトリ直下にindex.htmlを作成します。
sample
├── css
│   └── materialize.min.css
├── index.html
└── js
    └── materialize.min.js

＊HTMLの作成

cssファイルとjsファイルを読み込むため、index.htmlを下記内容で更新します。
 <!DOCTYPE html>
 <html>
   <head>
     <!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
     <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

     <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body>
     <!--JavaScript at end of body for optimized loading-->
     <script type="text/javascript" src="js/materialize.min.js"></script>
   </body>
 </html>

＊ボタン

bodyタグの中に下記を追加します。
<!--Button-->
<div>
  <!--普通のボタン-->
  <a class="btn">ボタン</a>
  <!--左にGoodアイコンがあるボタン-->
  <a class="btn"><i class="material-icons left">thumb_up</i>ボタン</a>
  <!--右にGoodアイコンがあるボタン-->
  <a class="btn"><i class="material-icons right">thumb_up</i>ボタン</a>
  <!--追加用の+ボタン-->
  <a class="btn-floating"><i class="material-icons">add</i>ボタン</a>
  <!--押すとウェーブなエフェクトがつくボタン-->
  <a class="btn waves-effect">ボタン</a>
</div>
<div>
  <!--submit用のアイコンがあるボタン-->
  <button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="material-icons right">send</i>
  </button>
</div><br>
<div>
  <!--大きいサイズのボタン-->
  <a class="waves-effect waves-light btn-large">Button</a>
  <!--大きいサイズの左に雲アイコンがあるボタン-->
  <a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a>
  <!--大きいサイズの右に雲アイコンがあるボタン-->
  <a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a>
</div>








＊コレクション

bodyタグの中に下記を追加します。
カーソルを当てると該当の行が灰色になります。
<div class="collection">
    <a href="#!" class="collection-item"><span class="badge">1</span>Alan</a>
    <a href="#!" class="collection-item"><span class="new badge">4</span>Alan</a>
    <a href="#!" class="collection-item">Alan</a>
    <a href="#!" class="collection-item"><span class="badge">14</span>Alan</a>
</div>






＊Navber

bodyタグの中に下記を追加します。
<div>
  <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>
</div>





＊カード

bodyタグの中に下記を追加します。
<div>
  <div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
            I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>
</div>







＊アイコン

bodyタグの中に下記を追加します。
アイコンは様々なタイプが用意されていて、公式ドキュメントで確認することができます。大きくしたい場合はclassにlargeを指定します。
<div>
  <i class="material-icons">add</i>
</div>
<div>
  <i class="large material-icons">accessibility</i>
  <i class="large material-icons">adb</i>
  <i class="large material-icons">alarm</i>
  <i class="large material-icons">bluetooth</i>
</div>








＊ページング

bodyタグの中に下記を追加します。
<div>
  <ul class="pagination">
    <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
    <li class="active"><a href="#!">1</a></li>
    <li class="waves-effect"><a href="#!">2</a></li>
    <li class="waves-effect"><a href="#!">3</a></li>
    <li class="waves-effect"><a href="#!">4</a></li>
    <li class="waves-effect"><a href="#!">5</a></li>
    <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
  </ul>
</div>





＊ローディング

ページの読み込み中に進捗を表示させます。
バーのタイプとサークルのタイプがあります。
bodyタグの中に下記を追加します。
<div>
  <div class="progress">
    <div class="indeterminate"></div>
  </div>
</div>
<div>
  <div class="preloader-wrapper big active">
    <!--バーで進捗が表示されるタイプ-->
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
      <div class="circle"></div>
    </div>
    <!--サークルで進捗が表示されるタイプ-->
    <div class="circle-clipper right">
      <div class="circle"></div>
    </div>
    </div>
  </div>
</div>







＊チップ

bodyタグの中に下記を追加します。
<div>
  <div class="chip">
    Tag
    <i class="close material-icons">close</i>
  </div>
</div>






＊チェックボックス

bodyタグの中に下記を追加します。
<div>
  <form action="#">
    <p>
      <label>
        <input type="checkbox" />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" checked="checked" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in" checked="checked" />
        <span>Filled in</span>
      </label>
    </p>
    <p>
      <label>
        <input id="indeterminate-checkbox" type="checkbox" />
        <span>Indeterminate Style</span>
      </label>
    </p>
    <p>
      <label>
        <!--非活性-->
        <input type="checkbox" checked="checked" disabled="disabled" />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <!--非活性-->
        <input type="checkbox" disabled="disabled" />
        <span>Brown</span>
      </label>
    </p>
  </form>
</div>











＊入力フィールド

bodyタグの中に下記を追加します。
入力しようとすると色が変わります。
<div>
  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
</div>






＊ラジオボタン

bodyタグの中に下記を追加します。
<div>
  <form action="#">
    <p>
      <label>
        <!--選択するとラジオボタンが全部塗りつぶされるタイプ-->
        <input name="group1" type="radio" checked />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <!--選択するとラジオボタンの外側が白くなるタイプ-->
        <input class="with-gap" name="group1" type="radio"  />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <!--非活性-->
        <input name="group1" type="radio" disabled="disabled" />
        <span>Brown</span>
      </label>
    </p>
  </form>
</div>











＊スイッチボタン

bodyタグの中に下記を追加します。
<div>
  <div class="switch">
    <label>
      Off
      <input type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>
  <div class="switch">
    <label>
      Off
      <input disabled type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>
</div>







＊画像

bodyタグの中に下記を追加します。
選択した画像が中央に表示されます。
<div>
  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
  </div>
</div>

Javascriptの処理も必要になるため、htmlタグの下に下記を追記します。
<script type="text/javascript">
  M.AutoInit();
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  });
</script>








＊所感

簡単にスタイリッシュな部品を作成することができました。
この記事で紹介した以外にも、Javascriptを使えばさらに動きのある部品を作ることが可能です。
様々な場面で使えそうなので、Webページを作成する際には実際に使ってみようと思います。

Next
« Prev Post
Previous
Next Post »
登録: コメントの投稿 (Atom)

人気の投稿

  • Docker + MySQLで開発環境用DBの作成
    開発環境のテストを自動化するため、ローカルでDBの初期データを入れたり破棄したりできるDockerを使ってMySQLの環境を作成してみました。 シェルを使ったりする方法もありましたが、今回はdocker-composeを使う方法にしました。 ＊環境 MacO...
  • gcloudコマンド一覧（自分用）
    自分用によく使うgcloudコマンドをまとめておきます。 ログイン gcloud init gcloud auth login プロジェクト一覧をする gcloud projects list アカウントを確認する gcloud auth list ...
  • Pytestの使い方
    ＊Pytestとは Pythonで書かれたテストライブラリです。 https://docs.pytest.org/en/latest/ 他にunittestなどもありますが、他のライブラリよりも失敗時のエラー表示が詳細で見やすかったり、実行時のコマンドにオプション...
  • Python + Flaskを使ったWebアプリ作成①（環境構築〜画面追加編）
    Pythonのフレームワークのひとつである Flask を使って、ブログのWebアプリケーションを作成してみました。今回の記事では「環境構築からテンプレートを使った画面の作成」までの手順です。 ＊目次 仮想環境の作成 Flaskのインストール Webサーバ...
  • Tabulator を使ってみました
    ＊Tabulator とは インタラクティブなテーブルを作成する際に便利な Javascript ライブラリで、多機能のテーブルを簡単に作成することができます。 HTMLテーブルを Tabulator に変換して表示する方法と、JSONデータを読み込んで表示する方法...
  • Python + Flask を使ったWebアプリ作成④（ログイン認証編）
    続きです。 今回はログイン認証の実装をします。 ＊参考 flask-bcrypt /公式ドキュメント flask-login /公式ドキュメント ＊環境 MacOS Python 3.6.3 Flask 1.0.2...
  • Vue.js + Chart.js でグラフを作成してみました
    Javascript のフレームワークである Vue.js でグラフを作成したいと思ってたところ、vue-chartjs という便利なライブラリがあるようだったので、実際に使って試してみました。 ＊今回作成するもの ＊参考...
  • Kerasを使って予測モデルを作成してみました
    ＊Keras とは TensorFlowやTheano上で動く、Pythonの深層学習ライブラリです。 Kerasは簡単に素早くプロトタイプを作成することを目的に作られたライブラリで、文章の自動生成や画像認識、botの作成などといったディープラーニングを簡単に実装するこ...
  • PythonでWordCloudを作成してみました
    PyLadies Advent Calendar 2018 の3日目の記事です。 Pythonで Word Cloud を使ってみたことを書きました。 ＊Word Cloud とは 文章データを可視化する手法のひとつで、文章のなかで出現頻度が高い文字を大きく...
  • Python + Flask を使ったWebアプリ作成③（DB接続〜パッケージ構成修正編）
    続きです。 SQLAlchemy を使ったDB接続処理と、パッケージ構成の修正をします。 ＊参考 Python Flask Tutorial: Full-Featured Web App Part 4 - Database with Flask-SQ...