何かと話題のCSSフレームワークで使ってみたいものをまとめてみた

この記事が良ければ、ぜひシェアお願いします

最近色々なサイトで、『Bootstrap』の記事があがっているのを見ます。さすがTwitter謹製だけあって、これだけでWEBデザインが完結できるレベルにまでなっていたりして、驚愕しますね。海外の最近のスタートアップ企業を見ると、同じようなデザインのサイトが多いのも、なんかうなずける気がします。

私も元々ネットワークエンジニアをやっていたので、WEBデザインなんて素人に毛が生えたくらいでした。その後、WEBディレクションをするにつれて、数百万PVくらいのサイトだと外部設計部分も自分でやったりしていたので、アプリケーションやサーバ/DB周りも多少知識は得ていたのですが、やっぱりデザインスキルは進化しないんですよね。

そりゃ会社のPCにPhotoshopもなければ、デザインまでやろうとしたら時間が足りないというか、倒れてしまいますので(笑)信頼のおけるデザイナーさんにデザイン&コーディングを頼める場合は何の問題もないのですが、取引実績があまりない会社はとんでもない成果物を出してきたりしてビックリすることもあったり、WEBデザインも一筋縄ではいかない代物だなと痛感していました。

そんなこともあり、「スタートアップなどの新興サイトはアプリケーションエンジニアの方が多いので、デザイン周りはCSSフレームワークを使うことが多いのかなぁ」と思いました。そんな私も勉強中の身ですが(笑)

話題のCSSフレームワークの紹介

既に紹介されているサイトも多いのでhttp://dragon.mond.jp/blog/wp-admin/post.php?post=1022&action=edit&message=10、詳細な説明はそちらにお任せするとして(笑)、【どんなCSSフレームワークがあるのか】【特徴としては何が挙げられるか】を紹介したいと思います。

と思い、色々調べていると、Colisさんの方でもまとめられていたので、そちらも合わせて読んで頂ければと思いますが(笑)、私自身使いやすそうだなと思ったのをメインに今回は投稿させてもらいたいと思います。

Twitter Bootstrap


■特徴

  • なんといってもTwitter謹製
  • オープンソース
  • クロスブラウザ×デバイス
  • レスポンシブデザイン
  • 成長するライブラリ
  • カスタムjQueryプラグイン

本家サイト : Bootstrap, from Twitter
紹介サイト : Twitter謹製のCSSフレームワーク『Bootstrap』が大幅バージョンアップ中! | idea*idea

HTML KickStart


■特徴

  • HTML5,CSS,jQueryをベースにしたフレームワーク
  • フォームやリスト、ボタンなどの基本パーツ完備
  • スライドショーやタブといったJSパーツも
  • レイアウトはお好きなように、テーブルも4種類
  • シンプルなアイコンが沢山あります

本家サイト : HTML KickStart
紹介サイト : 人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ! | Chrome life

Bluetrip


■特徴

  • 24-column grid
  • Sensible typography styles
  • Clean form styles
  • Sexy buttons
  • Status message styles

本家サイト : BlueTrip
紹介サイト : 複数のスタイルシートのフレームワークのいいとこ取りをした -BlueTrip | Coliss

52framework


■特徴

  • HTML+CSS3+JSがベース
  • HTML5を考慮した作り
  • クロスブラウザ対策
  • グリッドフレームワーク
  • CSS3セレクタやプロパティ

本家サイト : 52framework
紹介サイト : 先進的。HTML5/CSS3対応のデザインフレームワーク「52Framework」 | MOONGIFT

まとめ雑感

ひとまず4つほど挙げさせてもらいましたが、個人的には『Bootstrap』と『HTML Kickstart』が良さそうな感じがします。HTML5やCSS3を考慮された『52framework』も捨てがたいですね。(『Bluetrip』はまだ未知数なもので)『Bootstrap』をまだ使っていないので深くは言及しないですが(笑)、CSSは好みに応じてカスタマイズしていけば良いと思うんです。自分でCSS含めてWordPressのテーマを作った時に思いました。

ただ、やはり一から全部作り始めるのはすごい大変でした。そのために、こういったCSSフレームワークを用いるのはとても役立つと思います。これからのWEBデザイナーは【HTML+CSS+JS】だけではなく、【HTML+CSS+JS(jQuery)+PHP等】も知っておかないといけないのかと、技術の進歩に合わせて求められるスキルも高まっていくのだと実感しました。

また追加があれば、加筆していきたいと思います。


■2012/03/04追記
colissさんで紹介されていたので、CSSフレームワークを一つ追加させてもらいます。

Chico UI


■特徴

  • 豊富なUIウィジェット
  • 柔軟度の高いグリッド配置
  • 基本的なボタンなど標準装備
  • クロスブラウザ対応(IE6除く)

本家サイト : Chico UI
紹介サイト : ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク

コメント

  1. […] CSSフレームワークに関する記事やHTML Kickstartを試しに使ってみた記事を以前投稿させて来ましたが、HTML5+CSS3+Javascript(jQuery)を盛り込んだCSSフレームワークの場合、WordPressにデフォルトで […]