Pure.CSS-環境のセットアップ

Pureを使用するには2つの方法があります-

ローカルインストール-ローカルマシンにpure.cssファイルをダウンロードして、HTMLコードに含めることができます。
* CDNベースのバージョン*-コンテンツ配信ネットワーク（CDN）からpure.cssファイルをHTMLコードに直接含めることができます。

ローカルインストール

[[1]]
ダウンロードしたpure-min.cssファイルをWebサイトのディレクトリに配置します。/css。

例

次のように、HTMLファイルに css ファイルを含めることができます-

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="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>

それは次の結果を生成します-

CDNベースのバージョン

pure.cssファイルを、コンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。 yui.yahooapis.com は、最新バージョンのコンテンツを提供します。

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

例

次に、PureCSS.io CDNのpure.cssを使用して上記の例を書き直します。

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://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>

それは次の結果を生成します-

Purecss-environment

Pure.CSS-環境のセットアップ

ローカルインストール

例

CDNベースのバージョン

例

目次