Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。
さすがに 5分はウソです すいません。でも簡単でしたよ。
Pure とは
Pure は、簡単に言ってしまえば Twitter が公開している Bootstrap などと同じ、CSS のフレームワークですが、CSS のみに絞ることで、その容量は最大で 5.7KB とかなり軽量。Yahoo! の CDN から読み込めば、gzip された状態で読み込めます。
また、各機能を個別に読み込むことも可能ですので、必要な機能だけを選択することもできるようになっています。
例えば、Pure のフル機能を読み込むなら、
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
と 1行書くだけで終わり。
さらにフル機能ではなく、各機能ごとに個別に読み込みたい場合は下記のように細分化して読み込むことも可能です。
| 各機能 | CSS の URL |
|---|---|
| Non-Responsive Rollup | http://yui.yahooapis.com/pure/0.1.0/pure-nr-min.css |
| Base | http://yui.yahooapis.com/pure/0.1.0/base-min.css |
| Buttons | http://yui.yahooapis.com/pure/0.1.0/buttons-min.css |
| Forms (Responsive) | http://yui.yahooapis.com/pure/0.1.0/forms-min.css |
| Forms (Non-Responsive) | http://yui.yahooapis.com/pure/0.1.0/forms-nr-min.css |
| Grids (Responsive) | http://yui.yahooapis.com/pure/0.1.0/grids-min.css |
| Grids (Non-Responsive) | http://yui.yahooapis.com/pure/0.1.0/grids-nr-min.css |
| Menus (Responsive) | http://yui.yahooapis.com/pure/0.1.0/menus-min.css |
| Menus (Non-Responsive) | http://yui.yahooapis.com/pure/0.1.0/menus-nr-min.css |
| Tables | http://yui.yahooapis.com/pure/0.1.0/tables-min.css |
例えば、ボタン関連だけ Pure のスタイルを使いたければ、下記のように読み込めば OK。
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/buttons-min.css">
Pure だけでまずは作ってみる
まずは Pure のみでどんな感じになるかをやってみます。今回のために用意したベースの HTML は下記のような感じ。
例えば、ヘッダ部分などは下記のようなソースコードになっています。
<div id="header">
<div class="inner">
<header>
<div role="banner">
<h1>わたくしのブログ</h1>
<p>このブログはわたくしのブログです。</p>
</div>
<nav role="navigation">
<div>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">このブログについて</a></li>
<li><a href="#">運営者について</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</nav>
</header>
<!--/ .inner--></div>
<!--/ #header--></div>
で、このページに対して、下記のように Pure を読み込みます。
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
それから、必要な class 属性を付けていってみましょう。例えば、上記、ヘッダ部分であれば、メニューの部分に下記のように class 属性を付与します。
<div id="header">
<div class="inner">
<header>
<div role="banner">
<h1>わたくしのブログ</h1>
<p>このブログはわたくしのブログです。</p>
</div>
<nav role="navigation">
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li class="pure-menu-selected"><a href="#">ホーム</a></li>
<li><a href="#">このブログについて</a></li>
<li><a href="#">運営者について</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</nav>
</header>
<!--/ .inner--></div>
<!--/ #header--></div>
また、今回はコンテンツ部分を 2カラムにしたいのですが、下記のようになっている部分に、
<div id="content"> <div id="mainContent">...省略...</div> <div id="subContent">...省略...</div> </div>
Pure の Grids （Responsive） 機能を利用してレイアウトするため、下記のように class 属性を付与します。
<div id="content" class="pure-g-r"> <div id="mainContent" class="pure-u-2-3">...省略...</div> <div id="subContent" class="pure-u-1-3">...省略...</div> </div>
さらに 「続きを読む」 部分に、ボタンのスタイルを適用したり、
<p class="more"><a href="#">続きを読む</a></p>
<p class="more"><a class="pure-button pure-button-primary" href="#">続きを読む</a></p>
ページネーションの部分や
<ul role="navigation"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">»</a></li> </ul>
<ul class="pure-paginator" role="navigation"> <li><a class="pure-button prev" href="#">«</a></li> <li><a class="pure-button pure-button-active" href="#">1</a></li> <li><a class="pure-button" href="#">2</a></li> <li><a class="pure-button" href="#">3</a></li> <li><a class="pure-button next" href="#">»</a></li> </ul>
サブメニューの 「最近の記事一覧」 などにも、class 属性を付与します。
<aside> <div> <h1>最近の記事</h1> <ul> <li><a href="#">今日は東京タワーに行きました</a></li> </ul> </div> </aside>
<aside> <div class="pure-menu pure-menu-open"> <h1 class="pure-menu-heading">最近の記事</h1> <ul> <li><a href="#">今日は東京タワーに行きました</a></li> </ul> </div> </aside>
ここまでやると、下記のようになります。
最後に少しだけ自分で CSS を書く
最後に、Pure だけでは足りない点を少しだけ自分で CSS を書いて調整しています。今回書いたのは下記の通り。部分的に余白を調整したり、ヘッダのメニューに枠線を付けたり、その程度です。
.inner {
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Sans-Serif;
padding: 1em;
}
#header .pure-menu {
border: 1px solid rgb(183, 183, 183);
}
.articleSection {
margin-bottom: 4em;
}
aside {
margin-bottom: 2em;
}
.more {
text-align: center;
}
.pure-paginator {
text-align: center;
}
h1.pure-menu-heading {
margin-bottom: 0;
}
p {
line-height: 1.5;
}
aside .pure-menu a, aside .pure-menu aside .pure-menu-heading {
white-space: normal;
}
.inner に font-family を指定していますが、body に指定するとなぜかカラム落ちするっていう謎の症状がでたので。
2013年 6月 10日追記
このフォントの指定によってカラム落ちする件、GitHub の方でも Issue として挙がっていました （Thanks! @forty4_jp）。
- grids spacing wrong without Arial on pure-g, pure-g-r ： Issue #41 ： yui/pure ： GitHub
- Grid bug in Firefox ： Issue #60 · yui/pure ： GitHub
あと、メニューに関しては、Pure の方で white-space: nowrap; が指定されてしまっていて、今回のサイドメニューのように、長い文字列が入ることが予想される場所で使うと、折り返しが発生せずに画面外に飛び出してしまうので、white-space: normal; で上書きしています。
また、p 要素に対しては、line-height: 1.5; を指定していますがこれは日本語での読みやすさを考慮して。
ここまでやった実際のページは下記になります。
ついでに、個別記事のページも簡単に作ってみました。上記サンプルページから記事タイトルをクリックすれば移動できます。
ま、もっと細かい調整は必要でしょうけども、とりあえず数行の CSS を自分で書くだけで、この程度のページは簡単に作れてしまいます。プロトタイプのベース CSS としてはいいかもしれません。
Grids （グリッド） について補足
レイアウトの部分で使用している、Grids 機能について簡単に補足しておきます。
基本的には、下記のように、class="pure-g" でマルチカラムレイアウトにしたい箇所を囲み、その中に各カラムを記述して class="pure-u-1-3" という風に pure-u-[n1]-[n2] という形式で class 名を付けると、その数値に応じてレイアウトされます。
<!-- 非レスポンシブの場合 --> <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>
この、u-[n1]-[n2] という形式ですが、pure-g の横幅を n1/n2 に割ると考えるとわかりやすいです。例えば、カラムが 3つあって、それぞれに pure-u-1-3 を付ければ、1/3 ずつの横幅でレイアウトされます。
カラムが 3つで、pure-u-2-4, pure-u-1-4, pure-u-1-4 と付ければ、1/2, 1/4, 1/4 でレイアウトされます。デフォルトでは可変レイアウトですが、pure-g の横幅を CSS で固定してあげれば、固定レイアウトになります。
レスポンシブなレイアウトにしたい場合は、pure-g を pure-g-r に変更します。この場合、ディスプレイの横幅 767px 以下で各カラムは縦並びになります。
<!-- レスポンシブの場合 --> <div class="pure-g-r"> <div class="pure-u-1-3">ここに内容</div> <div class="pure-u-1-3">ここに内容</div> <div class="pure-u-1-3">ここに内容</div> </div>
この辺の仕組みはこの手のフレームワークではよくある仕組みですが、そのおかげで楽にマルチカラムレイアウトを実現することが可能になっています。
