案件評判
FoundationとはZURB社によって開発されたWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。カスタマイズ性が高いことからプロ向けのCSSフレームワークとして認知されております。この記事ではFoundationを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説をしていきます。
FoundationとはZURB社によって開発されたWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。「フロントエンドコードをより速く、より良く開発する」といった目的の元に誕生しました。数あるCSSフレームワークの中でも高い人気を集めており「Bootstrap」に次ぐほどと言われております。
人気の理由としてカスタマイズ性が高くデザインが大幅に高速化できるということが挙げられます。またどのデバイスでも見栄えのする美しい応答性の高いWebサイト、アプリ、電子メールなどを簡単に設計できます。信頼できる実績として「Facebook」「Yahoo!」などの世界的な有名企業もFoundationを利用しております。
CSSとはWebページの見た目・デザインを調整するためのスタイルシート言語です。正式名称は『Cascading Style Sheets（カスケーディング・スタイル・シート）』であり、それぞれの頭文字をとって略称した呼び名で親しまれております。CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。具体的には文字のサイズや色、レイアウトなどの表示スタイルなど細かな編集まで手が届くようになったのです。CSSはファイル名に拡張子の『.CSS』を付けることで、コンピューターにCSSファイルとして認識されます。
フロントエンドとはWebサービス利用者の目に触れる部分を表します。よってフロントエンドとはWebサービスの利用者が目に触れる部分のシステムを開発することです。フロントエンドの開発を行うエンジニアを『フロントエンドエンジニア』と呼びます。システム業界では”見える部分を作る人”と呼ばれております。主な業務内容としてWebブラウザ上で見ることが出来るページや機能の作成など挙げられます。その際に利用される技術要素としてHTML、CSS、JavaScriptなどがあります。フロントエンド側がサーバーにプログラム実行のリクエストをすることで。サーバから必要な情報を受け取りWeb上にリクエストした内容が表示されます。
フロントエンジニアが習得するべき最低限の技術について解説している記事はこちら＞＞
Foundationの読み方は『ファウンデイション』です。Foundationの名前の由来は調査をしたところ出てきませんでした。英単語としてのFoundationの意味には「財団」「根拠」「下地（化粧品としての）」などが挙げられます。あくまで推測ですがWebサイトの下地となるような意味が込められている可能性があります。
Foundationは2011年にZURB社の開発によって誕生しました。GitHubに記録された最初のマイルストーンは2011年10月の『Foundation 2.0』のリリース記録です。このときZURB社はMITライセンスの下で初めてオープンソースとしてリリースしたようです。その後2012年6月に『Foundation 3.0』2013年2月『Foundation 4.0』2013年11月『Foundation 5.0』と短いスパンでナンバーシリーズをアップデートしております。CSSフレームワークの中で知名度は「Bootstrap」に次ぐ地位を築いております。2021年現在最新バージョンは『Foundation 6.7』です。バージョンアップについて簡単に以下の年表にまとめておりますのでご覧ください。
| 年代 | 内容 |
| 2011年9月 | 『Foundation 1.0』 |
| 2011年10月 | 『Foundation 2.0』 |
| 2012年6月 | 『Foundation 3.0』 |
| 2013年2月 | 『Foundation 4.0』 |
| 2013年11月 | 『Foundation 5.0』 |
| 2015年11月 | 『Foundation 6.0』 |
| 2021年9月 | 『Foundation 6.7.3』 |
Foundationの特徴を見ていきましょう。
Foundationはカスタマイズ性が高いという特徴があります。Bootstrapを含む多くのCSSフレームワークはカスタマイズをすることなく提供されたまま使用するのが主流です。Foundationはビルドをカスタマイズして、特定の要素を含めたり削除、列のサイズ、色、フォントサイズなどを定義するなどが可能です。
Foundationはセマンティックという特徴があります。Foundationの有用性と速度を犠牲にすることなく、最もクリーンなマークアップを実現することができます。
Foundationは大規模なプロジェクトにも対応できるという特徴があります。「Facebook」「Yahoo!」などの世界的な有名企業もFoundationを利用している実績があることから信頼もおけます。そして上述の通りカスタマイズ性も高いことからプロ向けのCSSフレームワークとして認知されております。
Foundation以外のCSSフレームワークを見ていきましょう。
BootstrapとはWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。Twitter社が2011年に開発し、フロントエンドフレームワークの中でも最も人気を集めております。BootstrapではWebページの基本機能として使用される「メニュー」「ボタン」「フォーム」などのパーツをテンプレートで用意しております。見た目を調整するCSSファイルや動きをつけるJavascriptファイルが既に作成されており、それらの定義を呼び出すだけでデザインやUIの知識がなくとも、動きのあるリッチなWebサイトを素早く簡単に制作することができます。
MaterializeとはGoogleが提唱するマテリアルデザインに基づくWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。ユーザーエクスペリエンス重視しマテリアルデザインの要素と原則を利用することで、ユーザーにより多くのフィードバックを提供するコンポーネントとアニメーションを組み込んだフレームワークを実現しております。同じCSSフレームワークの中でも最も人気を集める「Bootstrap」と見た目も操作方法も似ているのでBootstrapの使用経験がある方は簡単に使いこなせます。デザイン性が高いだけでなくアニメーションやトランジションも兼ね備えており多くのユーザーから人気を集めております。
Materializeの公式サイトはこちら＞＞
Materializeの概要・特徴などの基礎知識について解説している記事はこちら＞＞
BulmaとはWebサイト及びWebアプリケーションを作成するためのCSSフレームワークです。モバイルファーストでレスポンシブWebインターフェイスを構築するために簡単に組み合わせることができ、CSSのみで構成されているので早いことで人気を集めております。Flexboxをベースにしており「Font Awesome」「Sass」に対応しています。同じCSSフレームワークの中でも最も人気を集める「Bootstrap」と比較してもシンプルでかつ軽量で早いという特徴があります。モダンなデザインも豊富なことからカスタマイズ無しでもデザイン性の高いWebサイトが作れます。
Foundationを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説させていただきました。Foundationを一言で表すと『カスタマイズ性が高くデザインが大幅に高速化できるCSSフレームワーク』です。特徴として「セマンティック」「大規模なプロジェクトにも対応」などが挙げられます。Foundationについてこの記事に書かれている最低限の内容は理解をしておくようにしましょう。
Swiftフレームワーク人気どころ７選をご紹介！そ…
Hamlを理解する！初心者でも分かる歴史、特徴、基…
Rustを理解する！初心者でも分かる歴史、特徴、基…
Javaを理解する！初心者でも分かる…
Windows10/11アカウント作…
フリーランスのHTMLコーダー（HT…
フリーランスのSwiftエンジニアの…
フリーランスのUnityエンジニア（…
IaaSを理解する！意味、メリット・…
PaaSを理解する！意味や種類、メリ…
PMPを理解する！意味、受験資格、試…