Skill 学ぶ

軽量級CSSフレームワークのPure.css(後編):Useful Design Tools Vol.07


この前社内になぜか転がっていたOculus Riftを見つけ、試しにジェットコースターアプリをやってみたらいろんな意味でぶっ飛びました。Oculusはんぱないっすね。2016年にはソニーからProject Morpheusも出るようですし、この分野とっても気になります。ガンダムゲームとか作ってくれないかなぁ。

さて今回は【Cording Tool】軽量級CSSフレームワークのPure.css(前編):孤独のデザモノ探訪 第7回という記事の続きとなります。前回Pure.cssの導入と基礎的なレイアウトについての説明をしたので、今回はもうちょい装飾や応用寄りの紹介をしてみたいと思います。このフレームワーク、シンプルで使いやすいです。

ボタンの設置

ではまずはボタンの設置から。aタグやbuttonタグを使ってサクっと設置する事ができます。基本的には「pure-button」というクラスを追加するだけで、ボタンらしい見た目にする事ができます。

<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

See the Pen myxQrp by Quattro (@quattrovag) on CodePen.

ボタンのカスタマイズ

設置したボタンは色々とデザインを変更する事ができます。状態、色、大きさなどを変更して例を作ってみました。またPure.cssではデフォルトでアイコンフォントを内蔵していないため、ボタンなどでアイコンを使いたい場合はFont Awesomeの使用が推奨されています。CodePenの作例内ではCSS記述の4行目でインポートしています。

<h3>デフォルトボタン</h3>
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

<h3>Disable状態のボタン</h3>
<a class="pure-button pure-button-disabled" href="#">A Disabled Button</a>
<button class="pure-button pure-button-disabled">A Disabled Button</button>

<h3>着色ボタン</h3>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>

<h3>サイズの変更</h3>
<button class="button-xsmall pure-button">Extra Small Button</button>
<button class="button-small pure-button">Small Button</button>
<button class="pure-button">Regular Button</button>
<button class="button-large pure-button">Large Button</button>
<button class="button-xlarge pure-button">Extra Large Button</button>

<h3>アイコンの追加</h3>
<button class="pure-button"><i class="fa fa-cog"></i>Settings</button>
<a class="pure-button" href="#"><i class="fa fa-shopping-cart fa-lg"></i>Checkout</a>

See the Pen emQxdY by Quattro (@quattrovag) on CodePen.

テーブル装飾

では次にテーブルの装飾について紹介します。テーブルってわりと装飾の面倒なタグですが、Pure.cssを使えばclass名に「pure-table」を付けるだけで簡単に小奇麗な感じに見せる事ができます。ここではそれに加えて、奇数行にはグレー背景、偶数行には白背景を自動で着色するようにしてみました。tableタグのclass名に併記されている「pure-table-striped」というのがそれです。こうした自動処理はCSSの:nth-child擬似クラスを使えばもちろんできるのですが、classに書くだけで簡単に行えるというのは便利ですよね。

<h3>しましまテーブル</h3>
<table class="pure-table pure-table-striped">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>

<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>

<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>

<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>

<tr>
<td>4</td>
<td>Ford</td>
<td>Focus</td>
<td>2008</td>
</tr>

<tr>
<td>5</td>
<td>Nissan</td>
<td>Sentra</td>
<td>2011</td>
</tr>

<tr>
<td>6</td>
<td>BMW</td>
<td>M3</td>
<td>2009</td>
</tr>

<tr>
<td>7</td>
<td>Honda</td>
<td>Civic</td>
<td>2010</td>
</tr>

<tr>
<td>8</td>
<td>Kia</td>
<td>Soul</td>
<td>2010</td>
</tr>
</tbody>
</table>

See the Pen LEXqOL by Quattro (@quattrovag) on CodePen.