Pureグリッド入門
Pureグリッドは扱いやすく、非常に強力です。いくつかの簡単な概念を覚えておいてください。
- グリッドクラスとユニットクラス
- Pureグリッドは、グリッドクラス(
pure-g)とユニットクラス(pure-uまたはpure-u-*)の2種類のクラスで構成されています。 - ユニットの幅は分数です
- ユニットには、幅を表すさまざまなクラス名があります。たとえば、
pure-u-1-2は幅が50%であるのに対し、pure-u-1-5は幅が20%になります。 - グリッドの子要素はすべてユニットである必要があります
pure-gクラス名を持つ要素に含まれる子要素は、必ずpure-uまたは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>グリッドユニットのサイズ
Pureには、5分割と24分割ベースのグリッドが同梱されています。以下に示すのは、pure-u-*クラス名に追加できる利用可能なユニットです。*は、以下にリストされているユニット分数の1つです。たとえば、50%幅のユニットクラス名はpure-u-1-2です。
5分割ベースのユニット
24分割ベースのユニット
カスタムユニットサイズ
Pureグリッドをカスタマイズするためのツールを構築中です。最初のローレベルツールであるPure Grids Rework Pluginは、今日から利用できます。このツールを使用して、Pureに組み込まれているユニットサイズを生成しています。
Pureレスポンシブグリッド
Pureには、CSSクラス名を介して宣言的に使用できる、モバイルファーストのレスポンシブグリッドシステムがあります。これは、デフォルトのグリッドをベースにした、堅牢で柔軟なグリッドです。
ページへの組み込み
メディアクエリは上書きできないため、グリッドシステムはpure.cssの一部として含まれていません。別のCSSファイルとしてプルインする必要があります。これを行うには、次の<link>タグをページに追加します。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css" />Pureの通常グリッドとレスポンシブグリッド
Pureの通常グリッドとレスポンシブグリッドの違いを理解する最良の方法は、例を通して理解することです。以下のスニペットは、通常のPureグリッドがどのように記述されるかを示しています。これらのグリッドはレスポンシブではありません。画面の幅に関係なく、常にwidth: 33.33%になります。
<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>次に、レスポンシブグリッドを見てみましょう。このグリッド内の要素は、小さな画面ではwidth: 100%になりますが、中サイズの画面以上ではwidth: 33.33%に縮小します。
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>デフォルトのメディアクエリ
レスポンシブグリッドを使用する場合、クラス名を追加することで、特定のブレークポイントでグリッドがどのように動作するかを制御できます。Pureのデフォルトのレスポンシブグリッドには、次のクラス名とメディアクエリのブレークポイントが付属しています。
| キー | 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-* |
幅に相対単位を使用する
デフォルトのCSSメディアクエリの幅にpxではなくemを使用していることに気づいたかもしれません。これは、ユーザーがWebページをズームしたときにメディアクエリが適切に応答できるようにするための意図的な決定です。メディアクエリ内で相対単位を使用するための背景情報については、Brad Frostによるこの記事を参照してください。
em以外の単位を使用する場合は、はじめにページでデフォルトのメディアクエリをいつでも変更できます。emからpxへの変換は非常に簡単です。
1em == 16px ** emからpxへの変換は、ブラウザのデフォルトのフォントサイズ（通常は16px）に基づいていますが、ユーザーがブラウザの設定で上書きすることができます。
Pureレスポンシブグリッドの例
次の例では、Pureのレスポンシブグリッドを利用して、4つの列を持つ行を作成します。列は、小さな画面では積み重ねられ、中サイズの画面ではwidth: 50%、大きな画面ではwidth: 25%になります。
これは、小さな画面には.pure-u-1クラス、中サイズの画面には.pure-u-md-1-2、大きな画面には.pure-u-lg-1-4を追加することで実現されます。ページをリサイズして、グリッドが画面サイズに対応することを確認してください。
