
目次
あらすじ
ウェブサイトやウェブアプリ開発の際に、効率的かつ大幅に時間を短縮してくれるものがこのフレームワークです。
世界では当たり前のように使用されており、今やその種類はかなりの数になってきています。
今回はそんなフレームワークに関して、おすすめのものを10個選んでみました。
それぞれの特徴について詳しく紹介していきます。
フレームワークとは
まずは「フレームワークとは何ぞや」といった方に向けて説明していきたいと思います。
(フレームワークについて知ってるよー、といった方は読み飛ばしてもらって大丈夫です。)
フレームワークとは、どんなプログラミング言語にも共通して言えることですが、よりコーディングをスムーズかつ効率的にさせてくれるものです。
今回はCSSについてのフレームワークですので、CSSを元に話していこうと思います。
通常CSSを記述するとき、自分でidやらclassを定義し、HTMLタグ内にそれぞれを記述していき、そのidやclassに基づいて、CSSのスタイルシート内に装飾したい要素(色や配置、ボーダーなど)のコーディングをしていきます。
通常のコーディング
しかし、このフレームワークというのは、すでにidやclassがあらかじめ用意されており、そのidやclassを装飾したいHTML要素に記述していくだけなのです。
どういうことかというと、
フレームワークを使ったコーディング
すでに定義されているfw-boldクラスをdivタグ内に挿入することで文字が太くなっており、cssには何も記述していないことがわかります。
(Bootstrap使用)
といったように作業の負担を減らしてくれ、さらにはCSSの記述ミスなどを防ぐことができます。
Bootstrap
世界で最も人気があるフレームワークBootstrap(ブートストラップ)。
常にアップデートしているので、最新のものをいつでも使うことができます。
ブートストラップ独自のアイコンや、レイアウトのテーマも使用することがでます。(レイアウトテーマは有料のものもあり)
レスポンシブに対応していますので、わざわざスマホ用にコーディングする必要がありません。
日本語対応: | あり |
URL: | https://getbootstrap.jp |
価格: | 無料(テーマなどは有料のものもあります。) |
使用方法: | インストールとHTMLに記述の2通り |
Zurb Foundation
多くの大手企業が使用していることでも有名なZurb foundation。
- Adobe
- Amazon
- Disney
- Samsung
- The North Face
といったそうそうたる大企業がZurb foundationを使っていることから、その利便性が伝わってきます。
Zurb foundationが独自にプラグインを提供しており、
- テンプレート
- アイコン
- レスポンシブザイン
- SVGソーシャルアイコン
といったものを利用できることも大きな特徴の一つです。
日本語対応: | なし |
URL: | https://getbootstrap.jp |
価格: | 無料 |
使用方法: | インストールとHTMLに記述の2通り |
Materialize CSS
嬉しい日本語対応ありです。
バックエンドとも互換性があるのでアプリ開発者の間では非常に人気の高いフレームワークです。
日本語対応: | あり |
URL: | https://materializecss.com/ |
価格: | 無料 |
使用方法: | インストールとHTMLに記述の2通り |
Bulma
BootstrapやZurb Foundationに次いで世界中で人気のあるフレームワークの一つです。
Cssのflex-boxをモデルとし、Saasによって作成されています。
日本語対応: | なし |
URL: | https://bulma.io |
価格: | 無料 |
使用方法: | インストールとHTMLに記述の2通り |
Semantic UI
React.jsなどのjavascriptのフレームワークとも非常に相性がいいフレームワークです。
ウェブアプリ開発者の間では非常に人気の高いフレームワークです。
日本語対応もありです。
日本語対応: | あり |
URL: | https://semantic-ui.com/ |
価格: | 無料 |
使用方法: | インストールとHTMLに記述の2通り |
UIKIT
シンプルかつおしゃれなレイアウトを作ることができます。
初心者でも比較的簡単に使用することができるのでおすすめです。
デザインにこだわりがある方はUI kitがベストです。
日本語対応: | なし |
URL: | https://getuikit.com/ |
価格: | 無料 |
使用方法: | インストールとHTMLに記述の2通り |
Tailwind
Bootstrapなどとは少し異なり、全体的なカスタマイズではなくコンポーネント(要素)のカスタマイズが容易にできるフレームワークです。
細かいこだわりがある方はぜひ。
日本語対応: | なし |
URL: | https://tailwindcss.com |
価格: | 無料 |
使用方法: | インストールとHTMLに記述の2通り |
Milligram
Miligramは簡単に設定ができる上、デフォルトのスタイルイングがないので、他のフレームワークのようにスタイルをカスタマイズする際に自分のスタイルシートで上書きをする必要がありません。
名前の通り、ファイルを圧縮した際は、2KB(キロバイト)といった低容量で使用することが可能です。
日本語対応: | なし |
URL: | https://milligram.io |
価格: | 無料 |
使用方法: | インストールとHTMLに記述の2通り |
Pure
2014年にYahooによって、非常に軽量かつレスポンシブ対応のフレームワークとして開発されました。
Normalize.cssと呼ばれる技術に基づいて作られています。
シンプルな構成となっているため、初心者でも比較的簡単に利用することができます。
日本語対応: | なし |
URL: | https://purecss.io/ |
価格: | 無料 |
使用方法: | インストールとHTMLに記述の2通り |
Base
Baseは軽量かつ最小限のコードによって作成されているフレームワークです。
コード自体はシンプルに作成されていますが、非常に力強いフレームワークであることは間違いないです。
日本語対応: | なし |
URL: | https://getbase.org |
価格: | 無料 |
使用方法: | インストールとHTMLに記述の2通り |
まとめ
いかがだったでしょうか。
世界中にはこれ以外にもたくさんcssのフレームワークがありますが、今回はその中でも特に人気があったり、使いやすいものを10個選んでみました。
日本語対応があまり無いのがネックですが、基本的にフレームワークを使いこなすことができる方にとっては問題なく使えるはずです。
ぜひ一度この10個の中からどれか一つを試してみてはいかがでしょうか。