目次
・そもそもフレームワークって何？
・CSSフレームワークを使うメリット・デメリット
・基本的な利用方法
・代表的なCSSフレームワーク5選
– Bootstrap
– Foundation
– Pure.css
– Semantic UI
– Material-UI
・まとめ
そもそもCSSフレームワークって何？
フレームワーク自体は一般的な機能をまとめたものをユーザーが自分の要件に合うように加筆・修正・上書きなどを行い特定の機能などを持たせることが出来るベースとなるもの。
という考えらしい。文字にすると小難しい考えに感じますね。(ヾﾉ･∀･`)ﾑﾘﾑﾘ
では、CSSフレームワークとは？
簡単にいうと、普段cssでレイアウトやデザインを行いますが、このCSSフレームワークを利用するとhtmlタグに特定のclassをつけたりすると、思い通りのレイアウトになったりボタンが装飾されたり、テキストが中央寄せになったりします。
凄いですね！！これだけでも作業時間の短縮ができそうです。
CSSフレームワークを使うメリット・デメリット
メリット
コーディングルールの統一化
何人かでコーディングをするような製作の場合、人それぞれに癖があるため、どうしてもコーディングルールがバラバラになるといったことが考えられますが、フレームワークを使うことでHTMLタグにつけるclassやCSSのルールが統一されるといったメリットが挙げられます。
作業時間の短縮
ある程度、コンポーネントが初めから揃っているので、CSSでスタイルをあてる手間がはぶけます。
メンテナンス性の向上
コーディングルールがある程度決まっているので保守性にすぐれています。
あとからの制作した人物以外が修正や拡張などするときにもフレームワークのルールさえ知っていれば短時間で修正等が行うことができます。
デメリット
class名が長くなり可読性が落ちる
大体のCSSフレームワークでマルチクラスを採用しているため、PCのときは３カラムで、タブレットのときは2カラムにして、モバイルのときは1カラムなどと指定すると結構な長さのclass名になってしまいます。
思いもよらないところでcssのスタイルがあたってしまう
CSSフレームワークは汎用的なclass名を使用していることが多いので、気付かずに使ってしまっていると表示確認をした際にあれ？おかしいなということに遭遇します。
デザインが似たものになってしまう
既存のコンポーネントをそのまま使用していると、どうしても同じCSSフレームワークを使っている他サイトと同じような雰囲気になってしまうことも場合があります。
基本的な利用方法
- 利用したいフレームワークのサイトより一式をダウンロードします。。ほとんどのサイトがわかりやすい位置にDownloadわかりやすい位置にボタンを配置しているので迷わないはずです。
- 落としてきたファイル一式の中に含まれるcssを
1
で読み込ませます。 - 各フレームワークのDocumentに沿ったグリッドシステムを利用する。
代表的なフレームワーク5選
Bootstrap
https://v4-alpha.getbootstrap.com/
CSSフレームワークといえば、Bootstrapというくらい有名なフレームワークです。
twitter社で開発されたフレームワークです。
名前は聞いたことがある方も多いのでは。
最新バージョンは4.0.0になっています。
旧バージョンからの変更点はコチラのcoliss様のサイトでわかりやすく説明しておられます。
http://coliss.com/articles/build-websites/operation/work/migrate-from-bootstrap3-to-bootstrap4.html
Foundation
こちらも人気の高いCSSフレームワークのZURB社の「Foundation」。
WordPressのテンプレートに多く使われていたり、有名企業がコーポレートサイトで使用しているようですね。
Pure.css
yahoo!が開発されたCSSフレームワークです。
BootstrapやFoundationと比べると軽量です。
ですが、必要十分な機能は備わっています。
Semantic UI
Semanticの名の通り、class名に意味を持たせてわかりやすくなっています。
このスタイルにするときのclass名はなんだっけ？と調べる必要も少なく、学習コストも低いCSSフレームワークと言われています。
Material-UI
マテリアルデザインでサイトを作成したい方にうってつけのフレームワークとなっているMaterial-UI。
Googleが提唱するMaterial Designを踏襲したデザインのフレームワークになっています。
まとめ
全部入りのBootstrapのようなフレームワークと必要最低限の装備の軽量フレームワークに分かれてきている感じがします。
自分の作りたいサイトや要件に合ったデザインや機能によって選択すると思われますが、上記に挙げたフレームワーク以外にもたくさん種類がありますので、
是非とも自身の目的にあったCSSフレームワークを探してみてはいかがでしょうか。
