CSS Advent Calendar 2014 四日目です。二日連続ではありますが、YuZakuroが担当します。
さて昨日はFoundationを紹介しましたが、これはbootstrapと同じく重量級のフレームワークでした。今日は、少し志向を変えて軽量級のフレームワークであるPureを紹介したいと思います。
特徴
-
なんといっても軽量! zipファイルをダウンロードすると76KBでした(bootstrapは226KB, Foundationは160KB)
-
機能は十分。軽量と言っても、グリッドシステム、フォーム、ボタンなど、基本的なものは全部揃っています
-
カスタマイズが容易。Skin Builderが公式から提供されています。
導入
公式サイトからzipファイルでダウンロードするか、YahooのCDNを使用して以下のように記述します。
<link rel="stylesheet" href="/path/to/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
また、Pureは機能毎に分割されたファイルも存在するため、必要な物だけ読み込むこともできます。
機能
ファイル別に機能を軽く紹介します。実際にどのように表示されるかを画像で載せたりはしないので、現物を見たい人は公式のドキュメントを読んでください。
Base
基本的な機能が提供されます。
Normalize.cssに少し追加したような内容になっています。Normalize.cssの内容についてはここでは触れません。
Hiding Elements
以下のようにhidden属性を指定すると、その要素は表示されなくなります。
<p hidden>このテキストは表示されません。</p>
Responsive Images
imgタグに.pure-imgクラスを指定すると、縦横比を維持したまま横幅に合わせて自動でリサイズするようになります。
<img class="pure-img" src="/path/to/image">
Grids
Grids
一般的なグリッドシステムです。
.pure-g、.pure-u及び/pure-*-*という３つのクラスが用意されており、.pure-gの直下の要素は.pure-uまたは.pure-u-*-*を指定しなければなりません。
.pure-uには.pure-u と .pure-u-*-* の２つの形式があります。
.pure-u は単純で、特にサイズを指定しないときに使用します。
.pure-u-*-* の2つのアスタリスクには数字が入り、このクラスを指定した要素はwidthが以下のように計算されます。
(１つ目の数字) / (２つ目の数字)* 100 %
デフォルトでは5分割及び24分割しか提供されていませんが、ジェネレータを使用することで任意の分割数にすることができます。
<div class="pure-g">
<div class="pure-u-1-2"> 25% </div>
<div class="pure-u-1-4"> 12.5% </div>
<div class="pure-u-2-8"> 12.5% </div>
</div>
また、.pure-u-1というクラスも使用することが出来ます。これは、.pure-u-1-1と等価です。
| クラス | width |
|---|---|
| .pure-u | 指定なし |
| .pure-1 | .pure-1-1 と同じ |
| .pure-*-* | (１つ目の数字) / (２つ目の数字) * 100 % |
Responsive Grids
レスポンシブデザインのために拡張されたグリッドシステムです。
通常のグリッドシステムに加えてレスポンシブ用のクラスを指定することができ、以下の例では横幅の大きい時には一列で、中くらいの時には二列で、それ以下では縦に並んで表示されます。
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> ... </div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> ... </div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> ... </div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> ... </div>
</div>
レスポンシブ用のクラスを指定しても、通常のグリッドシステムのクラスも必ず指定する必要がある点に注意してください。後述の表を見ればわかりますが、これはレスポンシブのために用意されたクラスを全て使用しても、一定以下の画面サイズはカバーできないためです。
| クラス | 適用される画面幅 |
|---|---|
| .pure-u | いつでも |
| .pure-u-sm | >= 568 |
| .pure-u-md | >= 768 |
| .pure-u-lg | >= 1024 |
| .pure-u-xl | >= 1280 |
Form
Form
以下のように、formタグに.pure-formを指定します。
<form class="pure-form">
...
</form>
それに加えて、追加のクラスを加える事でフォームの並び方などを指定できます。
| 追加のクラス | 並び方 |
|---|---|
| なし | 横一列 |
| pure-form-stacked | 縦一列 |
| pure-form-aligned | 縦一列(ただし、ラベルはinputの上ではなく左側) |
Multi-Column Form
複数行のフォームは、グリッドを使用することによって実現できます。
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div class="pure-g">
<div class="pure-u-1">
<label for="comment">コメント</label>
<input id="comment" type="text">
</div>
<div class="pure-u-1-2">
<label for="hn">HN</label>
<input id="hn" type="text">
</div>
<div class="pure-u-1-2">
<label for="email">メールアドレス</label>
<input id="email" type="email" required>
</div>
</div>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
Grouped Inputs
fieldsetタグに.pure-groupを指定することで、フォームを幾つかのグループに分割することができます。
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" placeholder="氏名">
<input type="text" placeholder="クラス">
<input type="text" placeholder="学籍番号">
</fieldset>
<fieldset class="pure-group">
<input type="text" placeholder="メールアドレス">
<input type="text" placeholder="パスワード">
</fieldset>
<button type="submit" class="pure-button pure-button-primary">登録</button>
</form>
Input Sizing
pure-input-*-*と指定すると、グリッドと同じ要領でinputタグのサイズを変えられます。
<form class="pure-form">
<input class="pure-input-1" type="text" placeholder=".pure-input-1">
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2">
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2">
</form>
上の例の場合は、
| .pure-input-1 |
| .pure-input-1-2 |. pure-input-1-2 |
このような表示になります。
Required Inputs
inputタグにrequire属性を指定すると、入力が空の時に縁を赤色にすることで警告します。
<form class="pure-form">
<input type="text" placeholder="必須項目" required>
</form>
Disabled Inputs
inputタグにdisabled属性を指定すると、無効化され入力できなくなります。また、マウスオーバーした時にポインタの形が変化します。
<form class="pure-form">
<input type="text" placeholder="無効" disabled>
</form>
Read-Only Inputs
inputタグにreadonly属性を指定すると、読み取り専用になります。disabledとは違い、ポインタは変化せず、通常通りフォーカスを得ると縁が青くなります。
<form class="pure-form">
<input type="text" value="読み取り専用" readonly>
</form>
Rounded Inputs
.pure-input-roundedを指定すると、inputが角丸になります。
<form class="pure-form">
<input type="text" placeholder="各丸" readonly>
<input type="text" placeholder="普通">
</form>
Checkboxes and Radios
チェックボックスやラジオボタンのlabelにそれぞれ.pure-checkbox、.pure-radioを指定すると、余白などをそれっぽく作ってくれます。
<form class="pure-form">
<label for="checkbox" class="pure-checkbox">
<input id="checkbox" type="checkbox" value="">
チェックボックス
</label>
<label for="radio" class="pure-radio">
<input id="radio" type="radio" name="radio" value="radio" checked>
ラジオボタン
</label>
</form>
Buttons
Buttons
<a>タグまたは<button>タグに.pure-buttonを指定することで、ボタンを作成できます。
<a class="pure-button" href="#">ボタン</a>
<button class="pure-button">これもボタン</button>
Disabled Buttons
.pure-button-disabledを追加することで押せないボタンを作ることができます。
<button class="pure-button pure-button-disabled">押せないボタン</button>
Active Buttons
.pure-button-activeを追加することで、すでに押されているボタンを作成できます。
<button class="pure-button pure-button-active">押されているボタン</button>
Primary Buttons
.pure-button-primaryを追加することで、青色の目立つボタンになります。サブミットボタンなどに使用することも多いでしょう。
<button class="pure-button pure-button-primary">目立つボタン</button>
Tables
Table
.pure-tableを指定することでテーブルを作成できます。この方法で作成したテーブルには鉛直の枠線が入っています。
<table class="pure-table">
...
</table>
Bordered Table
.pure-table-borderedを追加することで、縦横の枠線の入ったテーブルを作成できます。
<table class="pure-table pure-table-bordered">
...
</table>
Table with Horizontal Borders
.pure-table-horizontalを追加することで、水平の枠線のみが入ったテーブルが作成できます。
<table class="pure-table pure-table-horizontal">
...
</table>
Striped Table
奇数行に.pure-table-oddを指定することで、奇数行のみ背景がやや暗くなったテーブルを作成できます。CSS3に対応したブラウザのみをターゲットとする場合には、.pure-table-stripedを追加することでも同じことが可能です。
<table class="pure-table">
<tr class="pure-table-odd">
...
</tr>
<tr>
...
</tr>
<tr class="pure-table-odd">
...
</tr>
</table>
<table class="pure-table pure-table-striped">
<tr>
...
</tr>
<tr>
...
</tr>
<tr>
...
</tr>
</table>
まとめ
やや長くなってしまいましたがいかがでしょうか。Pureのほぼすべての機能を紹介しました。紹介しきれなかった機能はMenuで、様々なメニューを作成することができます。
Pureは現時点で私が一番気に入っているフレームワークです。この記事の内容はリファレンス代わりにも使えると思うので、是非一度試してみてください。
明日は再び@izumin5210先輩です。来週以降のカレンダーがスカスカなので、我こそはという方は是非！