社畜エンジニアがおすすめする2023年トレンドのCSSフレームワーク

CSS フレームワークとは

WEB 技術が進化するにつれて、フロントエンド開発はより生産的で効率的に開発できるフレームワークを使うようになりました。
例えば JavaScript 場合、Vue・Angular・React、PHP の場合、Laravel・
Cake・Zend などが存在します。

フレームワークを使うことで統一性のあるコーディング可能になり結果的に保守性が高いプロジェクトにすることができます。
CSS も例外ではなく、フレームワークを使うことが多くのフロントエンド開発技術者にとって当たり前になっています。

ですが、 CSS フレームワーク を選定するにあたり、選択肢が膨大になりすぎました。大半の技術者はフレームワークを使うにあたり、それぞれのデメリットメリットの調査に時間を使うことでしょう。

ですので、ここでは 2021 年に CSS フレームワーク を選定する際に、おすすめのフレームワークを紹介します。多くの人の助けになることを願います。

name	Github	Star	Recommended
Bootstrap	https://github.com/twbs/bootstrap	151k	〇
Tailwindcss	https://github.com/tailwindlabs/tailwindcss	42.8k	〇
Foundation	https://github.com/foundation/foundation-sites	29.1k	〇
UIkit	https://github.com/uikit/uikit	16.9k	〇
purecss	https://github.com/pure-css/pure/	21.7k	〇
Tachyons	https://github.com/tachyons-css/tachyons	10.8k
Milligram	https://github.com/milligram/milligram	9.4k
Materialize CSS	https://github.com/Dogfalo/materialize	38.5k	〇
Skeleton	https://hackr.io/blog/best-css-frameworks	18.3K
Tacit	https://github.com/yegor256/tacit	1.4K

Bootstrap

CSS フレームワークを使う上で、これを選定対象からはずすことはないでしょう。
それくらい多くの技術者によって使用され開発されてきました。

2011 年に Twitter で開発され使用されたフレームワークであり、フロントエンド開発者がレスポンシブ Web デザインを非常に簡単に開発できるようにしてくれました。

Bootstrap は公開されたから非常に多くのアップデートを重ね、最新のプロジェクトの CSS デザインをサポートするように進化を重ねてきました。

フロントエンド開発者は、その進化によって生まれた複数の機能を無料で使用することができます。

メリット

最も人気のある CSS フレームワーク
今現在、最も利用されている CSS フレームワークと言って差し支えないと思います。それゆえプロジェクトで遭遇した不具合の解決策をすぐに見つけることができるます。多くのフロントエンド技術者にとってこのメリットは、非常に大きな助けになることでしょう。
多くの開発テンプレートの配布
公式サイトのサンプルを参照してください。
https://getbootstrap.jp/docs/5.0/examples/
非常に多くのテンプレートが存在し、あなたのプロジェクトの開発を手助けしてくれます。これは無料で使用することができます。
また有料版を利用することでプレミアムテンプレートを沢山見つけることができ、それらはプロジェクト開発期間を短縮してくれることを期待できます。
容易なカスタマイズ
時には多くの利用をされてきたということはデメリットになります。
努力を積み重ね開発した Web アプリケーションが、ありきたりなデザインになってしまい、特徴がないものとなってしまうことでしょう。
かといって自分勝手なカスタマイズは不具合を発生されることが確実です。
Bootstrap はその問題はありません。
Bootstrap は SASS を使用することで簡単にカスタマイズできます。
気に入ったコンポーネントインストールし、気に入らない部分は SASS 変数を使用して、好みにカスタマイズしましょう。
長年の月日によって生まれた成熟されたサポート
Bootstrap はもはや一企業の代物ではありません。
数百人開発と複数のコミュニティーによって維持され続けられています。
そのため Bootstrap をプロジェクトに導入し途中でサポートが途切れることが、考えられません。

デメリット

オーバーライドが難しい
私は CSS パーツを開発するときに自分にルールを設けています。
CSS パーツを開発するとき!important をつけることはありません。
なぜなら、共同開発者がいる場合その!important はデメリットにしかなりえないからです。
Bootstrap は優秀な開発者が、その優秀な CSS パーツを作成しています。
Bootstrap の開発者は、どのような思惑があるのか私の知るところではないのですが、!important を広範囲に使用しています。
これにより、CSS の文字色を変更するような軽微な変更も非常に難解です。
ありきたりなデザイン
メリットの「容易なカスタマイズ」でも触れましたが、多くの利用者がいるということは、デフォルトのデザインがありきたりなものです。
Bootstrap は便利な CSS パーツを提供し、それらは非常に簡単に利用できますが、それらの CSS パーツデザインは非常に多くの利用者が利用しています。
そのため少し知識がある人はに一瞬で Bootstrap で作られた web サイトだとバレてしまいます。
それは自分の着ている服が、どこで購入されたものか友達にバレたときくらいの微妙な歯がゆさを感じさせます。
重いファイルサイズ
Web サイトを作る人は、そのサイトの評価が気になるものです。
昨今は SEO などを調べる人も増え、その指標が自分のとって重要かを調査します。
SEO の評価指標で、サイトスピードがあります。
モバイルサイトでは一秒を表示速度で、直帰率が大幅に変動します。
その点を踏まえるた上で、残酷なことを記載します。
「Bootstrap を使用したページは重く」なります。
Bootstrap は非常に多くの機能が備わっており、それを全てプロジェクトに含めることは、レスポンスを非常に悪くします。もちろん必要な機能だけをインポートし使用することは可能ですが、速さを求めるならば他の CSS フレームワークを選定対象にしたほうがいいでしょう。

テンプレート

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->

  </body>
</html>

筆者評価

V4 から V5 にアップデートされ、安定したコンポーネント利用が可能になりました。
V4 時は内部で jQuery が使用されていたので、スマートフォンで表示する際、非常に応答性が悪かったでした。4G 回線だと総合レスポンスが 10 秒などを必要とし使い勝手はいいものではありませんでした。

ですが V5 にアップデートされてからは jQuery がプレーンな JavaScript に切り替わったことで応答性も改善され以前より使いやすくなった印象です。

Bootstrap は様々なプロジェクトで使用されており、実際に私もプロジェクトで使用したことがあり、初心者にもお勧めです。
Bootstrap で学ぶグリッドシステムの知識は、他 CSS でも使うことが多いです。

スタートアッププロジェクトのモック作成や個人開発などで使ってみてはいかがでしょうか？

Tailwind CSS

初めに断っておくと、Tailwind フレームワークは CSS の基本的な使用方法を理解していない初心者にはお勧めできません。
なぜなら自由度が高すぎるため、何を操作すればいいか理解しづらいからです。

この Tailwind CSS の思想は「開発者に自由を提供する軽量なフレームワーク」であることを明確に説明しています。

Tailwind CSS は完成されたデザインパーツを提供せず、CSS コーディングを不要にするユーティリティークラスによって構成されています。

多くの経験豊富なフロントエンド開発者は、その強力な機能に手を合わせて祈ることでしょう。

メリット

アトミック CSS
通常 CSS を使用するとき、文字の色、要素の配置など特定のパーツにあった CSS クラスを自分で作成し、HTML に反映させます。
Tailwind CSS では、強力なユーティリティークラスを提供しており、開発者はそれを自身の HTML 要素の追加するだけで自分の思い通りの Web デザインを作成できます。
既存プロジェクトに対して、都合のいい相性
通常他の CSS フレームワークを使用すると、事前に作成した CSS パーツの競合が発生する可能性を孕んでいます。
ですが Tailwind CSS は自由なフレームワークです。
提供されている CSS パーツは存在せず、提供されているデザインが存在しないので、既存プロジェクトで競合は発生せず、既存デザインが崩れることはありません。
再利用可能なコンポーネント
Tailwind には、コンポーネント単位でデザインを設計し、プロジェクト全体で再利用できる独自のカスタムコンポーネントを作成できます。
カスタムコンポーネントは有志や公式が提供しているものもあるので、ぜひ見てみましょう。
クラス名を考えなくていい
CSS に限らずコーディングをしたことがある人ならば、『命名はどのようにするか』は必ず通る悩み事だと思います。多くの場合それで数分間時間を取られることでしょう。Tailwind ではその必要がなくなります。なぜならばもうすでに名前は決められているからです。
安全な変更
CSS をクラスを作成した場合多くの場合、一つではなく複数のコンポーネントに反映させることだと思います。これは基本的にメリットになりますが、デメリットになることもあります。なぜならば全ての人がその変更によって影響される範囲を知らないからです。Tailwind ではそのような心配はありません。なぜならはインラインスタイルでデザインを作成していくからです。

デメリット

初心者向きでない
なんといいますが Tailwind CSS は自由なフレームワークです。
自由ということは、それを扱うための知識も当然必要になってきます。
他のフレームワークとは違い CSS の知識が浅い状態で使うには荷が重いでしょう。
学習コスト
初心者でなくても初期学習コストが高くなります。なぜあらば Tailwind に存在するクラス名をある程度覚えなければいけないからです。

テンプレート

<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <!-- ... -->
</body>
</html>

筆者評価

あなたがエンジニアだった場合、必ずぶつかる問題として命名が上がると思います。私もそうです、命名に非常に多くの時間を使います。

なぜなら命名規則はプロジェクトにより異なり、明確に文書化されているところや、まったく文書化されていないところなどがあります。

前者ならば時間を使うことで解決するのですが、後者の場合は大変です。
なぜならば誰もそのプロジェクトについて命名規則など考えたこともないですし、正解などないからです。
その場合はどうなるかというと、各々の思想・宗教などが色濃く反映された命名となるでしょう。そしてその多くが後から積み重なり問題となります。

Tailwind を大きなメリットしてクラス名があらかじめ決められています。
CSS に関してはこれを使用することで命名について悩むことは減ります。

Foundation

Foundation は Bootstrap に次いで人気のフレームワークです。

あらゆるデバイス、メディア、およびアクセシビリティを提供する協力無比なフレームワークです。Foundation はフレームワークという枠だけではなく、単なるツールとしても利用することができ、他 CSS フレームワークとの共存も可能です。

また Foundation での開発をサポートするドキュメントプロジェクトであるFoundation-sitesが存在し、カスタマイズが可能なので、自社プロジェクトのドキュメント作成に重宝すること間違いなしです。

CSS でアニメーションを表現したいときにも Foundation は強力なサービスを提供します。それは**Motion UI**と呼ばれ、どんなに難しいアニメーションもたちまちに表現できることでしょう。

他 CSS フレームワークでは存在しない特徴ですが、レスポンシブ HTML メールを作成するために必要なアセットが存在します。
それはFoundation for Emailsと呼ばれ、開発チームにてサポートされています。

容易なカスタマイズ
Foundation は自由な CSS フレームワークです。
少し調べると非常にカスタマイズ性の高いフレームワークだということに築くと思います。それゆえ Bootstrap のようにありきたりなデザインになることが少なく、豊富なドキュメントの上に自己的で独創的なデザインを作ることが可能です。
強力で豊富なコンポーネント
Foundaion は成熟した CSS フレームワークです。
優秀な開発チームのよって Web サービスに必要なコンポーネントは既に作成されており、利用者はそれを組み込むだけで簡単に利用できます。
また、それらのコンポーネントの利用方法は開発チームがドキュメント化しています。
メールデザインをサポート
メールのデザインを作成したことがある人ならば、それが非常に困難であることを知っていると思います。
Foundation はメールテンプレートの作成もサポートしてくれます。
アニメーション作成の簡略化
Foundation の開発チームは Web サービスに特殊な動きをつけるアニメーションもサポートしてくれます。
これは MotinUI によって提供され、私たちはその恩恵を無料で受け入れることができます。

デメリット

初心者向きでない
Foundation は Bootstrap に次ぐ人気 CSS フレームワークです。
ただ Bootstrap より複雑でより多くのオプションが存在しています。
そのためどのような機能が存在するか、一から勉強する必要があります。
このことから初心者向きでは、決してありません。
しかし、CSS をある程度覚えた人が一段階上に行きたいために使うのは否定しません。
JavaScript 依存
Foundation の機能の多くは jQuery または Zepto を使用しており、JavaScript に依存しています。昨今の風潮ではこのように JavaScript に依存した CSS フレームワークは嫌悪されるべきものであり、決してメリットになることはありません。なぜなら、React または Angular,Vue に組み込む場合に競合する可能性を捨てきれず、サイトスピードにも影響を与えるためです。
また Bootstrap のように途中で依存から抜け出せればいいのですが、今のところそういう情報は存在していないので、使う場合その点を考慮すべきところです。

テンプレート

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

筆者評価

CSS フレームワークを選定するうえで、考慮する点としてありきたりなデザインにならないかがあげられると思います。

多くのデザイナは使用しているフレームワークを悟られたくないと思います。
少なくても私はそうです。

Foundation は、ありきたりな Bootstrap のデザインが気に入らなかった時の代替案として重宝します。
なぜなら Bootstrap の知識がそのまま使える部分が多く、Bootstrap を覚えたての初心者ならばまず Foundation を使ってみるのがいいかと思います。

導入はそこまで難しくありません。すぐ始めましょう。

Bulma

Bootstrap のデメリットが気になる？
Bulma を使いましょう。これは Bootstrap の素晴らしい代替案です。

Bulma は、破壊的な使いやすさを兼ね備えており、プロジェクトにインポートするだけで Bulma 開発チームが作成した素晴らしいデザインコンポーネントを使うことができます。

Bulma を高く評価するうえで、欠かせないのはそのシンプルな構文と非常に軽量でありながら、ありきたりなデザインに見えない魅力的なデザインです。

これはサイトスピードとシンプルなデザイン求めるあなたにお勧めする CSS デザインフレームワークです。

メリット

シンプルなデザイン
Bulma は他 CSS フレームワークに比べ非常にシンプルです。
公式サイトを見てみるとそれが実感できるかと思います。
Bulma を使って作成すると非常に見栄えが良くユーザビリティーの高いデザインになることが保証されます。
カスタマイズが用意
Bulma は SASS 変数を利用し、あなたの Web サイトを瞬時にカスタマイズできます。それはパティングやデフォルトカラーといったデザインにおいて重要な要素の統一化にも役立ちます。
依存モジュールが存在しない
Bulma には JavaScript の機能などが存在しません。
前述した Bootstrap の version4 や Foundation やそのデザインを支えるモジュールとして jQuery などのモジュールを使用しているおり、それは基本的にデメリットになることが多いです。なぜならあなたの Vue、React、Angular などのプロジェクトを破壊する可能性を孕んでいます。
Bulma は依存モジュールが存在しません。
好きなだけあなたの JavaScript で作成したプロジェクトに統合してやりましょう。

デメリット

シンプルすぎるデザイン
メリット 1 でシンプルなデザインに対して好意的に記載していますが、それはデメリットにもなります。
シンプルなデザインすぎるため、Bootstrap 同様にありきたりな Web ページなる可能性があります。Bulma の CSS パーツだけを使用するのは避けましょう。
ドキュメント&サポートが不十分
Bulma は他 CSS フレームワークと競合するポテンシャルを秘めていますが、それは Bulma フレームワークのサポートを保証するものではありません。
ドキュメントは最低限の使いか確か記載しておらず、無料サポートに対しては余力を残していません。

テンプレート

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

筆者評価

追記予定

UIkit

優れたデザインと非常に軽量に動作する CSS フレームワークです。

個人の感想が強いので次の一文は参考程度の読んでもらいたいのですが、「Bootstrap に飽きた技術者が使っている」印象を持ちます。

UIKit は昨今の流行りの、CSS デザインパーツを全て提供しており、それは非常に軽量・軽快に動作します。

メリット

多数のコンポーネント
UIKit は優秀な開発者が作成した数十にも及ぶ CSS コンポーネントが存在します。これを利用するの非常に簡単であなたの Web サービスにすぐに実装できます。
拡張が用意
UIKit は、LESS または SASS 変数を使用して簡単にカスタマイズ・拡張ができます。
優秀なカスタマイズサイトの提供
多くの技術者は、サイトのデザイン作りに悩みます。
UIKit が提供するカスタマイザーサイトを利用することで幸せになれるかもしれません。このサイトは様々のコンポーネントをカスタマイズしそれを CSS として提供します。

デメリット

膨大なドキュメント
UIKit はその膨大なコンポーネントを仕様により、初心者が扱うには難しいものになってます。
それは経験の浅い開発者にとっては非常につらい事実となり、立ちはだかります。
またあなたのプロジェクトが小規模なものとなる場合は、ほかのフレームワークのほうが最適な場合があります。
薄い認知度
現状他 CSS フレームワークに比べ、認知度が薄いです。
それは非常にデメリットになりえます。
あなたのプロジェクトで発生したバグの解決方法や最適な利用方法についての知見を得ることが難しいです。

テンプレート

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/uikit.min.js"></script>
        <script src="js/uikit-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

筆者評価

追記予定

purecss

グリッドシステムも標準で搭載されている、軽量 CSS フレームワークです。

この軽量なフレームワークは、全てのモジュール・コンポーネントを入れたとしても 3.7KB しかなく、それはサイトスピードにおいて最高のメリッドになります。

再利用可能な、このコンポーネントはあなたのプロジェクトに簡単に実装できます。

メリット

非常に軽量
このフレームワークは実装の段階から軽量になるように最新の注意を払い作成されました。CSS フレームワークで最もハイパフォーマンスな動作を提供します。
カスタマイズ可能
全てのモジュール・コンポーネントを入れたとしても非常に軽快なのにも関わらずさらに軽量化できます。あなたは必要な機能だけをあなたのプロジェクトに実装できます。それは非常に安定的に動作します。
強力なサポート
このフレームワークをサポートしているの、Yahoo です。
プロジェクトを長期量する場合、その事実はあなたの開発に安全をもたらすことでしょう。
既存コンポーネントが存在する
Pure を利用するとき、すでに作成された CSS パーツを利用することができます。難しいことが考えなくていいです。
今すぐあなたのプロジェクトにコピペで実装できます。
学習しやすい
ある程度 CSS と HTML の知識があるひとならば、そこまで難しくないでしょうあ。なぜならば機能があまりなく効率化されているからです。

デメリット

ドキュメント不足
Pure.css は良くも悪くも新しい CSS フレームワークです。
ドキュメントはまだ完全ではなく、有志のブログから参照できることは少ないです。そのため自分の技術スタックと英語力と相談して Pure.CSS を使用するかどうか決めましょう。
コンポーネント不足
もしあなたがある程度用意されているコンポーネントを使用してプロダクトのスタートアップをかけたい場合は、Pure.css は選定対象から外れます。
Pure.css は必要最低限のコンポーネントしか用意されていません。

テンプレート

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
    </head>
    <body>
    </body>
</html>

筆者評価

追記予定

Tachyons

レスポンシブの対応した、軽量で読みやすい CSS フレームワークです。

Tachyonsの開発チームは、この CSS フレームワークの長所としてアクセシビリティが高く再利用性のある CSS コンポーネント開発ができることを挙げています。

このTachyonsフレームワークは非常に軽量であり、ドキュメントも豊富にあるため利用するためのハードルは低いです。

メリッド

豊富なコンポーネント
Tachyonsには、Web アプリケーションの開発を助ける、優れたユーティリティクラスと CSS コンポーネントが含まれています。
利用するための方法を非常に簡単ですぐに利用できます。
再利用性
Tachyonsは再利用性が高くなるように優秀なエンジニアが開発を行っています。もしあなたが様々なところで利用できる CSS コンポーネントを開発したい場合これは選択肢になるでしょう。

デメリット

脆弱な認知度
残念ながらTachyonsはそこまで認知度は高くなく、お世辞にも人気とは言えません。その不人気のせいで必要なバグフィックスのための情報や有効な開発方法を知ることが困難です。

テンプレート

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
    </head>
    <body>
    </body>
</html>

筆者評価

追記予定

Milligram

ベースとなるデザインを作成するための軽量 CSS フレームワークです。

他 CSS とは違い、サイトデザインを無の状態から作成できます。
その結果、高パフォーマンスと圧倒的な生産性を提供します。

メリット

軽量で軽快
Milligram は名前の通りとても軽量です。軽量であり生産性向上のための様々な機能を無料で使えます。また gzip 圧縮することで 2kb という低用量で、ユーザにレスポンスを返します。
自由
Milligram には、デフォルトスタイルがなく無から一から作ります。
そのため、必要な機能の選定もプロジェクトに合わないデザインをプロパティで無理やり変更する必要もありません。オーバーライドによってバグが発生することもありません。
初心者も使いやすい
Milligram は非常にシンプルです。
そのため覚えることは少なく、初心者にもとっつきやすいです。

デメリット

テンプレートなし
他 CSS は優秀なエンジニアが開発している、既成テンプレートが存在するがこの CSS フレームワークはありません。フロントエンド開発に時間を使えない場合このフレームワークは不向きといえます。

テンプレート

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Google Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
        <!-- CSS Reset -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
        <!-- Milligram CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
        <!-- You should properly set the path from the main file. -->
    </head>
    <body>
    </body>
</html>

筆者評価

追記予定

Materialize CSS

Google が提唱するマテリアルデザインは、多くの Web サイトや管理テーマで選択されるデザインパターンです。

Materialize CSS はその優れたマテリアルデザインを作成するための選定対象として有力候補です。

Materialize CSS はマテリアルデザインを作成するために優れた CSS パーツを提供しており、マテリアルデザイン風のアニメーションも備えています。
開発者はマテリアルデザインを作成するための労力をこのフレームワークに一任することで、ユーザーに視覚的にも楽しい Web デザインを提供します。

メリッド

マテリアルデザインをサポート
マテリアルデザインは Google に提唱されてから、急激に数を増やしました。
それは、非常に優れたデザインでユーザビリティに優れたものでした。
Materialize CSS はその優れたデザインパターンを強力にサポートします。
多量の既成コンポーネント
Materialize CSS は、マテリアルデザインの作成をサポートする CSS コンポーネントが大量に存在しています。開発者はそれを使用することで開発期間を短縮することができます。
モバイルデザインのサポート
もちろんモバイルサイトもマテリアルデザインにできます。
ナビゲーションやスワイプ操作などのコンポーネントを使用して、非常に簡単ンに開発できることが保証されています。

デメリット

マテリアルデザインのみのサポート
マテリアルデザイン以外のことには不向きです。
別のフレームワークを選定対象にしましょう。向き不向きがあります。
企業サポートが存在しない
残念なことに企業でこのフレームワークをサポートしていません。
有力な情報はコミュニティーから探す必要があります。

テンプレート

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    　　<!-- Compiled and minified CSS -->
    　　<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
　　    <!-- Compiled and minified JavaScript -->
    　　<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </head>
    <body>
    </body>
</html>

筆者評価

追記予定

Skeleton

Skeleton はとても軽量でな CSS フレームワークで、あなたのの作ろうとしている Web サイトがシンプルかつ軽量なものにしたい場合、最適な選定対象となります。

Skeleton は他のフレームワークのような煩雑さはなく使用方法も運用方法もとてもシンプルで簡単なものになります。

Web サイトの作成になれない初心者開発にとって Skeleton は最良な選択肢になります。

メリット

超軽量
Skeleton を構成するソースコードはわずか 400 行の中で必要最低限なコンポーネントを備えています。そのため非常に軽量で最小のフレームワークといえます。
既成コンポーネント
CSS フレームワークで流行りのコンポーネントは備えており、グリッドシステム、ボタン、タイポグラフィ、リスト、フォームなどを利用できます。

デメリット

大規模または独創的なプロジェクトには向かない
もしあなたが大規模または独創的な Web サイトを作成したい場合は向きません。なぜなら Skeleton は Web サイトを作成するうえで最低限必要なものしか提供していないからです。

テンプレート

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/css/normalize.css" />
    <link rel="stylesheet" href="/css/skeleton.css" />
  </head>
  <body>
    <!-- content -->
  </body>
</html>

筆者評価

追記予定

Tacit

パックマンのようなかわいらしいロゴがトレードマークの Tacit です。

ところであなたのプロジェクトはどのようなデザインパターンで作成する予定でしょうか？

今、流行りのデザインパターンにグラフィックデザインが挙げられます。
もしあなたがグラフィックデザインのサイトを作りたいを思っているなら Tacit を使うと幸せになれます。

グラフィックデザインについて知らないという方も、以下サイトを見てください。
**『グラフィックデザイナーのための参考デザインサイト 16 選のご紹介』
**少しでもいいと感じたら好奇心に任せて Tacti をインストールしましょう。

基本的に使う CSS フレームワークのデザインパターンに寄ってしまいますので、選定する CSS フレームワークをきちんと選びたいところです。

メリット

グラフィックデザインの最高峰
現状グラフィックデザイン専門の CSS フレームワークは存在しません。
Tacit はグラフィックデザインを構築するうえでのノウハウが詰め込まれいます。

デメリット

未成熟
Tacti は最近リリースされた CSS フレームワークです。
そのためサポートも万全ではなく、CSS コンポーネントも万全とは言えません。

テンプレート

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.5.min.css"/>
  </head>
</html>

筆者評価

追記予定

最後に

昨今の開発で CSS フレームワークを使った開発を必須です。
なぜなら素晴らしいデザインを短時間で作成できるからです。
あなたが技術者ならばこのメリッドを全力享受しましょう。

このリストにある以外でも CSS フレームワークは存在しますが。
おすすめを上げるとしたら上記の 10 の CSS フレームワークが存在します。
もし時間があれば他も選定対象として調べてみてもいいかもしれません。

CSS フレームワークにはそれぞれ向き不向きがあり、どこのメリットを取るかはそのプロジェクトと相談して決めなければいけません。

もしあなたがどのプロジェクトに属さずに、個人で開発をする場合は何も考えず Bootstrap5 を使うことをお勧めします。

あなたが最良な CSS フレームワークを選べることを願ってます。

社畜エンジニアがおすすめする2023年トレンドのCSSフレームワーク

CSS フレームワークとは #

Bootstrap #

purecss #

Skeleton #

Tacit #

最後に #

CSS フレームワークとは

Bootstrap

purecss

Skeleton

Tacit

最後に