CSSフレームワーク

Table of Contents

CSS3
css3

Webは進化が早く、新しいブラウザ、新しいデバイス(ディスクトップPCやタブレット、モバイル)もどんどん出てきます。

せっかく時間をかけてホームページを制作したのに、数か月後には『表示が崩れてる。。。』ということもよく聞きます。

また、CSSリセットをかけてコメントも書かずにコーディングしたCSSを修正するのは至難の業。

そこで思い描いたWebサイトをだれでも簡単に作れるように、『フレームワーク』というものが出てきました。

WordPressのようなCMSを設計するためのPHPフレームワークが存在します。

WebデザインをするためのCSSフレームワークがあります。

これらはかなりの数があり、どれがベストだと選ぶだけでも時間がかかります。

ここでは

  1. 多くの人が使っていて、無料(オープンソース)
  2. コミュニティがある、Tipsが豊富
  3. 常にバージョンアップされている

を条件にピックアップしました。

それでもなお進化し続けているので来年この記事を読むと、すでに別のCSSフレームワークが上位に出ているかもしれませんが、ご承知ください。

1.Bootstrap(ブートストラップ)

Bootstrap

ブートストラップ(Bootstrap)は、早く、簡単なWeb開発のために作られた無料のフロントエンドフレームワーク。

Twitterでマーク・オットーとジェイコブ・ソーントンによって開発され、2011年にリリース、2014年GitHubのNo.1プロジェクト、今なお絶大な人気を誇るフレームワーク。

特徴

  • HTMLとCSSの基本的な知識を持つ人なら誰でも使い始めることができる
  • レスポンシブ
  • モバイルファースト
  • Chrome、Firefox、Edge、Safari、Operaと互換性がある
  • CDNが使える
CDN(Content Delivery Network):Webサイトを訪問するとキャッシュから読み込まれるため、読み込み時間が短縮されます。ほとんどの CDN は、ユーザーがファイルを要求すると、最も近いサーバーからファイルが提供されることを確認し、読み込み時間を短縮します。

欠点

  • 上書きが難しい:多くのCSSデザインを用意しているため、カスタマイズ手法を検索して探すのに時間を要します。CSSがきっちりルール化されており、広範囲で使用されているため、『!important』を多用する可能性があります。
  • WEBデザインの単調化:Webサイトの構築を早くするために、用意されたデザインの色を変えるくらいの変更しかしていないWebサイトが多いため、みんな同じようなデザインのホームページが出来上がっています。クリエイティブなデザイナーと一緒にデザイン設計ができなければ、ほかのサイトと同じものになってしまいます。
  • jQuery に依存:Bootstrap4まではjQqueryに依存しているため、ほかのJavascriptフレームワーク(ReactVue)と一緒に使うのはかなり難しかったです。でもBootstrap5からは依存関係がなくなりました。
  • 重い:以下のCSSフレームワークに比べると重たいです。使う分だけ個別に設定、他のフレームワークと比べると重く、モジュール形式ではありません。

2.Foundation(ファウンディション)

Foundation

ファウンディション(Foundation)は、2011年にZURBのプロジェクトとして登場。フロントエンドコードを早く、よくするために、開発ツールとして完全機能しているため、CSSデザイナー向けというよりは、開発者に最適なフレームワークです。

実際には、ファウンディション(Foundation)は単なるCSSフレームワークではなく、フロントエンド開発ツールのファミリーという位置づけです。これらのツールは、一緒に使用することも、完全に独立して使用することもできます。

プログラミングができないWebデザイナーには敷居が高いです。

特徴

  • モジュール形式:ブートストラップ(Bootstrap)とは違い、モジュール式で柔軟で多くの要素を使うことができ、最小限のスタイルで簡単にカスタマイズが可能。モバイルファースト。
  • Sass:純粋なCSSではなく、Sassです。CSSではなくSassということから、大規模なWebサイト向きと言えます。でもCSSも用意されているため、難しく考えなくても大丈夫です。
  • コンポーネントの充実:高機能ボタン、水平・垂直タブ、ナビ、ラベル、印刷機能、など、必要なものはほぼそろっているのですぐにWebサイトを作ることができます。
  • 人気:Adobe、HP、Amazonなど有名企業のサイトはFaoundationを利用しています。
  • 軽い:CSSで60KB、Javascriptで84KB。A11Y、ARIAなどアクセシビリティを強化しています。
Accessible Rich Internet Applications (ARIA) :
Web コンテンツや Web アプリケーションを、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義。ナビゲーションの目印、JavaScript ウィジェット、フォームのヒントやエラーメッセージ、動的なコンテンツ更新などをアクセシブルにすること。

欠点

  • とっかかりが難しい:オプションが他のフレームワークに比べ膨大。機能も豊富。したがい、何ができるのか理解するまで少し時間がかかる。でもわかってしまえば開発スピードは速い。
  • Javascript 依存:jQueryまたはZeptoを使用して、Javascriptに依存しています。ZeptoはjQueryと同じ構文で動作するライブラリですが、Zeptoは、あまり知られていないライブラリです。

3.Bulma(ブルマ)

Bulma

Bulmaはモバイルファースト、モダン、Flexboxで構築されたJavascript不要のフレームワークです。なおかつ、CSSのスキルが不要でWebサイトを構築できる、としています。

シンプルな構文、最小限デザインが高く評価されています。

自分もSOHOでワンページデザインのホームページを納品するとき、1時間以内で構築でき、『はや!』と思いました。

もともとBootstrapから派生しているため、一度でもBootstrapを使ったことがある人であればサクッと導入できます。

特徴:

  • 軽くてわかりやすいCSS:CSSがとにかく見やすい。何のためのCSSなのかコードだけで理解できます。
  • 開発者向け:Bulmaのクリエイターは開発者に優れたものを提供することを目指しています。そのことを念頭に置いているため、使いやすく覚えやすい命名規則になっています。
  • Javascript なし:CSS のみなので、VueReact などの Javascript フレームワークとスムーズに統合できます。Pureと同じような使い方がベストかもしれません。

欠点

  • スタイル:Bootstrapの場合と同じく、他Webサイトと似たサイトになってしまう可能性があります。
  • 機能が少ない:ほかのCSSフレームワークと比べると細かなコンポーネントが少ない。

4.テイルウインドCSS(Tailwind CSS)

Tailwind

「ほとんどの CSS フレームワークは、多すぎる」ということで作られたこのフレームワークは新しい考え方がベース。すでにあるスタイルをカスタマイズするのではなく、独自のスタイルをより速く実装できるため、デザイナー向きフレームワークではないでしょうか。

一度実装したCSSを色や形を変えるとき、CSSファイルとフレームワークドキュメントを片手に変更しますが、テイルウインドCSS(Tailwind CSS)はHTML(PHP)ファイルのみで修正ができます。

特徴

  • utility class(Atomic CSS):CSSプロパティ1つ1つに対し用意されているため、ほぼ100%のプロパティを使える。たとえば、余白が 1 (小幅)、中央揃えのテキスト、黒の背景の要素が表示されます。<div class="m-1 text-center bg-black">...</div>
  • 既存スタイルの上書きなし:コンポーネント等は付属なし。したがい、既存のスタイルの上書きがない。カスタム デザインの生産性が向上。
  • 独自のカスタムコンポーネント:Tailwind CSSにはあらかじめ設計されたコンポーネントが含まれていなくても、カスタム コンポーネントを作成できます。
  • HTMLでレスポンシブ:CSSでメディアクエリを大量に処理するのではなく、様々なブレークポイントに条件付きで適用できる。

欠点

  • 学習が必要:バックエンドプログラマーであればとっつきやすいのかもしれませんが、フロントエンドでデザイナーよりのCSSデザイナーにはしくみを十分に理解する必要があります。ドキュメントを読んでも、自身も十分に説明ができません。各種ツールが必要なため、少し難しいです。
  • HTMLソースが見にくい:とうぜんCSSファイルではなく、HTMLファイルに記述していくので、HTMLソースが長く、見にくい。HTMLは簡単なソースコードだけに、一目見るだけでWebサイトが想像できますが、テイルウインドCSS(Tailwind CSS)を使うとソースが汚く見えてしまいます。

5.ユーアイキット(UIkit)

UIkit

UIKitは、必要な機能のみをインポートできるモジュラー式フロントエンド フレームワークです。

WordPress と Joomla をテーマにした有料のページビルダーがあります。年間60ドルで使えます。

名前の通り、ユーザーインタフェース用なので、WebサイトのCSSフレームワークとして比較すること自体、間違っているかも。個人的には機能が少ないからこそ理解しやすいフレームワークでした。

特徴

  • コンポーネントが多い:UIKit には多数のコンポーネントが含まれています。追加機能のためにJavascriptを探す必要はないと思います。
  • 拡張可能:UIKit は、LESS または SASS プリプロセッサを使用して、簡単にカスタマイズおよび拡張できます。
  • カスタマイザー:CSSデザインをリアルタイムでカスタマイズし、SASS または LESS 変数をプロジェクトにコピーできるWeb ベースのカスタマイザーがあります。

欠点

  • 人気:高速、軽量、機能豊富という理由があるのにいまいち人気がありません。なので学習リソースが少ないです。

6.ミリグラム(Milligram)

Milligram

その名の通り、2KBの圧縮での8.8KBの超軽量フレームワーク。normalize.cssと使います。簡単に、軽く使いたいなら真っ先に選びたいフレームワーク。

特徴

  • デフォルトなし:ほかのフレームワークと違ってデフォルトスタイルを持っていないため、色さえ選べばシンプルなデザイン構築が可能。さらに上書きする必要がありません。
  • 簡単:ドキュメントをサラッと読むだけで使いこなせます。

欠点

  • テンプレートなし:デフォルトデザインもなければテンプレートもないので、テンプレートベースでのWebサイト構築には向きません。
  • 参考Webサイト:ほかのフレームワークに比べるとコミュニティやTipsが少ないです。でもシンプルなので必要ないと思います。

7.ピュア(Pure)

pure

Pureは、Yahooが開発したオープンソースで2013年からスタート。今なおじわじわと人気のあるフレームワークです。CSSソースも使いやすく、フラットデザインやニュース系Webサイトで本領発揮します。

とくにすべてのモジュールが使用されても圧縮して3.7 KBしかない、超軽量フレームワークはNormalize.cssに基づいて構築されています。

特徴

  • 安定:慎重に作られたソースのため、軽くて軽快なハイパフォーマンスフレームワーク。
  • ボタン:フラットデザインのため、CSSに行を追加して外観をカスタマイズする方が簡単である、という設計になっています。
  • Bootstrapとの連携:BootstrapやjQueryと連携できるようになっています。
  • モジュール:ボタンやフォーム、グリッドを個々で取り込むことができます。
  • 安全性:コミュニティプロジェクトとは異なり、PureはYahooによってサポートされており、このフレームワークを使うことは安全性が高いということになります。

欠点

  • シンプルが故の欠点:Pureは、フレームワークを利用するために独自のデザインを作成する必要があります。
  • 機能が少ない:コンポーネント機能が他のフレームワークに比べると少ないので、ほかのJSと組み合わせるなど、工夫が必要です。

ベストCSSフレームワークはどれ?

Web制作会社がホームページ制作を依頼されたときに使うフレームワークとしてこの記事を書きました。

つまり、モバイルデバイスのインターフェース制作とは方向性が違います。

1つのCSSフレームワークで数年使い続ける、という使い方より、ユーザーニーズに沿ったフレームワークを使うことをお勧めします。(その分勉強する必要がありますが。。。)

どれか1つのフレームワークでWebサイトを構築した経験があるならば、各CSSフレームワークドキュメントを読んで1時間、実践で数時間勉強すればすぐ身につくところがこのCSSフレームワークの利点。

ブートストラップ(Bootstrap)、 ブルマ(Bulma)materializecssなど、より多くの機能を含むコンポーネントが用意されているので、経験の浅いフロントエンドコーダーに適しています。

ユーティリティ クラスのみを提供しているテイルウインド(Tailwind)ミリグラム(Milligram)ピュア(Pure)などのスタイルを提供しないフレームワークは、経験豊富なコーダーに向いています。

ユーザーが求めるWebサイト

ブートストラップ(Bootstrap)ファンデーション(Foundation)は、大規模なコミュニティがプロジェクトをサポートし、新しいアイデアが常にクラウドソーシングされるため、安全な運用が期待できます。

でも数ページしかないコーポレートサイトで、ニュース記事しか更新しないようなサイトには無駄かもしれません。

学校や公共事業のように派手さや個性的なデザインを必要とない、安定して記事を読んでもらう、という目的のWebサイトを作るときは、ピュア(Pure)が向いています。

jQueryを多用し、常に最新の技術をWebサイトで表現したり、更新頻度が高かったりするようなサイトにはブルマ(Bulma)のような軽量フレームワークというように、それぞれの特徴を事前に調べ、使い分けていけるのがベストではないでしょうか。

google 広告