株式会社コプロシステム

お問い合わせ

2013年7月 5日

Yahoo!が提供するCSSフレームワーク「Pure」で、プロジェクトをスピードアップ!

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

こんにちは、コプロシステムWebデザイングループの石川です。

Webの世界は日進月歩。新しい技術を使った斬新なサービスが、毎日のように次々と出てきますよね。
ただ、従来のやり方で進めようとすると、それなりの時間が必要となってきてしまう側面も否定できません。

  • 少しでも早く自分たちが考えたアイデアを形にして世の中に発信したい!
  • 社内検討の段階でもWeb画面で触りたい!しかもそこそこ見た目の良いものを。
  • デザイナーの力を借りなくてもエンジニアだけで見た目が良いものを作りたい!

というクリエーターたちの声が増えるにつれ、「CSSフレームワーク」(またはデザインフレームワーク)と呼ばれているものが注目を集めてきました。

フレームワーク (英語: framework)
開発・運用・意思決定を行う際に、その基礎となる規則・構造・アイデア・思想などの集合のこと。日本語では「枠組み」などと訳されることが多い。
Wikipediaより引用

「それなりに見た目のよいHTMLをコーディングしやすいようにあらかじめ用意されたスタイルシート(CSS)の骨組み・枠組み・土台」のことです。
そのCSSフレームワークを使えば、あとはHTML内の各要素にclassやidを付与するだけ。カスタマイズしたい場合でもチョット手を加えればOK!といった便利なオープンソースツールで、前述のクリエーターの悩みを解消してくれます。

現在では数多くのCSSフレームワークが公開されていますが、今回のエントリーでは、その数多くのCSSフレームワークの中でも最近リリースされた「Pure」というフレームワークについて解説します。

CSSフレームワーク「Pure」とは?

「Pure」はYahoo!が提供するCSSフレームワークです。
フラットデザインを意識したスタイルやレスポンシブWebデザインに対応したフレームワークとして、ついこの前(2013年5月頃)リリースされたようです。
名前がキレイなのが気に入ってます◎

Pure

Pureの特長

とにかく軽い!

読み込むCSSは4.2KBとかなり軽量化されているようです。

導入が簡単!

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

上記をHTMLにコピペしたら、もう導入は完了です。導入は...。

部分的に使いたい時に便利!

前述の「pure-min.css」にすべて盛り込まれていますが、例えばインプットフォームとボタンパーツだけPureを使用する ということも可能なので、部分的に使いたい時に便利ですね。

読み込むCSSの一覧
名前 CSSのURL
全部 Responsive対応 http://yui.yahooapis.com/pure/0.2.0/pure-min.css
全部 Responsive非対応 http://yui.yahooapis.com/pure/0.2.0/pure-nr-min.css
ベース http://yui.yahooapis.com/pure/0.2.0/base-min.css
ボタンパーツ http://yui.yahooapis.com/pure/0.2.0/buttons-min.css
フォームパーツ Responsive対応 http://yui.yahooapis.com/pure/0.2.0/forms-min.css
フォームパーツ Responsive非対応 http://yui.yahooapis.com/pure/0.2.0/forms-nr-min.css
グリッドレイアウト Responsive対応 http://yui.yahooapis.com/pure/0.2.0/grids-min.css
グリッドレイアウト Responsive非対応 http://yui.yahooapis.com/pure/0.2.0/grids-nr-min.css
メニューパーツ Responsive対応 http://yui.yahooapis.com/pure/0.2.0/menus-min.css
メニューパーツ Responsive非対応 http://yui.yahooapis.com/pure/0.2.0/menus-nr-min.css
テーブルパーツ http://yui.yahooapis.com/pure/0.2.0/tables-min.css

具体例

それでは、Pureを使用すると具体的にどのようにHTML上に反映されるか見てみます。
※IE8以下など一部ブラウザでは正常に表示されない場合があります。

フォームパーツ

なにも装飾をしないと、↓こうなっていたものが



Pureを反映させることで、↓こうなります。


インプットフォームをクリックしてフォーカスさせると、ブゥンとアニメーションのついた枠線が現れます。 ボタンもフラットでイマドキな感じ。

さらに、↓必須な項目は input の中に「required」を追加するだけで必須っぽい赤色の枠になったり


↓入力させたくない項目は input の中に「disabled」を追加するだけで入力不可状態になったり

かなり充実しています。
また、公式サイトを見ると、横並びレイアウト/たて並びレイアウト/中央揃えレイアウト/マルチカラムレイアウトなどの解説もありますので、必要な方は一度見てみてください。
Forms - Pure

ボタンパーツ

なにも装飾をしないと、↓こうなっていたものが


Pureを反映させることで、↓こうなります。そしてこの基本形をベースとして、

など、種類が豊富です。また、少し手を加えると、

のようにカスタマイズすることができます。

公式サイトを見ると、アイコン付きのボタンなども紹介されていますので、必要な方は一度見てみてください。
Buttons - Pure

テーブルパーツ

なにも装飾をしないと、↓こうなっていたものが

Pureを反映させることで、↓こうなります。

公式サイトを見ると、横線のみ/たて線のみなどの解説もありますので、必要な方は一度見てみてください。
Tables - Pure

メニューパーツ

Pureを反映させるだけで、↓ドロップダウンメニューにも対応できます。
(※こちらは画像です。紛らわしくてごめんなさい。)

ページネーションにも対応しています。
(※こちらも画像です。)

Menus - Pure

レイアウト例は公式サイトに!

レイアウトの事例は公式サイトにいくつかありますので、参考にしてみてください。

Photo Gallery

Blog

まとめ

今回紹介した「Pure」ですが、もちろんここに書いたことはほんの一部で、他にも機能は満載です。
他のフレームワークと比較してコンポーネントが少なめでシンプル との記事も見かけましたが、十分充実していた印象です。

また、本記事冒頭で「導入が簡単!」と書きました。それは事実で、たしかに導入は簡単です。CSSの絶対パスをリンクするだけなので。
ただやはりちゃんと使いこなすには公式サイトを読み込んで、覚えないといけないことがたくさんありそうです...が!慣れて使いこなせれば、間違いなくプロジェクトのスピードアップに貢献してくれそうですね!

是非皆さんも、新しいWebサービスを作り上げていく過程で、「Pure」のようなCSSフレームワークを利用してプロジェクトのスピードアップに役立ててみてください!
その時の参考情報として役立てばうれしいです。

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

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP