Bootstrap4概要

知らない人も多い??かもしれないので、まずは概要説明から。
BootstrapはTwitter社の開発したグリッドシステムを採用したCSSフレームワーク。
現在最新バージョンが4となっている。

グリッドシステムとは、画面を12に分割し、そのうち利用する横列(カラム)を数値指定する方式。
分かりやすく言うと、行が無限にあって、列が12列のエクセルを想像してもらえばいい。

グリッドシステムについては今後詳しく説明するとして、今回は概要なのでその他の特筆すべき点をいくつか。

■機能面
・グリッドシステム(float)
・グリッドシステム(flexbox)
・Sass

グリッドシステムはfloatによる従来のレイアウト方法とCSS3から採用されたflexboxを利用する方法がある。
IE8、9などにも対応させたいならfloatでのレイアウトになる。
記述方法はあまり変わらないので、floatでも問題ないが、要素量による浮遊化があるので、clearは必須となる。

SassはCSSプリプロセッサーと呼ばれるもので、CSSを構造化して記述できるもの。
具体的には、ネストや制御構文が利用できる。
もちろんSassのままではHTMLは理解できないので、最終的にはコンパイルを行いCSS化を行う。

■メリット
Twitter社が多分これでもか!と言わんばかりにデバックをしてくれている。
レスポンシブ化が簡単に短時間に実装できる

■デメリット
カラムレイアウトをdiv要素で行うため、divタグまみれになる。
独自CSSのクラス、ID名とbootstrapで利用しているものとの競合チェック。

急ぎのレスポンシブ案件で、多少ソースが乱れてもと言うときには最適かもしれません。
最近そういう案件が多いので、多様してしまっている。。

コメントを書く