初めてのCSSフレームワーク
８月になりました。ほんの一ヶ月前まではHTMLもCSSも存在すら知らなかった身ですが、progateを使って基礎の基礎から学習し、つい先ほどHTML＆CSSの学習コース（初級・中級・上級）を終えました。今後は実際に使えるようになるため、道場コースでどんどん実践していきます。
さて、今日のタイトルは「初めてのCSSフレームワーク」です。どうやらwebデザインをする上では先ほど紹介したHTMLやCSSなどのプログラミング言語の他に、このCSSフレームワークの学習が必須なようです。まずはこの言葉がどんなものを指すのかという段階から調べていくことにします。
フレームワークとは［検索］
framework:
1.（建築などの）骨組み、枠組み
2.（組織、概念などの）構成、体制
3. frame of reference（成句）
（weblio調べ）
ということはCSSフレームワークはCSSの骨組みや構成のことでしょうか。うーんわかりづらい！取り敢えずこれはこれと仮定して、次にCSSフレームワークを使うことでどんなメリットやデメリットがあるのかという点を調査します。
＜メリット＞
・作業量が大幅にダウンする
・バグが起こりにくくなる
・骨組みが固定されて複数人で共有・編集がしやすくなる
＜デメリット＞
・フレームワークを覚えなければならない
・簡単にかけてしまうが故仕組みの理解が疎かになる
・自由度が低い
ふむふむ、つまりCSSフレームワークとは「作業を簡単にするための」「CSSの骨組みや構成」のことなのですね。なるほど、わかりません。全くもってイメージがつかないです。もしかしたら、言葉だけで理解しようとすると限界があるのかもしれません。
わからないからとりあえずやってみる
そこで早速ではありますが、数あるCSSフレームワークの中でも有名な「Bootstrap」をダウンロードすることにしました。ブートストラップと読むそうです。
ちなみに私は初めてBootstrapに触れるにあたって、TECHACADEMYmagazineさんのデザイン知識がなくてもOK!Bootstrapの使い方【入門者向け】を参考にしました。
コーディングの練習にはBranketsを使います。
なんで「CSSフレームワーク」なのにHTML様式なんだ！
BootstrapのHPを見て最初に覚えた違和感です。通常、HTMLの開始ダグと終了ダグは＜＞、cssのプロパティは{}で囲みますよね。CSSフレームワークと言うくらいなので、CSSに入力できるよう{}が多用された数字の羅列を扱うのかと思いきや、Bootstrapに載っているのはHTMLのコードばかり。混乱しながらも、HTML様式でこちらのコードを書いていきました。（正しくはコピー＆ペーストをしていっただけなのですが。）
そして出来上がったプレビューがこちらです。
HTMLの入力しかしていないにも関わらず、color指定やbuttonのactionができています。これと全く同じ様式をCSSで書こうとするとかなりの仕事量がかかると思うのですが、こちらのCSSフレームワークに書いてあるコードを使えば一発でwebサイトっぽい要素を追加できるのですね。なるほど、少しずつわかってきたような気がします。
つまり「CSSフレームワーク」って
表なら表のCSSの様式、ボタンならボタンのCSSの様式などをそれぞれまとめ、その全てが機能する任意のHTMLコードを与えたものでしょうか。すごく回りくどい説明になってしまったので、料理で例えてみます。
＜CSSを最初から書いていく場合＞
まずは大豆を洗って煮詰めて発酵して・・・
→自由度は高いけど手間がかかる
＜CSSフレームワークを使う場合＞
水と市販のカット野菜を鍋に入れて市販の合わせ味噌を溶かして・・・
→既に出来上がっているものを調理するだけなので簡単
大豆などの原材料がCSSの要素であり、その原材料を集め都合のいいように加工して、市販用にHTMLでパッキングしたものを、「CSSフレームワーク」とラベリングして売り出しているイメージです。何となく、CSSフレームワークの意味や活用の仕方がイメージできてきました。
このように、今回はふわっとCSSフレームワークについて理解を深めたので、今後さらに活用していきたいと思います。