CSSだけで美しいレスポンシブデザインを実現『Pure』
[ PR ]
根強いBootstrap人気
以前大ブームを起こしたレスポンシブデザインですが、その火付け役とも言えるのが Bootstrap ですね。
以前に比べては少し勢いが小さくなったように感じますが、未だに根強い人気があります。
Bootstrapの難点
ただ、Bootstrapは、
- 独特の記述ルール
- CSSだけでも100KB以上
- JavaScriptを利用する
- JQueryに依存する
- カスタマイズが難しい
など、イマイチ使い勝手が悪く、気軽に導入できるというものでもありませんでした。
Bootstrapの弱点を解決する『Pure』
そこで登場するのが、Yahoo!の開発した『Pure』です。
Pureの特徴は、
- CSSフレームワーク
- 必要なのはCSSだけ
- 用途に応じて分割（Grids, Buttonsなど）して使うことも可能
- すべて読み込んでも19KB
JavaScriptを必要としないので、ほぼどんな構成でも使うことができます。
しかもレスポンシブCSS（Grids）を分離出来るので、レスポンシブ以外にも使えます。
実際に当サイトでは、Grids, Buttons, Tables を使っています。
Pureの使い方
まず一番簡単に始められるのは以下のホスティングCSSを埋め込む方法です。
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
もちろんこれはCSSなので、JavaScriptのように変な影響はほとんどありません。
レスポンシブ（Grids）
事前に必ずビューポートの設定をしてください
<!-- 個人的に拡大できないサイトは不便なので、拡大可能版のみ書きます -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=100.0, user-scalable=1">
早速試してみましょう。下の四角はレスポンシブです。
どんな感じに見えますか？おそらく下のように見えるはずです。
- スマートフォン: 縦に３つ ←コレ◎
- タブレット: 横に3つ ＋ 緑が１つ ←コレ◎
- デスクトップ: 横に3つ ←コレ◎
見えない場合は少しサイズが大きいか小さいのだと思います。
デスクトップの方は、ブラウザのサイズを変更してみてください。レイアウトの変化が分かると思います。
仕組み
やり方は単純です。（わかりやすいように一部省略しています。）
※ red, yellow, blueはイメージです。
<div class="pure-g-r">
<div class="pure-u-1-3 float-left red"></div>
<div class="pure-u-1-3 float-left yellow"></div>
<div class="pure-u-1-3 float-left blue"></div>
</div>
<div class="green pure-hidden-phone pure-hidden-desktop"></div>
まず基本は、pure-g-r で囲むとレスポンシブに、 pure-gで囲むと非レスポンシブになります。
また、pure-u-(分数) をdivに付けると（例えば1-3 = 1/3とすると）、
- デスクトップ,タブレット: 33.3333%
- スマートフォン: 100%
になります。
ちなみにタブレットで緑の四角が表示されるのは、pure-hidden-phone および pure-hidden-desktopを使って非表示にしているからです。
- pure-hidden-phone （デバイスの幅が 768px 未満）
- pure-hidden-tablet （デバイスの幅が 768px 以上、979px 未満）
- pure-hidden-desktop （デバイスの幅が 979px 以上）
これを使って、スマホによくある のメニューが作れますね。（実際にこのサイトの最上部もそうしています。）
分割の種類
なお、前述の分割クラスのpure-u-(分数)は以下のような種類があります。
5分割
24分割
という種類があります。応用として以下の様な3分割もできます。
テーブル（Tables）
先程も説明しましたが、Grids 以外はレスポンシブとはあまり関係ないですが、サイトが一気に精錬された感じになるので、使ってもらいたいです。
使い方は簡単で、tableタグにクラスをつけるだけです。
<table class="pure-table pure-table-bordered">
<!-- 省略 -->
</table>基本（縦 罫線付き）
pure-table
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
縦・横 罫線付き
pure-table pure-table-bordered
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
横 罫線付き
pure-table pure-table-horizontal
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
縦・横 罫線付き, 偶数・奇数行色分け
pure-table pure-table-striped
※ IE8 以下は適用されない
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
ボタン（Buttons）
最後に、Buttonsを紹介します。
基本
<button class="pure-button">ボタン</button>色付き
<button class="pure-button" style="background:#ff7575;">色付きボタン</button>実は単純で、背景の色をCSSで指定するだけです。
アイコン付き
※ 事前に Font Awesome から、CSSとWebフォントを設置しておく必要があります。
<button class="pure-button" style="background:#ffdd75;">
<i class="fa fa-shopping-cart"></i>
アイコン付きボタン
</button>その他、分割の方法など
他にも、
- フォーム（Forms）
- メニュー（Menus）
などがあります。
Pureは拡張もでき、サンプルのレイアウトも http://purecss.io/ にあります。
分割する方法
分割する際は、必ず base-min.css を含めてください。normalize.cssなども含まれているので、入れないとレイアウトが崩れます。
分割できるのは次のコンポーネントです。
- All (pure-min.css)
- Base (base-min.css)
- Grids（grids-min.css）
- Forms（forms-min.css）
- Buttons（buttons-min.css）
- Tables（tables-min.css）
- Menus （menus-min.css）
これらはホスティングもされていて、
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/base-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/grids-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/buttons-min.css">
という風にリンクできます。
デバッグ版
ちなみに、minified版ではないものもあります。
- All (pure.css)
- Base (base.css)
- Grids（grids.css）
- Forms（forms.css）
- Buttons（buttons.css）
- Tables（tables.css）
- Menus （menus.css）
もちろん容量は大きくなるので、本番はminified版を使うのをおすすめします。
まとめ
昨年くらいから流行りつつあるCSSフレームワークですが、非常に便利で副作用が少ないので、これからも増え続けると思われます。
その一方で、スマートフォンが高解像度化されているので、だんだんとメディアクエリも変化しています。そのうち、レスポンシブではなくて"統一デザイン"になるのかもしれないですね。
個人的には、そのうちパソコンは消えていくような気がします。
（追記）
早速このサイトも統一デザインにしてみました。どうでしょうか？
意外といい感じなので、このままで行こうと思います。
デザインの反映にちょっと時間が掛かるのでデスクトップでまだサイドバーが見えている方は、しばらくしてからアクセスしてみてください。
エムディエヌコーポレーション
売り上げランキング: 8,400
