iawd-bs-eye001

Bootstrap4 Alpha3速攻ガイド

2016年7月27日にBootstrap4は1つバージョンを上げてAlpha3になりました。Bootstrap4で変わったところ+Alpha3で追加された機能を解説します。

1.Lessを廃止、Sassに統一

Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.(原文より)

Bootstrap4からは、CSSジェネレータのサポートはSassのみとなります。もともとはLessでの開発から始まったBootstrapですが、おそらくSassでの開発者が多く汎用性が高いからなのでしょう。Bootstrap4からは、正式にSassのみとなったようです。Sassをフルに利用して、Bootstrap3よもカスタマズができる要素がかなり増えました。


2.グリッドシステムの改良

Improved grid system. We’ve added a new grid tier to better target mobile devices and completely overhauled our semantic mixins.(原文より)

xl (Extra Large) という4つ目の新しいブレークポイントが追加されました。またこれに伴ない下表のように今までの3つのブレイクポイントの位置も変更になっています。デフォルトである1rem=16pxで換算した場合、比較表は以下のようになります。

名称 ver3 ver4(rem) ver4(px)
xs ≥0px ≥0rem ≥0px
sm ≥750px ≥34rem ≥544px
md ≥970px ≥48rem ≥768px
xl ≥75rem ≥1200px

3.flexboxの採用

Opt-in flexbox support is here. The future is now—switch a boolean variable and recompile your CSS to take advantage of a flexbox-based grid system and components.(原文より)

$enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tableやfloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。


4.Cardスタイルの採用

Dropped wells, thumbnails, and panels for cards. Cards are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better.(原文より)

Bootstra3までの、well, thumbnail, panel のコンポーネントが廃止され、card というコンポーネントに統一されました。


5.Rebootというモジュールの追加

Consolidated all our HTML resets into a new module, Reboot. Reboot steps in where Normalize.css stops, giving you more opinionated resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file.(原文より)

CSSリセットには、Bootstrap3ではnormalize.cssが使われていましたが、より柔軟なオプション設定ができるよう、Reboot(_reboot.scss)という新しいモジュールが作られました。normalize.cssを読み込み後にreboot.scssを読み込むようになっていて、Rebootによって細かい調整、sass変数によるカスタマイズが行える様になっています。


6.新しいカスタマイズオプションの追加

Brand new customization options. Instead of relegating style embellishments like gradients, transitions, shadows, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.(原文より)

Bootstrap3ではそれぞれのコンポーネントの装飾を独立したスタイルシートとして扱っていましたが、グラデーション、トランジション、影などはSassの変数で集中的に編集できるようになりました。


7.IE8のサポート終了とrem, emへ変更

Dropped IE8 support and moved to rem and em units. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. Pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.(原文より)

IE8が正式にサポート対象から外れました。これによってCSSで定義する値は、em, remが使用できるようになっため、基本の値が px から em に変更されました。IE8以前のサポートが必要な場合は、引き続きBootstrap3を使っほしいとのことです。

emは、font-size = 1em とする単位です。 font-size: 16px なら 1em=16px です。

remは、root-emの略で、ルート要素()に指定されている font-sizeが1remとなります。


8.JavaScript pluginsの書き直し

Rewrote all our JavaScript plugins. Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements. They also now come with UMD support, generic teardown methods, option type checking, and tons more.(原文より)

全てのJSファイルがES6(次期JavaScriptの仕様)で書き直され、UMD (Universal Module Definition)をサポートし、一般的な分解方法、オプションの型チェックなどがなされています。


9.ツールチップとポップバーの見直し

Improved auto-placement of tooltips and popovers thanks to the help of a tool called Tether.(原文より)

Tetherと呼ばれるツールによって、ツールチップとポップバーが改善されました。


10.Markdownによるドキュメントの書き直し

Improved documentation. We rewrote it all in Markdown and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. Improved search is also on it’s way.(原文より)

Markdown記法でドキュメントをサイトのHTMLをすべて書き直し、コードスニペットを合理化するためにいくつかの便利なプラグインを追加しました。得に改良された検索機能は、Bootstrap3では CSS と Components に分かれていたドキュメントが1つになったことで、横断して検索が可能になりました。


11.その他の改善点

And tons more! Custom form controls, margin and padding classes, new utility classes, and more have also been included.(原文より)

フォーム関連の強化としてカスタムフォームコントロールを、その他マージンとパディングを設定するためのクラスやBootstrap3にはなかった新しいユーティリティクラスが追加されました。

なるほど!と思ったら、すぐシェア♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

東京Webデザイナーズ交流会/10月のテーマ

WordPressで有料課金型会員制サイトを構築する方法

検索してもなかなか情報のない「会員制サイトを構築法」を解説します。