CSSフレームワークPureはシンプルでレスポンシブ対応が簡単にできる!

CSSフレームワークというとBootstrapが有名です。今までBootstrapしかCSSフレームワークを知らなかったのですがPureというCSSフレームワークをYahoo!が提供しているということを聞いて試してみました。
Pureは導入が簡単なことと、機能がシンプルなためにわりと色々なことを試すことができました。レスポンシブ対応も簡単にできるのでそれについて書きます。

CSSフレームワークPureを使う準備

CSSフレームワークPure

今回は普通のHTMLでこのCSSフレームワークPureを使ってみようと思います。

使う準備としては、

headタグ内に、この1行を追加するだけです。0.6.0となっているところはバージョンで今現在(2015/07/16)の最新のモノです。使うときによってバージョンは上がっている可能性はあります。

これで準備は完了です。以前書いたBootstrapの準備に較べると1行なのでここからもシンプルなことがわかります。

画像にclassを1つ追加するだけでレスポンシブ対応になる

画像にclassを1つ追加するだけでレスポンシブ対応ができます。

ごく普通にこのようにimgを表示します。

実際にはこのぐらいの大きさの画像です。

ブラウザの幅を縮めると画像が画面をはみ出して横スクロールしてしまいます。このソースに

class=”pure-img” と追加するだけで

ブラウザの幅に合わせて画像が自動的に小さくなり、レスポンシブ対応された画像になります。横スクロールも出ていません。たった1行でレスポンシブ対応の画像に!便利ですね(^^)/

サンプルはこちら

グリッドレイアウトも簡単にレスポンシブデザインになる

グリッドレイアウトとは1行をいくつのグリッド(BOXのような感じ)に分けて表示するかという感じのレイアウトです。

グリッドを使うには、  
 

この記述をheadタグ内に追加してください。

グリッドを指定するときのコードはこんな感じになります。

全体の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/ にあったサンプルコードの項目などを日本語にしてみました。

これをブラウザで表示すると、

いい感じに自動的にデザインされて、使い勝手の良さそうなフォームが表示されました。送信ボタンはフラットデザインでちょっと今風な感じですね(^^)/

サンプルはこちら

まとめ:シンプルですがカスタマイズすると色々できる予感がします

このように内容的にはシンプルでした。少ないが故に一つ一つの機能を確認する気持ちが起こって色々やってみました。たぶんBootostrapにも同じような機能やもっとオプション的にも豊富なものがあると思うのですが、ドキュメントが膨大なため普段あまりデザインする機会がない私などにはちょっと複雑に見えて、なかなかドキュメントを見ようという気持ちが起こりませんでした(^_^;。
そんな私でもPureは基本的に機能が少ないのでとりあえず全部理解して使えるようになる気がします。また、まだ試していないのですが

http://yui.github.io/skinbuilder/?mode=pure



スキンビルダー
というものがあり、ここで自由にカスタマイズしたスキンが作れるようです。これはちょっとなんか楽しそうな気がします!

ということでPureはシンプルでそれでいてレスポンシブデザイン対応が簡単にできそうなので是非使ってみてください(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る