みなさんCSSフレームワークをご存知ですか?
最近CSSフレームワークの代表ともいえる「Bootstrapを使っている」という方もいて、
私も勉強してみようかと刺激され、勉強がてら記事にしてみました。
スポンサードリンク
CSSフレームワークとは?
数年前からフレームワークという存在はあることは知っていましたが、
使い方も、使ってる人の情報もなく、
ほとんど知らないままでした。
CSSフレームワークとは、
使い勝手の良いCSSが始めから定義されていて、
HTMLタグやクラスを追加するだけで、
スタイルが指定できるライブラリのことです。
普通、自分でサイトを作っていると、
レイアウトやナビゲーション、ボタンなどのスタイルを
自分で記述する必要があって時間がかかりますが、
ほぼ記述する必要がないものとなっています。
すぐにプロっぽい奇麗なサイトができてしまうので
ノンデザイナーのプログラマの方にも利用されているそうです。
私も、すぐディテールが雑になりがちなので、こういうものを活用できたら完成度は高まるんじゃないか?なんて思います。
(もっと几帳面にならなきゃですが)
代表的なフレームワーク
Bootstrap
Twitter社が開発・提供しているフロントエンドツール。
class指定によるグリッドシステムやフレキシブルなレイアウトに対応。そのほか、
アイコンフォントやデザインされたUIも豊富に用意されています。
Bootstrapから派生して作られたCSSフレームワークも多数。
Foundation
レスポンシブwebデザインを強く意識したフロントエンドフレームワーク。あらかじめclassが用意されていますが、
Sassを書き換えることで自分の希望したclass名に変更できるように設計されています。ボタンやドロップダウンがあらかじめ
用意されていて、カスタマイズしてダウンドードすることも可能です。
Pure
Yahoo!が作っているcssフレームワークです。class名の接頭辞に「.pure-」と付いているため、
フレームワーク独自に拡張したCSSとの見分けが付きやすいです。
見た目を自由にカスタマイズしたものを「Skin Builder」で手に入れることもできます。
Topcoat
Adobeが作っているCSSフレームワーク。webアプリケーションなどでよく使うパーツがまとめられています。
Wirefy
動的なワイヤーフレームやモックアップを作るのに最適なフレームワーク。WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、タッチデバイスをサポートしています。
最後に
いかがでしたか?CSSフレームワークをご紹介しました。
CSSフレームワークというとなんとなく敷居が高いイメージですが、
使いこなして素敵なサイトが作れると良いですね!
私もこれから勉強して作れるようになろうと思います!
投稿者プロフィール

-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している!?ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。