フォーラム | 最新のWeb開発のチュートリアル
 

Materializeチュートリアル

❮ 前の次章 ❯


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

聴衆

このチュートリアルでは、材料設計ライトの基礎とどのように速く作成するためにそれを使用するには、美しく、かつ応答性のウェブサイトを学びたい専門家のためのものです。 このチュートリアルでは、材料設計Liteはすべての基本的な概念について説明します。

前提条件

このチュートリアルを進める前に、あなたは、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>

❮ 前の次章 ❯