Bootstrap4の変更点まとめ

WEBデザイン

オープンソースのCSSフレームワークである最新版Bootstrapの「Bootstrap4」が2018年1月18日に正式リリースされた。約5年ぶりのメジャーアップデートだ。更に先日、AdobeのDreamweaverでもBootstrap4のサポートを開始したので、そろそろ満を持してBootstrap3からBootstrap4へ移行する時期かもしれない。

とりあえずBootstrapのおさらいと、Bootstrap3からBootstrap4になって変更になった点をまとめておく。

スポンサーリンク

Bootstrapとは

今現在、世界で最も利用されている有名なCSSのフレームワークです。簡単に言うと複雑なCSSの知識がなくても簡単にシャレた感じのレスポンシブデザインのWEBサイトが作れるので一気に普及しました。

もともとTwitter社が「Twitter Bootstrap」という名前で開発していたものをオープンソースにして公開したという優れものです。

そのBootstrapが、Bootstrap3から約5年ぶりにメジャーアップデートしてBootstrap4という名前で2018年1月18日に正式リリースされました。

■Bootstrap公式サイト
https://getbootstrap.com/

Bootstrap公式配布サイト

スポンサーリンク

Bootstrap4の主な変更点

グリッドシステムの変更

Bootstrapといえばグリッドシステムです。そのクラスの数が従来の4つから一つ増えて5つになりました。

最小のブレークポイント(575px)が追加され、更に.col-xs-*というクラス名が廃止されて.col-*と.col-xl-*という名称が新設されたことにより、ブラウザの横幅(width)ごとの各クラス名がズレることになります。

ver.\px ~575px 576~767px 768~991px 992~1199px 1200px~
Bootstrap3   .col-xs-* .col-sm-* .col-md-* .col-lg-*
Bootstrap4 .col-* .col-sm-* .col-md-* .col-lg-* .col-xl-*

※更に従来のFloatレイアウトからFlexboxレイアウトに変更されました。
Bootstrap4ではFlexboxがデフォルトで有効になっています。それに伴い、垂直および水平配置クラスのサポートも含まれています。

【※感想】
ブレークポイントの追加はいいですがブレークポイントごとのクラス名が変わっているのが微妙ですね。
いっそのこと従来のブレークポイントは踏襲した上でクラスの数を6つにして、最小(.col-*)と最大(.col-xl-*)だけ追加という「無印、xs、sm、md、lg、xl」のわかりやすい6パターンで良かった気がしないでもないですが、まあそうしなかった理由があるのでしょう・・・。

Flexboxは便利なのでナイスです!

グローバルフォントサイズの変更

グローバルフォントサイズが従来の14pxから16pxへ変更されました。
更に、基本の単位が「px」から「rem」及び「em」に変更されています。

「px」:ピクセル数による絶対値
「rem」 :基本サイズ(グローバルフォントサイズ)のrootからの相対値
「em 」:親要素からの相対値

【※感想】
これはいいことですね。

CSSメタ言語の変更

CSSのメタ言語(プリプロセッサ)がLESSからSassに変更になりました。

【※感想】
これはサクッとWEBサイトを作りたい一般ユーザにはあまり関係ないかもしれないです。

コンポーネントの廃止

Panels、Thumbnails、Wellsが廃止されて新しく「Cards」に統一

今後は廃止された従来の「Panels、Thumbnails、Wells」に関しては全て「Cards」を利用して代用することになります。

【※感想】
シンプルでいいですね。

Glyphiconsアイコンフォントの廃止

アイコンは自分で選択して導入するという流れに変更。今後は下記のような様々なアイコンフォントを自分のお好みで導入する。

■Glyphiconsの上級バージョン
■GitHub Octicons
■Font Awesome
■Open Iconic

【※感想】
今までもGlyphiconsでは物足りない場合は他のアイコンを利用していたのでこれもいい感じです。

その他の変更点

その他のコンポーネントも細かな部分で変更や改良が行われているので、下記のBootstrap4移行ガイドを見て詳細を確認したほうが良いです。

■Bootstrap4移行ガイド
http://cccabinet.jpn.org/bootstrap4/

【※感想】
移行ガイドを見るといろいろと便利になってて正直ワクワクします。

スポンサーリンク

まとめ

Bootstrap4に移行する際に注意する一番大きな点は、やはりグリッドシステムのブレークポイントの部分です。

最小のブレークポイントが新設されて、更に名前(クラス名)が変更になっていることにより、従来のクラス名を一つ大きなクラス名に変更する必要があります。
※例:xs→sm、sm→md、md→lg、lg→xl

あとはFlexboxに関する件とフォントサイズ、あと廃止されたコンポーネントの「Panels、Thumbnails、Wells」を「Cards」に変更することくらい。

それ以外に関してはBootstrap4の追加機能によるメリットのほうがはるかに大きそうなので、そろそろ移行する時期ですね。

 

というわけでまとめ完了です!

あとは移行のみ!頑張りましょう!