（ウェブデザイナーになりたい（７）から引き続き）「ウェブ開発入門完全攻略コース」もようやく折り返し地点に来ました。

セクション１〜８では、HTMLやCSSの基本を学び、９～１１では、学んだ内容を使って簡単なページを作りました。
そして今回は、CSSの追加項目として、Bootstrapの基本的な使い方を学びました。

Bootstrapとは

Bootstrap（以下「Bs」）は、Webサイトのレイアウトを簡単に作成できるCSSの詰め合わせセット（CSSフレームワーク）です。
要するに「Bsを使えば、誰でも、早く、安く、それなりに整ったページを作れる」ということ。
主なブラウザ（IE除く）に対応、さらにレスポンシブ対応もばっちり。
使い方がいまいち分からない場合は、以下の「Bsチートシート」なども参考になります。

作ってみたもの

先日作ったバンドのWebページとサンプルのWebページのレイアウトが似ていたので、バンドのページをBs版にリニューアルしてみました。

見た目はあまり変わらないものの、驚くべきはCSSの中身。これです。

@charset "utf-8";

body {
  font-family: 'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
}

.title {
  font-family: 'Mansalva', serif;
  font-weight: 400;
  font-style: normal;
}

フォントの指定しかない。htmlのclassの中身は増えたのですが、それでも短過ぎる・・。
敢えていえば、Bs用のクラス名を調べるのが手間かも。でも使っているうちに大体は覚えられそう。

今回のメモ

チートシートを眺めていると、講座では取り扱わなかったカルーセルやカードなど、他にも使ってみたいものがたくさん。
機会があれば、いかにも「Bsをフルに活用しました！」的なページを作成したいなと思います。

講座は次のセクションからJavaScriptに入るのですが、CSSを触り足りない気がするので、CSSに特化した講座を挟もうかと考え中。
さらに、やはりWebページで用いている画像、noteの見出し画像などのデザインや配色に悩むことが多いので、画像デザインと配色の講座も、と言い出すとキリがないですね。学びたいことが多過ぎる・・。