CSS フレームワーク

HTML,CSS の基礎は固まってきただろうか。
ここからは少し楽する方法を学ぼう。

CSS フレームワークとは

簡単にいうと Web ページのパーツ集のようなもの。
短期間で Web サイトを実装したい時や、レスポンシブ対応する時などに役立つ。

CSS フレームワークには様々な種類が公開されているが、大きく分けて２種類ある。

1. しっかりスタイリングするための CSS フレームワーク
2. 最低限のデザインを整えるための CSS フレームワーク

時と場合に応じてどのタイプが適しているか考える力も必要だ。

Shinonome では Twitter 社が開発した最も有名なBootstrapを使うことが多い。
フロントエンド コースでも Bootstrap がどのような使い方や働きをするのか学んでいこう。
日々新しいバージョンが公開されているが、このコースでは 4.6 で学ぶ。調べるときは、バージョンの違いも意識しよう。
英語のドキュメントだが、基本プログラミングの世界は英語のドキュメントが多いので、今のうちに慣れておこう。

この章の課題

最低限これらを読もう。
他にどんなコンポーネントが用意されているのかも見てみよう。
完全に理解するためには JavaScript や JQuery の知識が必要になってくる。今回は

• どんなことができるか
• どのように使うか

を最低限理解して、課題の中で使えそうなところがあったら適宜読み直すようにしよう。
理解が難しいところがあれば、外部の解説記事等も活用しよう。

• introduction
• layout
• grid system
• alerts

注意

意図せずして bootstrap で使われているクラス名を設定してしまった場合、bootstrap のコンポーネントのスタイルが当たってしまう。
自分が書いた css 以外が当たっていたら、そのクラス名が bootstrap で使われているものではないか疑うようにしよう。
（スタイルがどのスタイルシートに由来するのかは開発者ツールで調べられるので、活用しよう）

読み終わったら