Purecss-environment
提供:Dev Guides
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>
それは次の結果を生成します-