デザイン

デザイン

【CSS基本フレームワーク決定版】すぐ使える!「余分」を省いたベーシックなCSSフレームワーク10選

1,622 views

機能性の高いCSSフレームワークは、どんなデザイン・プロジェクトにおいても良いスタートを切るのに欠かせません。

その際、余分なオプションをいちいち選ぶべきか判断する必要のない、ジャストな機能を備えたパッケージで仕事するのが理想的と言えます。

以下では、そんな基準を満たしそうな10のフレームワークをご紹介します。

 

FICTOAN

このFICTOANは、手軽に使えるCSSフレームワークとして有名です。シンプルで軽いフレームワークとしては非常に有能で、ビビッドカラーとカスタムアイコンが特徴です。

minimal-html5-frameworks-01

 

avalanche

avalancheは、ユーザーのニーズを満たす柔軟なカスタマイズが特徴のフレームワークです。何種類かのパッケージが存在し、その中には流動的なグリッドシステム、クラスオフセット、コンテイナー、ヴァーティカルスペースなどのいくつもの機能が実装されています。

minimal-html5-frameworks-02

 

Beauter

ハイレゾリューションの美しい画像やデザインと、軽快な動作環境はトレードオフの関係にあると思われがちですが、このBeauterのフレームワークを使えば両立させることが出来ます。レスポンシブグリッドやパララックススクロールなどを実装することが出来ます。

minimal-html5-frameworks-03

 

Vanilla Framework

シンプルなデザインで新しくプロジェクトを立ち上げる際には最適なスタートポイントとして重宝されるフレームワークです。コンテイナーやデザイン要素がふんだんに盛り込まれており、それらを簡単にカスタマイズすることができます。

minimal-html5-frameworks-04

 

Bulma

CSS Flexboxを元にして開発されたのがこのBulmaです。フルレスポンシブルデザインで、モジュラーを組み合わせるようにデザインされています。リサイズやコラム調整などは自動的に行ってくれるので簡単です。

minimal-html5-frameworks-05

 

Milligram

ミリグラムというその名のとおり、ミニマムなフレームワークですが、必要なモノは一通り提供してくれています。ミニマムなフレームワークなので、軽快な動作をすることが期待できます。

minimal-html5-frameworks-06

 

InvisCss

複雑で大きなサイズのフレームワークの代用としてはこのInvisCssは優秀です。フレームワークパッケージは、シンプルCSSセレクターを実装したミニマルな機能を提供してくれます。

minimal-html5-frameworks-07

 

Look

個人でもWebサイトを作り公開できるようになった影響を受けてリリースされたのがこのLookのフレームワークです。プロジェクトのスターティングポイントとしては最適で、必要最低限の機能を実装しています。

minimal-html5-frameworks-08

 

UnlimitedGrid

SaaSモデルで提供されるこのフレームワークは、軽快な無限スクロールのグリッドデザインを簡単に実装してくれます。様々なグリッドデザインをサポートしており、モジュラーを組み合わせることによりカスタマイズることが出来ます。

minimal-html5-frameworks-09

 

Vital

複雑で大型なフレームワークの逆を行くコンセプトで開発されたのがこのVitalです。SaaSモデルで提供されて、見た目も美しいグリッドデザインやカスタムボタン、カスタムレイアウト、フォトギャラリーなど十分な機能を実装することが出来ます。

minimal-html5-frameworks-10

 

 

いかがでしたか?

フレームワークを使うときのポイントは、仕事を簡略化することだということを忘れないようにしましょう。

余分な機能につられて煩雑なものを選んでは、元も子もありません。

以上に紹介したものはすべてベーシックなもので、余分なオプションに悩まされずにすみます。

ぜひ参考にしてくださいね。

 

(※本記事は、10 Free Lightweight CSS Frameworks for a Fast Startを翻訳・再構成したものです)

関連記事

おすすめ記事