CSSフレームワークというとBootstrapが有名です。今までBootstrapしかCSSフレームワークを知らなかったのですがPureというCSSフレームワークをYahoo!が提供しているということを聞いて試してみました。
Pureは導入が簡単なことと、機能がシンプルなためにわりと色々なことを試すことができました。レスポンシブ対応も簡単にできるのでそれについて書きます。
CSSフレームワークPureを使う準備
今回は普通のHTMLでこのCSSフレームワークPureを使ってみようと思います。
使う準備としては、
<head> … <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> … </head>
headタグ内に、この1行を追加するだけです。0.6.0となっているところはバージョンで今現在(2015/07/16)の最新のモノです。使うときによってバージョンは上がっている可能性はあります。
これで準備は完了です。以前書いたBootstrapの準備に較べると1行なのでここからもシンプルなことがわかります。
画像にclassを1つ追加するだけでレスポンシブ対応になる
画像にclassを1つ追加するだけでレスポンシブ対応ができます。
<img src="shashin.jpg">
ごく普通にこのようにimgを表示します。
実際にはこのぐらいの大きさの画像です。
ブラウザの幅を縮めると画像が画面をはみ出して横スクロールしてしまいます。このソースに
<img src="shashin.jpg" class="pure-img">
class=”pure-img” と追加するだけで
ブラウザの幅に合わせて画像が自動的に小さくなり、レスポンシブ対応された画像になります。横スクロールも出ていません。たった1行でレスポンシブ対応の画像に！便利ですね(^^)/
サンプルはこちら
グリッドレイアウトも簡単にレスポンシブデザインになる
グリッドレイアウトとは1行をいくつのグリッド(BOXのような感じ)に分けて表示するかという感じのレイアウトです。
グリッドを使うには、
<!--[if lte IE 8]> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css"> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"> <!--<![endif]-->
この記述をheadタグ内に追加してください。
グリッドを指定するときのコードはこんな感じになります。
<div class="pure-g"> <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-2-5"><img src="shashin.jpg" class="pure-img"></div> <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5">紅葉の写真です。</div> <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5">でも実は夏に撮りました。</div> <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5">場所は山中湖です</div> </div>
全体のdivには pure-g というclassを指定して、その中の要素については「1行を何分割してそのうちのいくつを使うのか」を指定します。それを「ブラウザの幅に合わせて指定」できるのでレスポンシブ対応が簡単にできることになります。
この例ですと1行目のimgは
pure-u-1 pure-u-md-1-2 pure-u-lg-2-5
とあります。これは
pure-u-lg-2-5 lg=1024px以上のとき 2-5=1行を5分割してそのうち2つを使う
pure-u-md-1-2 md=768px以上のとき 1-2=1行を2分割してそのうち1つを使う
pure-u-1 どれにも当てはまらないときは1行を1分割して1つ使う(つまり1行に1つだけ表示される)
ということを表しています。大きさの判定は大きい順に見られるようなのでどのような順番に書いてあっても書いてある一番大きい大きさに当てはまればそれに従って表示されるようです。
これを表示してみると1024px以上のときは
768px以上のときは
それより小さいときは
こんな感じに小さくなります。
大きさについてはもっと細かく指定する事もできます。詳しくは、http://purecss.io/grids/ このページ中程にある、
この表を参照してください。
サンプルはこちら
フォームを作ってみる
Bootstrapを使いたいな、と思ったのはフォームの枠やボタンがいい感じに自動的にデザインされることが理由の一つでした。Pureではどんな感じになるのかをみてみたいと思います。
http://purecss.io/forms/ にあったサンプルコードの項目などを日本語にしてみました。
<form class="pure-form pure-form-aligned"> <fieldset> <div class="pure-control-group"> <label for="name">お名前</label> <input id="name" type="text" placeholder="お名前"> </div> <div class="pure-control-group"> <label for="password">パスワード</label> <input id="password" type="password" placeholder="パスワード"> </div> <div class="pure-control-group"> <label for="email">Email</label> <input id="email" type="email" placeholder="Email"> </div> <div class="pure-control-group"> <label for="foo">その他</label> <input id="foo" type="text" placeholder="その他"> </div> <div class="pure-controls"> <label for="cb" class="pure-checkbox"> <input id="cb" type="checkbox"> 規約を読んでいただけたらチェックしてください </label> <button type="submit" class="pure-button pure-button-primary">送信</button> </div> </fieldset> </form>
これをブラウザで表示すると、
いい感じに自動的にデザインされて、使い勝手の良さそうなフォームが表示されました。送信ボタンはフラットデザインでちょっと今風な感じですね(^^)/
サンプルはこちら
まとめ:シンプルですがカスタマイズすると色々できる予感がします
このように内容的にはシンプルでした。少ないが故に一つ一つの機能を確認する気持ちが起こって色々やってみました。たぶんBootostrapにも同じような機能やもっとオプション的にも豊富なものがあると思うのですが、ドキュメントが膨大なため普段あまりデザインする機会がない私などにはちょっと複雑に見えて、なかなかドキュメントを見ようという気持ちが起こりませんでした(^_^;。
そんな私でもPureは基本的に機能が少ないのでとりあえず全部理解して使えるようになる気がします。また、まだ試していないのですが
http://yui.github.io/skinbuilder/?mode=pure
スキンビルダーというものがあり、ここで自由にカスタマイズしたスキンが作れるようです。これはちょっとなんか楽しそうな気がします！
ということでPureはシンプルでそれでいてレスポンシブデザイン対応が簡単にできそうなので是非使ってみてください(^^)/
コメント