CSSフレームワークを使って簡単にサイトをオシャレにしよう！！
htmlやcssを勉強してとりあえずサイトを作ろうとしても、デザインがうまくいかない時にcssフレームワークを使うとデザインのセンスがない人でもオシャレなサイトが作れます。
cssフレームワークとは
自分でCSSを書かなくても、誰かが書いてくれた物を使っちゃおうって感じです。
例えば、今まではHTMLの方でclass名を指定して、stylesheetの方でそのクラスのcssを書いていたと思うのですが、このフレームワークは逆に誰かが書いたcssに合わせるためにclass名を指定してあげるイメージです。
普段
普通はこのようなdivにデザインを当てるときは
こんな感じでdivのclass名であるboxに対してcssを書きますよね
結果はこんな感じ
CSSフレームワーク使用時
CSSフレームワークを使用する概念は、このように元から用意されているcssを選んでHTMLの方のclass名を変更するイメージです。
box_blueが使いたいと思ったらHTMLのクラス名を"box_blue"に変更してあげれば良いのです。
変更後
結果
cssフレームワークを使用するイメージはこんな感じ
じゃあどうやってcssフレームワークを使うのか
今回はcssフレームワークの一つであるBootstrapの使い方について説明します
実はめちゃくちゃ簡単で、BootstrapのサイトのURLをhtmlファイルのheaderの中に貼るだけでできます。
まずBootstrapの公式サイトに飛びます。こちら https://getbootstrap.com/
するとこんなページにいくと思います。次にGet startedのボタンを押してください。
するとこのようなページに飛ぶと思います。この画像の真ん中らへんのCSSの下にあるリンクをコピーして自分が製作したいHTMLファイルのheaderの中にコピーするだけです。
あとは自分がデザインを入れたい物のClass名を合わせるだけなのですごく簡単にオシャレなデザインを使うことができます。どんなclass名があるかは自分で調べてください笑
Bootstrapをローカルに保存して行う方法もあるのですが、それについてはまた今度、、
