ブログ

  1. トップ
  2. ブログ
  3. 代表的なCSSフレームワークまとめ7選

Web制作

代表的なCSSフレームワークまとめ7選

今回のテーマは、フレームワークです。フレームワークを使うと、Web制作の効率化ができます。それだけでなく、メンテナンスもし易くなりますし、不具合を減らすことにもつながります。Web界隈でよく使われている、代表的なCSSフレームワークについてまとめました。

Bootstrap

Bootstrap

Bootstrap

Twitterが開発した、CSSフレームワークの代表格です。世界的に使われているフレームワークで、さまざまなホームページやウェブサービスに活用されています。機能も多く、スマホにも対応したレスポンシブデザインです。SassやLessでも使えるので、カスタマイズもし易いでしょう。

Foundation

Foundation

Foundation

Bootstrapと並んで、最もよく使われるCSSフレームワークである「Foundation」。Sassでつくられています。非常に多機能なので、期待するレイアウトやデザインをつくることができるはず。レスポンシブ対応です。

Web Starter Kit

Web Starter Kit

Web Starter Kit

検索エンジンのGoogleがリリースしているCSSフレームワークです。レスポンシブデザインを採用しています。CSSプリプロセッサーのSassを使うことができます。

Pure

Pure

Pure

こちらはYahoo!が開発しているCSSフレームワークです。コンパクトにつくられていて、圧縮された状態だとたった4KBしかありません。グリッドシステムを採用していて、スマホにも対応したレスポンシブデザインです。SassやLessは提供されていません。

Material UI

Material UI

Material UI

その名の通り、Googleが提唱したマテリアルデザインが実現できるCSSフレームワークです。JavaScriptフレームワークのReactを使っています。

Skeleton

Skeleton

Skeleton

「Skeleton」は、軽量なCSSフレームワークです。機能が絞り込まれているだけに、使いやすさや導入のハードルは低いと言えます。ヘッダーやフォントン、ボタンなどの基本的なスタイルは網羅されていて、スマホにも対応しているレスポンシブデザインです。グリッドシステムは12分割が可能で、最大で960pxの横幅まで対応しています。

SkyBlue CSS

SkyBlue CSS

SkyBlue CSS

こちらもミニマルなCSSフレームワークです。Sassでつくられています。標準的な機能はほぼ揃っていて、レスポンシブデザインとなっています。Bootstrapなどの重量級のフレームワークとは違い、気軽に使っていけることが魅力ですね。

あとがき

CSSフレームワークを7つご紹介しました。BootstrapやFoundationなどの機能豊富なフレームワークもいいのですが、制作内容によってはSkeletonやSkyBlue CSSなどの軽量なフレームワークが適する場面もあるでしょう。各フレームワークの特徴をしっかりとつかんだ上で、活用していきたいものです。