軽量級CSSフレームワークのPure.css（前編）：Useful Design Tools Vol.06

まずは基本のグリッドシステム

Webページなのでレイアウトしなきゃイケないですよね。これを理解しないとどのCSSフレームワークも使えません。Pure.cssでも一般的なグリッドシステムが使われていますので、まずは簡単にカラムを書いてみましょう。

<div class="pure-g">
  <div class="pure-u-1-3 blue"><p>コンテンツ</p></div>
  <div class="pure-u-1-3 green"><p>コンテンツ</p></div>
  <div class="pure-u-1-3 red"><p>コンテンツ</p></div>
</div>

blueとかgreenとかいうクラス名は、カラム構成を分かりやすくするために色を付けるためのものです。ここで重要なのは親divに付いている「pure-g」というクラスと、子divに付いている「pure-u-1-3」というクラス。「pure-g」の方はここからグリッド始まりますよ、という目印のようなものです。で、次に来る「pure-u-1-3」というが分割された1つ分のグリッドユニットとなります。「1-3」という部分は、「横幅全体を3分割したものの内の1つ分の幅」と解釈しましょう。ですので「pure-u-2-3」とすれば、横幅全体に対して2/3の幅のユニットとなります。Pure.cssでは5分割と24分割のグリッドを使う事ができます。
【参考記事】グリッドシステムについて

レスポンシブレイアウトのためのオプション設定

さて、では次にレスポンシブレイアウトをしてみましょう。その前にまずはちょっとした下準備を。下記のコードをヘッダエリアのリンク行に追加しましょう。これはレスポンシブレイアウトを行うための拡張グリッドのためのCSSです。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">

これで準備オッケー。では次にこのようにコードを書いてみます。

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-3 blue"><p>コンテンツ</p></div>
  <div class="pure-u-1 pure-u-md-1-3 green"><p>コンテンツ</p></div>
  <div class="pure-u-1 pure-u-md-1-3 red"><p>コンテンツ</p></div>
</div><!-- End pure-g -->

「md」と付いているクラスがレスポンシブレイアウト用の指定です。この場合ブラウザウィンドウの横幅が768px以上の時はmdで指定された3カラムレイアウトとなり、それ以外の場合（この場合は767px以下）ではシングルカラムレイアウトとなります。横幅の指定は4種類あるので、デバイスごとにより細かく指定する事も可能です。
【参考記事】レスポンシブレイアウトについて

次は用意された様々なパーツを使ってみましょう

というわけで今回はここまで。続きはまた次回に紹介したいと思います。今回は導入のための準備とグリッドレイアウトの基礎知識編でしたが、次回はPure.cssで用意された様々な装飾済みパーツを使っていきたいと思います。今回眠くなって「ララァ、私を導いてくれ・・・」になってしまった方も多分次回はお楽しめる内容だと思いますYO。

Pure.css

この記事のライター：小山勝正