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デザインのお仕事を始めてなんとか約5年が経ちました。続けられているのが不思議です。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

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

関連記事

  1. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

  2. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  3. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  4. jQuery

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

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

  5. illustration

    簡単!Illustratorでキラキラ星を作る方法

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

  6. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

コメント

  • コメント (0)

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

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

CAPTCHA


スポンサー

instagramもやっています

最近の記事

  1. 現像すると写真が生き生きする!Macの写真アプリが素敵
  2. 売り上げアップを実感♪目から鱗の本「どうすれば売れるのか」を…
  3. 購入して半年♪iPad Proで描いたイラストをご紹介。(主…
  4. ブロガーの味方?高級コンデジ、Panasonic LX9を買…
  5. デザインが成功するテンプレがここに。「なるほどデザイン」を読…

facebook更新中!

  1. 日記

    wordpressでコーギーブログ始めました♫
  2. デザイン

    おすすめ!かすれたロゴに最適なスタンプ風なフリーフォント
  3. wordpress

    自分のブログを冬仕様に!wordpressに雪を降らせるプラグイン
  4. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する…
  5. Mac

    Marvericksアップデート時のPhotoshopのバグが直りました
PAGE TOP