マテリアライズ-環境設定

この章では、マテリアライズに適した環境を設定するさまざまな側面について説明します。

オプションオンラインでお試しください

マテリアライズプログラミング環境をオンラインでセットアップしたので、利用可能なすべての例をオンラインでコンパイルして実行できます。それはあなたが読んでいるものに自信を与え、あなたがさまざまなオプションでプログラムを検証することを可能にします。例を自由に変更して、オンラインで実行してください。

CodingGroundで入手可能なオンラインコンパイラを使用して、次の例を試してください
<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>
このチュートリアルに記載されているほとんどの例では、右上隅にあるWebサイトのコードセクションに[試してみる]オプションがあり、オンラインコンパイラにアクセスできます。だから、それを利用して、あなたの学習を楽しんでください。

マテリアライズの使い方は？

マテリアライズを使用するには2つの方法があります-

Local Installation −ダウンロードできます materialize.min.css そして materialize.min.js ローカルマシン上のファイルをHTMLコードに含めます。

CDN Based Version −含めることができます materialize.min.css そして materialize.min.js コンテンツ配信ネットワーク（CDN）から直接HTMLコードにファイルを挿入します。

ローカルインストール

に移動 http://materializecss.com/getting-started.html 利用可能な最新バージョンをダウンロードします。
次に、ダウンロードしたものを入れます materialize.min.js あなたのウェブサイトのディレクトリにあるファイル、例えば/ jsと materialize.min.css / cssにあります。

例

含める css そして js 次のようにHTMLファイルにファイルします。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "/materialize/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "/materialize/materialize.min.js"></script>             
   </head>
  
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

次のような結果になります。

CDNベースのバージョン

含めることができます materialize.min.js そして materialize.min.css コンテンツ配信ネットワーク（CDN）から直接HTMLコードにファイルを挿入します。 cdnjs.cloudflare.com 最新バージョンのコンテンツを提供します。

このチュートリアルでは、cdnjs.cloudflare.comCDNバージョンのライブラリを使用しています。

例

上記の例を使用して書き直します materialize.min.css そして materialize.min.js cdnjs.cloudflare.comCDNから。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
      </script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

次の結果が得られます-