マテリアライズチュートリアル

Materializeは、CSS、JavaScript、およびHTMLで作成されたUIコンポーネントライブラリです。マテリアライズUIコンポーネントは、魅力的で一貫性のある機能的なWebページおよびWebアプリの構築に役立ち、ブラウザーの移植性、デバイスの独立性、優雅な劣化などの最新のWebデザインの原則を順守します。より速く、美しく、応答性の高いWebサイトを作成するのに役立ちます。 Google Material Designからインスピレーションを得ています。

聴衆

このチュートリアルは、Materializeの基本と、それを使用してより速く、美しく、応答性の高いWebページとアプリを作成する方法を学びたい専門家を対象としています。このチュートリアルでは、マテリアライズのすべての基本概念について説明します。

前提条件

このチュートリアルを進める前に、HTML、CSS、JavaScript、ドキュメントオブジェクトモデル（DOM）、およびテキストエディターの基本を理解しておく必要があります。さらに、Webベースのアプリケーションがどのように機能するかを知っていると役立ちます。

マテリアライズをオンラインで実行する

このチュートリアルで提供されるほとんどの例には、 Try-it オプションがあります。このオプションを使用して、マテリアライズプログラムをその場で実行し、学習を楽しんでください。次のサンプルコードボックスの右上隅にある Try-it オプションを使用して、次の例を試してください。

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