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

Material Design Liteチュートリアル


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


聴衆

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


前提条件

このチュートリアルを進める前に、HTML、CSS、JavaScriptの、ドキュメントオブジェクトモデルの基本的な理解が必要です(DOM)および任意のテキストエディタを。 あなたはWebベースのアプリケーションがどのように機能するかを知っていればまた、それが役立ちます。


マテリアルデザインLiteのオンラインを実行します

このチュートリアルで示す例のほとんどは、あなたは見つけるでしょうTry-itオプションを選択します。 その場であなたの材料設計Liteのプログラムを実行し、あなたの学習を楽しむためには、このオプションを使用します。

使用して、次の例を試してTry-it次のサンプルコードボックスの右上に利用できるオプションを-

<html>
   <head>
      <title>The Material Design Lite Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Material Design</span>
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="">Home</a>
               <a class="mdl-navigation__link" href="">Features</a>
               <a class="mdl-navigation__link" href="">About Us</a>
               <a class="mdl-navigation__link" href="">Log Out</a>
            </nav>
         </div>
         <main class="mdl-layout__content">
            <div class="page-content" style="padding-left:100px;">Hello World!</div>
         </main>
      </div>
   </body>
</html>