今回のテーマは、フレームワークです。フレームワークを使うと、Web制作の効率化ができます。それだけでなく、メンテナンスもし易くなりますし、不具合を減らすことにもつながります。Web界隈でよく使われている、代表的なCSSフレームワークについてまとめました。
Bootstrap
Twitterが開発した、CSSフレームワークの代表格です。世界的に使われているフレームワークで、さまざまなホームページやウェブサービスに活用されています。機能も多く、スマホにも対応したレスポンシブデザインです。SassやLessでも使えるので、カスタマイズもし易いでしょう。
Foundation
Bootstrapと並んで、最もよく使われるCSSフレームワークである「Foundation」。Sassでつくられています。非常に多機能なので、期待するレイアウトやデザインをつくることができるはず。レスポンシブ対応です。
Web Starter Kit
検索エンジンのGoogleがリリースしているCSSフレームワークです。レスポンシブデザインを採用しています。CSSプリプロセッサーのSassを使うことができます。
Pure
こちらはYahoo!が開発しているCSSフレームワークです。コンパクトにつくられていて、圧縮された状態だとたった4KBしかありません。グリッドシステムを採用していて、スマホにも対応したレスポンシブデザインです。SassやLessは提供されていません。
Material UI
その名の通り、Googleが提唱したマテリアルデザインが実現できるCSSフレームワークです。JavaScriptフレームワークのReactを使っています。
Skeleton
「Skeleton」は、軽量なCSSフレームワークです。機能が絞り込まれているだけに、使いやすさや導入のハードルは低いと言えます。ヘッダーやフォントン、ボタンなどの基本的なスタイルは網羅されていて、スマホにも対応しているレスポンシブデザインです。グリッドシステムは12分割が可能で、最大で960pxの横幅まで対応しています。
SkyBlue CSS
こちらもミニマルなCSSフレームワークです。Sassでつくられています。標準的な機能はほぼ揃っていて、レスポンシブデザインとなっています。Bootstrapなどの重量級のフレームワークとは違い、気軽に使っていけることが魅力ですね。
あとがき
CSSフレームワークを7つご紹介しました。BootstrapやFoundationなどの機能豊富なフレームワークもいいのですが、制作内容によってはSkeletonやSkyBlue CSSなどの軽量なフレームワークが適する場面もあるでしょう。各フレームワークの特徴をしっかりとつかんだ上で、活用していきたいものです。