スタート

ページにPureを追加

無料のjsDelivr CDNを介してページにPureを追加できます。プロジェクトのスタイルシートの前に、次の<link>要素をページの<head>に追加するだけです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">

ビューポートのmeta要素を追加

ビューポートのmeta要素を使用すると、モバイルブラウザのビューポートの幅と縮尺を制御できます。レスポンシブなWebサイトを作成しているので、幅はデバイスのネイティブ幅と同じにする必要があります。ページの<head>にこれを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1">

Pureグリッドを理解する

Pureのグリッドシステムは非常にシンプルです。.pure-gクラスを使用して行を作成し、pure-u-*クラスを使用してその行内に列を作成します。

次が3列のグリッドです

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

3等分

レスポンシブグリッド

Pureのグリッドシステムもモバイルファーストかつレスポンシブで、CSSメディアクエリブレークポイントとグリッドクラス名を指定してグリッドをカスタマイズできます。

ページにPureのgrids-responsive.cssも含める必要があります

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">

grids-responsive.cssに含まれる既定のレスポンシブブレークポイントを次に示します。

キー	CSSメディアクエリ	適用	クラス名
なし	なし	常に	`.pure-u-*`
`sm`	`@media screen and (min-width: 35.5em)`	≥ 568px	`.pure-u-sm-*`
`md`	`@media screen and (min-width: 48em)`	≥ 768px	`.pure-u-md-*`
`lg`	`@media screen and (min-width: 64em)`	≥ 1024px	`.pure-u-lg-*`
`xl`	`@media screen and (min-width: 80em)`	≥ 1280px	`.pure-u-xl-*`
`xxl`	`@media screen and (min-width: 120em)`	≥ 1920px	`.pure-u-xxl-*`
`xxxl`	`@media screen and (min-width: 160em)`	≥ 2560px	`.pure-u-xxxl-*`
`x4k`	`@media screen and (min-width: 240em)`	≥ 3840px	`.pure-u-x4k-*`

次に示すのは、実行可能な例です。画面のサイズを変更して、グリッドの応答を確認してください。

.pure-u-1

.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4

.pure-u-1
.pure-u-md-3-4

.pure-u-1
.pure-u-md-1-4

Pureを使用して次のwebプロジェクトを始めましょう。

ページにPureを追加

ビューポートのmeta要素を追加

Pureグリッドを理解する

レスポンシブグリッド