14.Bootstrapってなんだろう？　～CSSフレームワーク～

Bootstrapとは

CSS フレームワークの１つです。

フレームワーク？？

一言でいうと、

「デザインのテンプレート集」

です。

テンプレート集？

普段、CSSを用いてデザインをする場合、

CSSでクラスに対して、プロパティ、バリューを設定して

HTMLタグにクラスを書く。

それを、必要な分だけ。

そんな常識を覆すのが「Bootstrap」

用意済みのテンプレートを使用して、

時間短縮できるのです。

どんなメリットがあるの？

Bootstrapはデザインのテンプレート集といいました。

テンプレートを利用する、それはつまり

CSSを書かなくて良い！

大事なことなのでもう一度言います。

CSSを書かなくて良い！

そんなバカな…と私は思いましたが、事実だったのです。ｌ

どうやって使うの？

HTMLにBootstrapを利用する記述を書く。

HTMLタグのクラスに、Bootstrapで定義済みのクラスを設定する。

これだけです。

例えば、

div要素にmargin-bottomを付けたい場合

とするだけで、マージンが設定されます。

いまいち、凄さがわからないんだけど？

テキストを中央寄せ、文字太さを太めに、マージンボトムを設定したい。

通常なら

CSSでは

.test{

text-align : center;

font-weight : bold;

margin-bottom : 10px;

}

HTMLでは

これがBootstrapを利用して同じデザインをすると

１行で終了です。

必要なところに定義済みのクラスを書いていくだけので、

コーディングの速度が段違いです。

奥が深い

用意されているCSSがとても多いです。

興味が湧いた方はぜひ調べてみて下さい。

今日のまとめ

Bootstrapはデザインのテンプレート集
HTMLのタグに定義済みのクラスを書くだけ
コーディングの速度が段違い

本日は、Bootstrapについて書きました。

こうした便利な仕組みは積極的に使いたいなと感じます。

ではまた。

web制作のしおり

日々の学習をアウトプットします。