htmlとcssを組み合わせてブラウザ上でコンテンツを表示します。目的のスタイルをhtmlとcssで実現できる組み合わせを自分で見つけるのは、困難です。cssフレームワークを使うと、完成したcssが使用でき、それを利用するためのhtmlの記述方法が紹介されているので、うまく利用すると効率的にWebページを作成することができます。
高性能なcssフレームワークでは、cssが大きくなる傾向があります。そのため、パソコンでは、問題がなくても、携帯端末では、動作が緩慢になる可能性があります。特にcmsで使用する場合は、注意が必要です。一方、cssジェネレーターでは、使用しているcssのみを抽出した小さなcssが利用できます。
メニューやボタンなど、基本的な部品をどのようにhtmlとcssで表現するかよくわからない段階では、cssフレームワークを利用して、htmlとcssの表記方法を学ぶ際にも活用できます。また、jQueryも活用して機能を実現しているcssフレームワークもあるので、その場合、jQueryの活用方法も合わせて理解できます。
cssフレームワークを使わずにWebページを作成する場合でも、cssフレームワークに使われているhtmlとcss、jQueryの使い方は参考になります。
Sass, LESS
cssフレームワークでは、Sass, LESSに対応しているものがあります。Sass, LESSは、cssを生成するためのプリプロセサです。関数が利用できることで、cssでは、重複して記述する必要がある内容を自動で生成できるメリットがあります。SassやLESSを理解しないと機能の全てを利用できない場合もあるので、注意する必要があります。学習のための情報が、少ないですが、高度な利用をするには覚える必要がありそうです。
代表的なcssフレームワーク
１からcssを学んで利用するよりは、簡単になりますが、それでもcssフレームワークを使用するのは、簡単とは言えません。また、それぞれのcssフレームワーク間に互換性はないので、どれか１つのcssフレームワークに絞って学習する必要があります。
Bootstrap
人気のある高機能なcssフレームワークです。Bootstrapを利用したテンプレートも多数公開されています。
最近バージョンが4に上がったので、バージョン4で使い始めることをお勧めします。また、cssフレームワークは、部品の集合体です。まずは、Bootstrapを利用したテンプレートを使って、ホームページやブログを作成、公開し、使いながら覚えていくのが良いのではないでしょうか。
Bootstrapを利用したテンプレート
Bootstrap 4 ドキュメントの和訳
もともとのドキュメントは、英語で記述されています。頻繁に参照する可能性が高いので、英語に堪能でなければ、翻訳して利用したほうが作業が効率的になると思われます。
Bootstrap 4 を使ってテンプレートを作成する
すぐには、習得できないので、ホームページやブログは、既存のテンプレートを使用して作成、運用し、それとは別に、自分で、テンプレートを作成することで、メニューやレイアウトの表現方法を学んでいきましょう。基本的な部品をhtml, css, jQueryの組み合わせで作成するパターンが理解できれば、cssテンプレートに依存せずに、自由にwebサイトをデザインできます。
他にもいろいろなcssテンプレートが存在します。
- UIkit
軽量CSSのフレームワーク
- Zurb Foundation
高機能なcssフレームワーク
- Pure.css
CSSで書かれた、軽量なモジュールベースのフレームワーク
htmlフレームワーク
HTML5 Boilerplate
HTML5のフレームワークと呼ばれるテンプレートの一種です。Webサイトの要素がまとめて提供されています。そのため、html5に準拠したWebサイトとして提供されています。この提供されたファイル群を参考に、自分のWebサイトを構築します。
Initializr
http://www.initializr.com/
