最新のWeb開発のチュートリアル
 

Pure.CSSチュートリアル


ピュアは、カスケーディングスタイルシートである(CSS)によって開発されYAHOO 。 それはより速く、美しく、かつ応答性のウェブサイトを作成するのに役立ちます。 これは非常にスペース精通していると、4キロバイトに匹敵するサイズが非常に小さなです。


聴衆

このチュートリアルでは、ピュア、どのように、より速く美しく、かつ応答性のWebサイトを作成するためにそれを使用する方法の基本を学びたい専門家のためのものです。 このチュートリアルでは、純粋のすべての基本的な概念を説明します。


前提条件

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


ピュアオンラインを実行します

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

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

<html>
   <head>
      <title>The PURE.CSS Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
	  <style>
		.grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
		 }
	  </style>
	  
  </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>