HTML・CSS 妻の学習記録

CSSフレームワークって何?

title

教本に書いてあるBootstrapっていうのを入れてみたんだけど、このCSSフレームワークって何?

よく使うCSSのテンプレートとか機能をワンセットにしてくれてるようなものかな。使いたいデザインによってはBootstrapじゃないものを使うときもあるよ。

じゃあCSSフレームワークってBootstrapだけじゃないの?

そもそもフレームワークって何?

いつもの通り、日本語に訳してみましょう。

意味としては「枠組み」とか「土台」です。

つまりCSSの枠組みとか土台。

CSSは過去にどこかで書いた通り、HTMLなどのマークアップ言語で記述された文書の見栄えを表現するための言語です。

そのため、見栄えを決めるためのある程度の機能を備えた枠組み、というものと覚えていてよいかと思います。

CSSの説明についてはこちらから。

CSSフレームワークには冒頭に書いたように汎用的な(よく使う)CSSの機能やデザインのテンプレートが入っています。

それぞれ機能やデザインに特徴があって、作りたいWebサイトの性質に合わせて選ぶことがあります。

CSSフレームワークを使うメリットは?

CSSフレームワークを使わないときれいなWebサイトが作れないのでしょうか?

答えとしてはそういうわけではありません。

自分で最初からCSSを組み上げて好きな色、形のWebサイトを作ることも可能です。

CSSフレームワークを使うメリットとしては、プログラミングにおいてコードを書く量を少なくすることができることが挙げられます。

自分で書くとなるとちょっと時間がかかるCSSも好きなデザインのCSSフレームワークを組み込んでHTMLから呼び出すことですぐに使えるようになります。

また予約サイトでよく見かけるカレンダーやLoading中のプログレスバーなど動きをつけたい、複雑な機能を持たせたいようなものもすぐに使えるようになります。

CSSフレームワークを使うデメリットは?

メリットだけではありません。

CSSフレームワークを使うことがデメリットになる場合もあります。

個人的な意見として大雑把に言うと…

痒いところに手が届かない

用意されているテンプレートを使ってより複雑な動きやデザインを追加したい、という要望もあったりします。

CSSフレームワーク自体は中身のプログラムを編集してカスタマイズすることは可能ですが、依存関係や中身をしっかり理解していないとどこかでデザインが崩れてしまう、動かなくなることもあります。

中身を理解する(調べる)時間を考えると、結果的に最初から自分たちで作った方が早い場合もあります。

また、CSSフレームワークの中身を見ていただければわかるのですが、自分が使わないデザインや機能もまとめて組み込んでしまうので、膨大なソースコードの中から使用しているものだけを探すのに苦労します。

ものによっては覚えることが増える

上記にも関連しますが、フレームワークごとに書き方のお作法が違うことが多いため、CSSフレームワークごとに勉強しなければいけないことがあります。

(CSSの基礎知識は習得している前提ですが)

CSSフレームワークはどういうときに使えばいいの?

個人でWebサイトを作るにしても、企業案件などでWebサイト制作の仕事で使うにしても、デザインが使うCSSフレームワークの範疇を超えない場合、CSSフレームワークのテンプレート通りに作ってよい場合は便利です。(最小限のデザインのカスタマイズはアリだと思いますが。)

企業案件ではデザインを決める段階で顧客へデザインの要望をしっかり確認した上で、CSSフレームワークをガリガリカスタマイズする必要がなければ使ってもよいのでは、と思います。

CSSフレームワークはどんなものを選べばいいの?

色々なサイトで各CSSフレームワークの特徴を紹介しているので、一つ一つの紹介はまた別の機会に。

個人的には日本で使う範囲においては「多くの人が使っていて、日本語で説明しているサイトがたくさんある」ものを選ぶとよいと思います。(Bootstrapとか)

理由としては、好みのデザインのテンプレートが用意されていたとしても、行き詰まったときにインターネットで調べ物をしようとしても、使っている人や同じように行き詰まった人がノウハウを紹介しているケースが少ないと、公式サイトの英語の解説を読む必要があるからです。 英語が得意で公式のサイトをイチから読むことが苦にならない人は当てはまらないですが。

便利だけど用途によって使い分けが必要ってことね。

パパっとWebサイトを作ってみたいっていう人はまずは使ってみてもいいと思うよ。

-HTML・CSS, 妻の学習記録