Skill 学ぶ

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


ドロップダウンメニューも簡単に作れます

Pure.cssを使えば、通常だとJS組んだりして色々と手間のかかるドロップダウンメニューも簡単に作る事ができます。仕組みは親liの中に子ulを入れて、リストを入れ子状態にします。ソースコードもシンプルです。今回の作例では水平方向のナビゲーションに垂直方向のドロップダウンを作ってみましたが、その逆もできます。

<h3>ドロップダウンメニュー</h3>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
</ul>
</li>
</ul>
</div>

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

用意されたテンプレートが超即戦力


最後にご紹介するのが、Pure.css純正で用意されたテンプレートです。Pure.cssオフィシャルのLayoutsページを見ると、同フレームワークを使って作られたHTMLテンプレートが並んでいます。これがどれもよく出来てて素晴らしい。特にランディングページ価格表は、この手のページでよく使う要素がシンプルにまとめられていて、ページ制作の素体としてすぐにでも使えそうです。

で、実際のとこどうなの?

以上2回に渡って、Pure.cssの紹介をしてみました。実際に使ってみて感じたのは、既存のCSSフレームワークに比べるととにかくシンプルであるという事。HTMLコーディングにおける面倒な作業は結構フォローしてくれますが、多くのデザイン作業はデザイナーサイドに残ったままだとも言えます。その分あれもこれも用意してくれる多機能系フレームワークに比べると機能的には見劣りしますが、言い換えるとそれはフレームワークの特徴が表に出づらいという事。Bootstrapでサイト作ると「Bootstrap使ってるなー」って感じの見た目になりがちですが、Pure.cssの場合はそこまで主張しません。あと作業者側の学習要素が少なくて済むというのもナイスです。なので基本的にはデザインフェイズは自分に残したまま、少しだけ楽をしたいという場合に向いていると思います。デザインとコーディングの双方ができる人には使い勝手が良いんじゃないかと思います。個人的にはかなりアリだなーと思いました。

次回からはOculus Riftを使って色々遊んでみようと思ってます!

<URL>http://purecss.io


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