こしあん日記 ~写真と猫とサッカーと~

子供たちの記録用にはじめたが、思春期になり写真を撮らせてもらえなくなる。写真と愛猫とサッカーが中心のブログです。

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で利用しているものとの競合チェック。

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