Pureの使い方（CSSフレームワーク）

Pure とは

Pure とは、CSSフレームワークの一つです。「CSSフレームワーク」とは、汎用的に使えるCSS設定をまとめてあるWeb開発用の部品の事です。例えば、MSワードで既定のスタイルが利用できるようにしてあるのと似たイメージです。

CSSフレームワークの基本的機能

CSSフレームワークは Pure 以外にも色々あります。例えば Bootstrap (ブートストラップ) が有名です。これらのCSSフレームワークで共通する機能として、以下の点が挙げられます。

1. グリッドデザイン（※1）を実現するための枠組みが設定がされている
2. レスポンシブWebデザイン（※2）に対応している
3. 「ボタン」や「フォーム」「テーブル」など、一般的な要素について基本的なスタイル設定がされている

※1 画面を均等に分割して、分割された枠をいくつか組み合わせた領域の中に要素を配置していく方法
※2 CSS（スタイルシート）のメディアクエリーを使い、一つのHTMLページをPCとスマートフォンなど、サイズの違う端末でも快適に閲覧できるようにする方法

Pure の特長

上記のようなCSSフレームワークの基本的な機能に加え、Pure の特長は以下の3つが挙げられます。

1. ファイルが軽量
2. デザイン上の細かい設定は各Webサイト開発者が行う事を前提としており、最低限の設定しかしていない
3. Pure 由来のクラスは一目でそれと分かる明確な区別がされており、他のツールや独自設定との組み合わせの管理がしやすい

Pure は以下のサイトからダウンロードできます（英語）。
http://purecss.io/

CSSフレームワーク Pure によるスタイルの指定

「すぐ使えるCMS」は Ver. 5.0 から、「すぐ使えるメールフォーム」は Ver. 1.6 から初期設定のテンプレートを Pure を使って設定しています。このページでは、これらの初期設定をカスタマイズしていく方々向けに、Pure の使い方の概要をご説明します。

要素のデザインを変更する方法

表示されている要素のサイズを変更したり色を変更したりする方法を説明します。

Pure により設定されている CSSクラスには全て「pure-」という接頭辞が付いています。例えば、Pure ではボタンのデザインが以下のように指定されています。

.pure-button {
    background-color: #e6e6e6;
    border: 0 none rgba(0, 0, 0, 0);
    border-radius: 2px;
    color: rgba(0, 0, 0, 0.8);
    font-family: inherit;
    font-size: 100%;
    padding: 0.5em 1em;
    text-decoration: none;
}
/* この他にも細かい設定がされています */

このデザインをHTMLページ上の要素に適用するために、class属性が以下のように指定されているとします。

<button class="pure-button" type="submit">送信</button>

クラス設定を上書きする方法

デザインを変更する一つの方法は、クラス .pure-button の設定を上書きしてしまう事です。例えば、Pure の CSS より後に読み込まれる CSSファイルを準備し（※3）、その中に以下のように書きます。初期設定のデザインの一部だけを変更するのであれば、この方法が簡単です。

.pure-button {
    background-color: black;
    color: yellow;
    border-radius: 10px;
}

※3 「すぐ使えるCMS」Ver. 5.0 以上では sugu-site.css、「すぐ使えるメールフォーム」 Ver. 1.6 以上では sugu.css の名前でファイルが同梱されています。

別のクラスを設定する方法

デザインを変更するもう一つの方法は、全く別のクラス設定をする事です。pure-* のクラス設定はHTMLタグから削除し、別のクラスを指定します。この場合は CSS ファイルを用意して新しいクラスを設定する他、HTMLタグに付いている class属性も書き換えます。

.site-button {
    font-size: 40px;
    color: red;
    background-color: #fafafa;
}

<button class="site-button" type="submit">送信</button>

CSSフレームワーク Pure によるレスポンシブなグリッドデザインの設定方法

CSSフレームワークを使う大きなメリットとして、レスポンシブWebデザイン（※2）が比較的容易に実現できる事が挙げられます。Pure ではグリッドデザイン（※1）に基づいて要素の幅を設定するためのクラスが予め多数設定されており、WebデザイナはこのクラスをHTMLタグに設定していくだけで、レスポンシブWebデザインのWebサイトを作成する事ができます。

グリッドデザインのためのCSSクラスのルール

レスポンシブなグリッドWebデザインを実現するために、Pureには3つのルールがあります。

1. pure-g クラスで囲う

まず、レスポンシブにする、つまり、端末のサイズによって表示の幅を変えたい要素の外側を <div class="pure-g"> - </div> で囲って下さい。

2. pure-u を付ける

次に、レスポンシブに表示したい要素、つまり、「PCで表示された時は『左カラム』として表示したいけれどスマートフォンでは縦に並べる」などの要素に class="pure-u" を付けて下さい。

※4 Pure のドキュメントにはこれが必要だと書いてありませんが、無いと中の文字表示が潰れます。

3. pure-u-**-(割合設定) で幅を指定する

最後に、2と同じ要素に、表示幅を指定するクラスを追加していきます。クラスの定義は例えば、「pure-u-1」「pure-u-md-2-3」などです。これらはそれぞれ「一番小さな端末では幅100%で表示する」「中くらいの端末以上では 3分の2の幅で表示する」を意味しています。

以下で詳細を説明します。

Pureの幅指定のルール

「pure-u-md-2-3」を例に挙げて、ハイフンで結ばれた文字のそれぞれが何を表すかを説明します。

接頭辞 pure-u-

まず「pure-u-」の部分は上記の通り、「この要素は端末サイズによりレスポンシブに幅を変えて表示する」という指定です。

端末サイズ

次の「sm」は後述の幅を適用する端末サイズを指定しています。

Pure は「モバイルファースト」手法を採用しており、「sm」などで指定する大きさは、「○○以上の幅の場合」という意味になります。具体的な幅は以下の通りです。

幅を割合で指定

最後の1つまたは2つの数字は、その要素を表示する幅の割合を示しています。

「-1」のみであれば全体の幅に対して100%、「-1-2」であれば2分の1（50%）、「-3-4」であれば4分の3（75%）といった具合です。分母（一番最後の数字）は最大24まで分割できます。

Pureのレスポンシブ要素指定の例

以上のルールを組み合わせて、一つのタグに以下のように設定できます。

<div class="pure-g">
    <div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">...</div>
</div>

• pure-u-1: 基本的には 100%幅
• pure-u-sm-1: 画面が小さいうちは 100%幅
• pure-u-md-2-3: 画面が中くらいだったら（タブレット位）3分の2幅
• pure-u-lg-3-4: 画面が大きかったら（PC）4分の3の幅
• pure-u-xl-3-5: 画面が特別大きかったら5分の3の幅

Pure クラスの入れ子構造

pure-g > pure-u の構造は入れ子にすることが可能です。例えば、以下のように指定できます。

<div class="pure-g">
    <div class="pure-u pure-u-1 pure-md-1-2 pure-g">
    <!-- 上の pure-u-* は親要素に対する割合を表す。
        さらに、pure-g を指定する事により、子要素の親(100%)となる。 -->
        中くらい以上で 50%
        <div class="pure-u pure-u-1-2">
            常に親要素の50%。
            つまり、中くらいまでは 50%（100%の50%）、
            それ以上は 25%（50%の50%）
        </div>
        <div class="pure-u pure-u-1-2">
            （同上）
        </div>
    </div>
    <div class="pure-u pure-u-1 pure-md-1-2">
        中くらい以上で 50%
    </div>
</div>

Pure を使ったレスポンシブWebデザインの注意点

Pure は、指定したクラス pure-u-* に従ってレスポンシブに要素の幅を変更してくれます。この時、内部的な指定には width を使っていますが、要素に border が指定されているかどうかを考慮しません。このことは、スペースを取るために pure-u-* を指定した要素に独自にマージンを指定したり、border を指定すると期待した幅からあふれ、レイアウトが崩れてしまう事を意味します。

対策としては以下の2つが考えられますが、「すぐ使えるCMS」および「すぐ使えるメールフォーム」では後者を採用して初期設定をしています。

1. pure-u-* を指定する要素には空間を空けるための指定をせず、直下に <div> を配置しこれに空間を空ける指定をする。
2. pure-u-* を指定する要素に box-sizing: border-box （※5）を指定した上で、他要素との空間は padding で指定する。

※5 「box-sizing: border-box」は、border と padding を加算して幅（width）を計算させるためのCSSの設定です。

Pure を使って端末サイズによって 表示の ON/OFF をする方法

ホームページに表示する要素には、特定のサイズの時は隠したり、逆に、特定のサイズの時だけ表示したい場合があります。このような要素（HTMLタグ）は「.pc-only」や「.mobile-hidden」など分かりやすいクラス名を作りそのクラスを指定するとWeb制作がやりやすくなります。

このようなクラスは、Pure 内部と同様のメディアクエリーを使って独自に設定が可能です。例えば下記例のように定義します。

// 小さなデバイスでの基本設定
.pc-only {
    display: none;
}
@media screen and (min-width: 48em) {
    // タブレット横程度以上で表示する
    .pc-only {
        display: block;
    }
}

ここで「min-width: 48em」というのは、Pure が「pure-u-sm-*」などのクラス設定で使っているメディアクエリー指定と同じです。Pure と同じ境界でクラスを定義しておけば、Pure のレスポンシブWeb用クラス設定と組み合わせて、レイアウトの切り替えと同時に表示の ON/OFF が可能です。

メディアクエリーで指定する幅の設定は以下の通りです。