Materialize

Materializeには2つの異なる形式があります。あなたの好みと専門知識に応じて、どちらのバージョンを使用するかを選択できます。Materializeを使い始めるには、以下のいずれかのオプションをダウンロードするだけです。

これは、縮小版と非縮小版のCSSとJavaScriptファイルの両方が付属する標準バージョンです。このオプションは、ほとんどセットアップを必要としません。Sassに慣れていない場合は、これを使用してください。

Materialize

Sass

このバージョンには、ソースSCSSファイルが含まれています。このバージョンを選択することで、どのコンポーネントを含めるかをより詳細に制御できます。このオプションを選択した場合は、Sassコンパイラが必要になります。

ソース

CDN

CDNのすべてのバージョンは、cdnjsにあります。


    <!-- 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>

NPM

NPMを使用して最新リリースを入手することもできます。このリリースには、ソースファイルとコンパイルされたCSSおよびJavaScriptファイルが含まれています。


    npm install materialize-css@next

Bower

bowerを使用して最新リリースを入手することもできます。このリリースには、ソースファイルとコンパイルされたCSSおよびJavaScriptファイルが含まれています。(bowerは非推奨です。)


    bower install materialize

Materializeがあなたの次のプロジェクトで役立つことを願っています。ソーシャルメディアでMaterializeを広めていただければ幸いです。また、開発をサポートしたい場合は、寄付をお願いします。

            
            @MaterializeCSSをフォローする

プロジェクト構造

ダウンロード後、ファイルをウェブサイトが置かれているディレクトリに解凍します。ディレクトリは次のようになります。

minが付いているファイルは、読み込み時間を短縮するために「圧縮」されていることを意味します。これらの縮小ファイルは通常、本番環境で使用されますが、開発中は縮小されていないファイルを使用することをお勧めします。


  MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html

HTMLセットアップ

次に、Webページでファイルが正しくリンクされていることを確認する必要があります。一般的に、ページの読み込み時間を短縮するために、bodyの最後にjavascriptファイルをインポートすることをお勧めします。MaterializeをWebページにインポートする方法については、以下の例に従ってください。


  <!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>

最小限のセットアップ時間でWebサイトの設計を簡単に開始できるように、いくつかのスターターテンプレートを作成しました。コレクションを参照して、最適なものをダウンロードしてください。

スターターテンプレート

これは、ヘッダー、行動喚起、およびアイコン機能を備えた最もシンプルなスターターページです。

デモダウンロード

パララックステンプレート

これは、ヘッダー、行動喚起、およびアイコン機能を備えた最もシンプルなスターターページです。

デモダウンロード

プロジェクトにMaterializeを簡単に含めるための、コミュニティ製のオプションがいくつかあります。これらはテストされておらず、古くなっている可能性があることに注意してください。

Ruby Gem

このgemのドキュメントについては、こちらをご覧ください。


  gem 'materialize-sass'

Meteorパッケージ


  meteor add materialize:materialize

Emberパッケージ


  # install via npm
  $ npm install ember-cli-materialize --save-dev
  # make ember-cli fetch internal dependencies
  $ ember g ember-cli-materialize

このセクションは、SassバージョンのMaterializeをダウンロードした場合にのみ関係します。

Sassのコンパイル

cssフォルダを持つ代わりに、ダウンロードには、個々のコンポーネントのスタイルを含む多くの.scssファイルが含まれていることがわかります。残念ながら、ブラウザはSassを解釈できないため、Sassコンパイラにscss/materialize.scssを通常のCSSファイルにコンパイルさせる必要があります。この時点で、この新しく出力されたファイルをHTMLページにリンクできます。


  MyWebsite/
  |--css/
  |  |--materialize.css <-- compiled from scss/materialize.scss
  |
  |--js/
  |  |--materialize.js
  |
  |--scss/
  |  |--materialize.scss
  |  |--components/
  |
  |--index.html