CSSフレームワーク

押さえておきたい!代表的なCSSフレームワークまとめ


みなさんCSSフレームワークをご存知ですか?
最近CSSフレームワークの代表ともいえる「Bootstrapを使っている」という方もいて、
私も勉強してみようかと刺激され、勉強がてら記事にしてみました。

スポンサードリンク

CSSフレームワークとは?

数年前からフレームワークという存在はあることは知っていましたが、

使い方も、使ってる人の情報もなく、
ほとんど知らないままでした。

 

CSSフレームワークとは、
使い勝手の良いCSSが始めから定義されていて、

HTMLタグやクラスを追加するだけで、
スタイルが指定できるライブラリのことです。

普通、自分でサイトを作っていると、

レイアウトやナビゲーション、ボタンなどのスタイルを
自分で記述する必要があって時間がかかりますが、
ほぼ記述する必要がないものとなっています。

すぐにプロっぽい奇麗なサイトができてしまうので
ノンデザイナーのプログラマの方にも利用されているそうです。
私も、すぐディテールが雑になりがちなので、こういうものを活用できたら完成度は高まるんじゃないか?なんて思います。
(もっと几帳面にならなきゃですが)

 

 

代表的なフレームワーク

 

Bootstrap

bootstrap

Twitter社が開発・提供しているフロントエンドツール。

class指定によるグリッドシステムやフレキシブルなレイアウトに対応。そのほか、
アイコンフォントやデザインされたUIも豊富に用意されています。
Bootstrapから派生して作られたCSSフレームワークも多数。

Foundation

foundation

レスポンシブwebデザインを強く意識したフロントエンドフレームワーク。あらかじめclassが用意されていますが、

Sassを書き換えることで自分の希望したclass名に変更できるように設計されています。ボタンやドロップダウンがあらかじめ
用意されていて、カスタマイズしてダウンドードすることも可能です。

 

Pure

pure

Yahoo!が作っているcssフレームワークです。class名の接頭辞に「.pure-」と付いているため、
フレームワーク独自に拡張したCSSとの見分けが付きやすいです。
見た目を自由にカスタマイズしたものを「Skin Builder」で手に入れることもできます。

 

 

Topcoat

topcoat

Adobeが作っているCSSフレームワーク。webアプリケーションなどでよく使うパーツがまとめられています。

 

Wirefy

wirefy

動的なワイヤーフレームやモックアップを作るのに最適なフレームワーク。WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、タッチデバイスをサポートしています。

 

 

最後に

いかがでしたか?CSSフレームワークをご紹介しました。
CSSフレームワークというとなんとなく敷居が高いイメージですが、
使いこなして素敵なサイトが作れると良いですね!
私もこれから勉強して作れるようになろうと思います!

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めて約4年が経ちました。ここでは、仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで…

  2. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

  3. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  4. jQuery

    ホームページに必須!?jQueryでトップへ戻るボタンの作り方

    みなさんこんにちは、mayukouです。だいぶ春らしくなってきました…

  5. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  6. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作…
  2. モバイルフレンドリーなwebデザインするときにおすすめなツー…
  3. かすれや濃淡が出る!かわいい手描き感のあるブラシのご紹介♩(…
  4. 今や欠かせない存在!iPad Pro “9.7を…
  5. iPad Proを液タブに♫Astropad Studioは…

facebook更新中!

  1. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。
  2. ブログ

    色々宣言!?2016年の振り返りと来年の抱負
  3. デザイン

    webデザインのトレンドを取り入れよう!デザインの参考になるリソース 〜日本編〜…
  4. wordpress

    wordpressバックアップツールの決定版!All in one Migrat…
  5. デザイン

    スターバックスに学ぶブランディング:デザインコンセプトとは
PAGE TOP