GitHub で人気のオープンソース CSS フレームワーク 9 つ

最近、友人からプライベートメッセージで、CSS関連のオープンソースフレームワークを持っているかと尋ねられました。以前、Vue、React、WeChatミニプログラムを使ったeコマースプロジェクトやバックエンド管理プロジェクトを何十件も共有していたのですが、今回はそのことについてです。まだ病気療養中で、咳をしながらGitHubを検索していたところ、努力が報われ、いくつか見つけることができました。今日は、GitHubで人気のCSSフレームワークをいくつかご紹介します！

1. ブートストラップ

公式サイト: https://getbootstrap.com/

GitHub (131k): https://github.com/twbs/bootstrap

Twitterが開発したBootstrapは、HTML、CSS、JavaScriptをベースにした簡潔で直感的、かつ強力なCSSフレームワークで、Web開発のスピードアップに貢献します。Bootstrapは、動的なCSS言語Lessで記述された、洗練されたHTMLとCSSの仕様を提供します。リリース以来、Bootstrapは非常に人気が高く、GitHubで常にトップのオープンソースプロジェクトとして君臨しています。

Bootstrapの利点:

人気のフレームワーク： Bootstrapは最も人気のあるオープンソースプロジェクトの1つです。問題が発生した場合は、すぐに解決策が見つかります。
完全な機能：単なる開発フレームワークではなく、多くの既成コンポーネントを含む、あらかじめ構築された動的なテンプレートも備えています。これにより、フロントエンドの経験がない開発者でも、構造化されたページを簡単に作成できます。
カスタマイズ可能： Bootstrapは簡単にカスタマイズできます。npmを使ってプロジェクトをインストールし、必要なパーツをインポートし、CSS変数を使ってほぼすべてをカスタマイズできます。
成熟しており、サポートされています: Bootstrap は元々 Twitter によって開始されましたが、現在は何百人もの開発者のコミュニティによって維持されており、安定したリリースと長期的なサポートが保証されています。

Bootstrap の欠点:

オーバーライドが難しい： Bootstrapはデザインと外観が非常に特殊なため、異なるスタイルに変更したい場合のオーバーライドが困難です。CSSの!importantルールを多用しているため、デフォルト値のオーバーライドが難しい場合があります。
jQueryへの依存： CSSのみをサポートする他のフレームワークとは異なり、Bootstrap 4のインタラクティブ機能の多くはjQueryに依存していました。そのため、ReactやVueなどのJavaScriptフレームワークとの連携は困難でしたが、不可能ではありませんでした。しかし、Bootstrap 5ではjQueryへの依存は解消されました。
依存関係の多さ： Bootstrapはプロジェクト内で非常に重い処理を伴います。必要な部分だけをインポートすることは可能ですが、他のフレームワークほど軽量でもモジュール化もされていません。

2. 財団

公式サイト：https://get.foundation/

GitHub (29.4k): https://github.com/foundation/foundation-sites

Foundationは、レスポンシブなHTML、CSS、JavaScriptを開発するためのフレームワークです。あらゆるデバイスに対応したWebアプリケーションを構築するための、使いやすく強力で柔軟なフレームワークであり、モバイルファーストのフレームワークとして人気を博しています。

実際、Foundationは単なるCSSフレームワークではなく、フロントエンド開発ツールのスイートです。これらのツールは組み合わせて使用することも、個別に使用することもできます。

財団の利点:

一般的なスタイル： Bootstrapとは異なり、Foundationはコンポーネントに独自のスタイルを採用していません。広範なモジュール性と柔軟なコンポーネントは最小限のスタイルで、簡単にカスタマイズできます。
豊富な機能： Foundationは多くの組み込みコンポーネントを提供します。また、開発チームやコミュニティによって作成された定義済みのHTMLテンプレートへのアクセスも提供しており、必要に応じて使用できます。
電子メールデザイン: oundation for Emails では、Microsoft Outlook の古いバージョンを含むあらゆるクライアント向けのレスポンシブな電子メールテンプレートを作成できます。
アニメーション: Foundation は ZURB の Motion UI ライブラリと簡単に統合できるため、組み込みエフェクトを使用してトランジションやアニメーションを作成できます。

財団の欠点:

学習曲線が急峻： Foundationは多くの機能を備えており、他のフレームワークよりもはるかに複雑です。フロントエンドのレイアウトには大きな自由度があるため、その仕組みをすべて理解する必要があります。
JavaScriptへの依存： Foundationの多くの機能は、jQueryやZeptoといったJavaScriptに依存しています。ZeptoはjQueryと同じ構文を使用しながら、フットプリントが小さいライブラリです。そのため、FoundationはReactやAngularプロジェクトには適していません。また、Zeptoは比較的知られていないライブラリであり、多くの開発者が使いこなしているわけではありません。

3. ブルマ

公式サイト：https://bulma.io/

GitHub (46.5k): https://github.com/jgthms/bulma

Bulmaは、無料でオープンソースのCSSフレームワークです。すぐに使えるフロントエンドコンポーネントを提供しており、これらを組み合わせることでレスポンシブなWebインターフェースを簡単に構築できます。Bulmaフレームワークの最大の利点は、そのシンプルさと使いやすさです。すべてのスタイルはクラスベースで記述されており、HTML要素にクラスを指定するだけで、すぐにスタイルが適用されます。

Bulmaの利点:

美しいデザイン: Bulma はクリーンでモダンなデザインを採用しており、デフォルト設定を変更しなくても美しい Web ページを作成できます。
モダン: CSS の flexbox レイアウトにより、レスポンシブレイアウトの作成がはるかに簡単になり、Bulma は flexbox を実装した最も初期のフレームワークの 1 つです。
開発者フレンドリー： Bulmaは開発者に優れたエクスペリエンスを提供するように設計されています。そのため、Bulmaは使いやすく覚えやすい命名規則を提供しています。
カスタマイズが簡単： Bulmaの色、塗りつぶし、そして多くのデフォルトプロパティは、SASSを使ってカスタマイズできます。これにより、プロジェクトのデフォルト値を数分で設定できます。
JavaScript なし： Bulma には JavaScript 機能は含まれていません。純粋な CSS で記述されているため、Vue や React などの JavaScript フレームワークと簡単に統合できます。

ブルマの欠点:

ユニークなスタイル： Bulma のユニークなスタイルは諸刃の剣です。非常に独特なため、使いすぎると、Bootstrap のように似たようなウェブサイトができあがってしまう可能性があります。
まだ完全ではありません: Bulma は多くの点で Bootstrap と競合しますが、アクセシビリティやその他のエンタープライズグレードの機能の点では不完全です。

4. 追い風

公式サイト：https://tailwindcss.com/

GitHub (63.2k): https://github.com/tailwindlabs/tailwindcss

Tailwind CSS は、flex、pt-4、text-center、rotate-90 などのクラスを統合した機能重視の CSS フレームワークで、これらのクラスを HTML で直接組み合わせてあらゆるデザインを構築できます。

Tailwindの利点:

アトミックCSS： Tailwindは、強力なユーティリティクラスを提供することで、一般的なスタイルを簡単に実装できます。このアプローチはアトミックCSSと呼ばれることもあり、HTML要素のクラスによってその外観が明確に記述されます。指定されたクラスを使用するだけで、スタイルが有効になります。
あらかじめ構築されたデザインはありません： Tailwind には、あらかじめ構築されたコンポーネントや特定のデザイン言語はありません。そのため、既存のスタイルをオーバーライドする必要がなく、デザインをカスタマイズする際のワークフローが改善されます。
再利用可能なコンポーネント： Tailwindでは、プロジェクト全体で再利用できる独自のカスタムコンポーネントを作成できます。公式ウェブサイトには、いくつかのコンポーネント例も掲載されています。
強力なPostCSS/SASS統合： Tailwindを最大限に活用するには、SASSまたはPostCSSプロジェクトにインストールしてインポートする必要があります。これにより、Tailwindのすべての機能を活用して、より効率的なCSSを記述できるようになります。

Tailwind の欠点:

学習曲線が高い： Tailwindは経験の浅い開発者にとって最適な選択肢ではありません。あらかじめ構築されたコンポーネントが提供されていないため、フロントエンド技術の仕組みを深く理解する必要があります。Tailwindの学習曲線は高く、フレームワークを効率的に使用するには、関連する構文を習得する必要があります。
Tailwindは直接使用できません。バンドルされたCSSファイルとしてプロジェクトに追加できます。ただし、この方法でフレームワークを追加すると、多くの機能が利用できなくなり、縮小版（縮小版は27KB、オリジナルは348KB）も使用できなくなります。Tailwindを最大限に活用するには、Webpack、Gulp、その他のフロントエンドビルドツールの使い方を知っておく必要があります。

5. UIキット

公式サイト：http://getuikit.com/

GitHub (17.7k): https://github.com/uikit/uikit

UIKitは、YOOthemeチームによって開発された軽量でモジュール化されたフロントエンドフレームワークで、強力なフロントエンドインターフェースを迅速に作成できます。UIKitは、包括的なHTML、CSS、JavaScriptコンポーネントを提供します。LESSをベースとしたコード構造は明確でシンプルで、拡張と保守が容易です。また、小型でレスポンシブなコンポーネントを備えています。ユーザーは、UIKitの基本スタイルに基づいて、簡単にカスタマイズして独自のテーマを作成できます。

UIkitの利点:

数十のコンポーネント： UIKitは、数十のコンポーネントを通じて複雑なフロントエンドレイアウトを実現します。一般的なユーティリティとコンポーネントがすべて含まれており、ナビゲーションバー、キャンバスの境界線、パララックスデザインなどの高度な要素にもアクセスできます。
スケーラブル: UIKit は、LESS または SASS プリプロセッサを使用して簡単にカスタマイズおよび拡張できます。
UI ベースのカスタマイザー: UIKit は、デザインをリアルタイムでカスタマイズし、SASS または LESS 変数をプロジェクトにコピーできる Web ベースのカスタマイザーを提供します。

UIkit の欠点:

小規模プロジェクトには適していません： UIKitは複雑なフレームワークであり、深い理解が必要となるため、経験の浅い開発者にはおすすめできません。高度なアプリケーションには適していますが、小規模プロジェクトには複雑すぎる可能性があります。
コミュニティが小さい:他のフレームワークほど人気がないため、問題に対する答えを見つけるのが難しい場合があります。

6. ミリグラム

公式サイト：https://milligram.io/

GitHub (9.9k): https://github.com/milligram/milligram

Milligramは、スピードと簡潔さを重視し、最小限のスタイル設定を提供します。圧縮後もわずか2KB！パフォーマンスと生産性の向上を目指して設計されており、再設定するプロパティが少なくなり、よりクリーンなコードになります。

ミリグラムの利点:

ミニマリストCSSフレームワークMilligramは、セットアップも使用も簡単です。生産性を向上させる強力な機能を備えているにもかかわらず、圧縮後のサイズはわずか2KBです。
デフォルトスタイルなし：他のフレームワークとは異なり、Milligramにはデフォルトスタイルがありません。カスタムスタイルを実装する際に、ターゲットに合わないプロパティをリセットしたりオーバーライドしたりする必要はありません。
簡単に習得できます:始めるのは非常に簡単です。公式ドキュメントを読むだけで始めるのに十分です。

ミリグラムのデメリット:

テンプレートなし: Milligram では、あらかじめ作成されたテンプレートは提供されていません。
コミュニティの規模が小さい： Milligramは小規模で緊密なコミュニティです。コミュニティのサポートを得るのは、より一般的なCSSフレームワークを使用するほど簡単ではありません。

7. 純粋

公式サイト: http://purecss.io/

GitHub (22.7k): https://github.com/pure-css/pure

Pure.cssは、Yahoo! Inc.が開発した軽量でレスポンシブなピュアCSSモジュールセットで、あらゆるWebプロジェクトに適しています。このフレームワークは非常に小さく、すべてのモジュールを使用した場合でも圧縮後わずか3.7KBです。

Pureの利点:

軽量:フレームワークを軽量かつ高性能にするために、CSS のすべての行が慎重に検討され、記述されています。
カスタマイズ可能: Pure はモジュール方式でインポートでき、必要なコンテンツのみを実装できます。
充実したサポート:コミュニティプロジェクトとは異なり、Pure は Yahoo によってサポートされているため、長期的なセキュリティオプションとなります。
既製のコンポーネント: Pure には、最新の Web アプリケーション向けのレスポンシブな構築済みコンポーネントが付属しています。

Pureのデメリット:

小規模チームには適していません: Pure は、フレームワークを使用するために独自のデザインを作成する必要があるため、経験の浅いチームや小規模チームには適していません。

8. タキオン

公式サイト：https://tachyons.io/

GitHub (11.3k): https://github.com/tachyons-css/tachyons

他の一般的なフロントエンドフレームワークとは異なり、TachyonsはCSSルールを小さく、管理しやすく、再利用可能なコンポーネントに分解することを目的としています。Tachyonsは、開発者が大量のCSSコードを使用せずに、読みやすく、読み込みが速く、レスポンシブなウェブサイトを作成できるよう支援します。

タキオンの利点:

すぐに使用できるコンポーネント: Tachyons は生産性を向上させるための優れたユーティリティクラスの提供に重点を置いていますが、公式ドキュメントにもすぐに使用できるコンポーネントが多数含まれています。
多様性: Tachyons は、静的 HTML、Rails、React、Angular など、さまざまな設定に使用できる機能的なテンプレートを提供します。
再利用可能： Tachyonは、スケーラブルなデザインシステムを構築するのに最適な選択肢です。このフレームワークでは、再利用可能なプロパティを作成して、多様で柔軟なコンポーネントを構築できます。

タキオンの欠点:

主にPostCSSで使用されます： PostCSSはTachyonsを使用する主な方法ですが、LESSやSASSほど広く利用されていません。TachyonsはSASSとの統合も提供していますが、広く利用されておらず、サポートもされていません。

9. 具体化する

公式サイト：https://materializecss.com/

GitHub (38.7k): https://github.com/Dogfalo/materialize

Materializeは、CSS、JavaScript、HTMLを使用して作成されたUIコンポーネントライブラリです。UIコンポーネントを実装することで、ブラウザのポータビリティ、デバイス非依存、グレースフルデグラデーションといった最新のWebデザインの原則に準拠しながら、魅力的で一貫性があり、機能的なWebページやWebアプリケーションを構築できます。より高速で美しく、レスポンシブなWebサイトの作成に役立ちます。Google Material Designにインスパイアされています。

Materializeの利点:

完全な機能: Materialize CSS には、多数の構築済みコンポーネントが用意されており、インタラクティブ性をサポートするより高度な JavaScript 機能も備わっています。
モバイルフレンドリー:フローティングナビゲーションバーやスワイプ操作など、フレームワークのモバイルのようなコンポーネントを使用して、プログレッシブウェブアプリケーションを作成できます。

Materializeの欠点:

厳密なデザイン言語:マテリアルデザインにあまり似ていないものを作りたい場合は、Materialise の使用を避けるのが最善です。
独立プロジェクト: Materialise には活発なコミュニティがありますが、企業の支援を受けていない小規模で独立したプロジェクトです。

10. 要約

これらのCSSフレームワークは、ある程度の作業効率の向上に役立ちます。では、これらのフレームワークはどのように選べば良いのでしょうか？

より多くの機能と事前に構築されたコンポーネントについては、Bootstrap、Bulma、または Materialize を選択してください。
スタイルではなくユーティリティクラスのみを提供するフレームの場合は、Tailwind、Milligram、または Pure を選択します。
強力なコミュニティサポートを備えたフレームワークの場合は、Bootstrap または Foundation を選択してください。
より軽量なフレームワークが必要な場合は、Tailwind または Milligram を選択してください。

最終的には、実際のニーズに基づいて最も適切な CSS フレームワークを選択する必要があります。

DUICUO