「Bootstrap 4」が正式リリース――IE10以降、iOS 7以降、Android 5.0以降に対応：Sass、Flexbox、npm

オープンソースCSSフレームワークの最新版「Bootstrap 4」が正式リリースされた。CSSメタ言語を従来の「LESS」から「Sass」へ変更、Flexboxがデフォルトで有効になるなど、アーキテクチャの変更も行われている。

[＠IT]

印刷

隕九ｋPost

Shareシェア

はてなブックマーク

SharePocket Button

　2018年1月18日（米国時間）、オープンソースCSSフレームワーク「Bootstrap」の最新バージョン「Bootstrap 4」が正式リリースされた。最新バージョンでは、CSSメタ言語を従来の「LESS」（Leaner CSS）から「Sass」（Syntactically Awesome Stylesheets）へ変更したり、CSSのFlexboxをデフォルトで有効にしたりするという2つの主要なアーキテクチャ変更を中心にさまざまな変更が行われている。

Bootstrap

　Bootstrapチームは、変更の狙いについて、「新しいCSSプロパティや、依存関係の低減、モダンなブラウザで採用されている新技術を推進することで、Web開発コミュニティーの前進を着実に後押しすることを目指した」と説明している。

　Bootstrapは、CSSファイルやJavaScriptのスクリプトファイル、フォントなどから成る。統一されたデザインでPCとモバイルデバイスの両方に対応したWebページの制作によく利用されている。Bootstrap 4は、2015年8月から2017年1月にかけてリリースされた6つのα版、2017年8月から12月にかけてリリースされた3つのβ版を経て正式版となった。

Bootstrap 3からBootstrap 4への主な変更点

　Bootstrap 3（以下、v3）からBootstrap 4（以下、v4）への主な変更点は以下の通り。

ブラウザサポート

• Internet Explorer（IE）8、IE9、iOS 6のサポートを終了。v4はIE10以降、iOS 7以降のみをサポート
• Android 5.0（Lollipop）のブラウザとWebViewを正式にサポート。それ以前のバージョンのAndroidブラウザとWebViewは、非公式サポートのまま

全体的な変更

• CSSメタ言語に、従来のLESSに代わってSassを採用
• Flexboxがデフォルトで有効になるようにアーキテクチャを変更
• ビルドシステムを見直し、Gruntの代わりにnpmスクリプトを採用
• CSSの基本単位を「px」から「rem」に変更。ただし、ピクセルは引き続きメディアクエリやグリッドの挙動に使用
• グローバルフォントサイズを14pxから16pxに拡大
• グリッド層を変更し、5番目の選択肢（576px以下の小型デバイスに対応）を追加するとともに、これらのクラスからxsインフィックスを削除
• オプションの独立したテーマをSCSS変数（「$enable-gradients: true」など）による構成可能なオプションに置き換え
• Bootstrapの非レスポンシブな使用のサポートを終了
• オンラインCustomizerを廃止し、幅広いセットアップドキュメントやカスタマイズされたビルドに対応
• 一般的なCSSプロパティ値のペアやマージン／パディングスペーシングショートカットのために、数十の新しいユーティリティークラスを追加

グリッドシステム

• Flexboxに移行
  • グリッドmixinと事前定義済みクラスでFlexboxをサポート
  • Flexboxの一環として、垂直ぞろえ／水平ぞろえ用のクラスをサポート
• グリッドクラス名と新しいグリッド層をアップデート
• グリッドサイズ、mixin、変数をアップデート

コンポーネント

• 「panel」「thumbnails」「well」コンポーネントを廃止し、新しい包括的なコンポーネントである「card」に置き換え
• アイコンフォントの「Glyphicons」を廃止
• Affix jQueryプラグインを廃止
• 「pager」コンポーネントを廃止。基本的に、わずかしかカスタマイズされないボタンであるため
• ほぼ全てのコンポーネントがリファクタリングされ、詳細過ぎる子セレクタの代わりに、ネストされていないクラスセレクタが多用されるようになった

新しいサンプル

　v4の正式版では、ほぼ全てのサンプル（Examples）に変更が加えられている。古くなった幾つかのサンプルが削除され、新しいものが追加された。

「Bootstrap 4」のブログから引用

ドキュメント

　ドキュメントも全面的に更新されている。主な変更点は以下の通り。

• 編集しやすいように、全てのドキュメントがMarkdown（HTMLではなく）で書き直されている
• Bootstrapの変数、mixinなどを最大限活用するため、通常のCSSからSCSSに移行した

次のリリースとテーマのアップデート

　次のリリースはv4.1となり、一連の細かな新機能やユーティリティー、レスポンシブフォントサイズなどに重点が置かれる見通しだ。

　また、Bootstrapのテーマは2018年第1四半期に大幅にアップデートされる予定だ。これまでより拡充され、10ブランドの新しいテーマが加わることになっている。