プログラミング

プログラミング

PR

FICTOAN等CSS基本フレームワーク10選!高機能と簡単使用でより優れたウェブデザインを可能に

5,387 views

読了時間 : 約2分13秒

機能性の高い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を翻訳・再構成したものです)

おすすめ新着記事

おすすめタグ