Bootstrapの最新バージョン「Bootstrap4」の気になる変更点とは?
2016年12月17日
Twitter社が作った有名なCSSフレームワーク、「Bootstrap」。Bootstrap3を使ってサイトを作成している方も多いと思います。Bootstrap3から最新版であるBootstrap4に移行する際は、いくつか大きな変更点がありますので、事前にポイントを踏まえてから移行作業を行いましょう。
インストール方法とオプション
インストールの方法は二種類あります。
- Bootstrap4の公式サイトからzipファイルをダウンロード
- パッケージマネージャーを使ってインストール
Bower、 NPM、 Meteor、 Composerの四種類のパッケージマネージャーでインストールが可能です。パッケージマネージャーでインストールする場合は、日本語リファレンスの「パッケージマネージャー」の項をご覧ください。 また、インストールの際は様々なオプションが提供されます。必要に応じて使い分けましょう。
「Bootstrap CDN」を使ってBootstrapをサイトに組み込む
Bootstrap CDNはBootstrapのホスティングサービスです。CSSファイルのリンク先をCDNにすることで、ファイル一式をダウンロードすることなくBootstrapをサイトに組み込むことができます。組み込む際は、下記のタグを参考にしてください。利用は無料です。
※ただし、Bootstrap4はこのブログ記事の公開時点でまだCDNに対応していません!利用できるかどうかは、公式サイトでご確認ください。
カスタムビルド
CSSやJavaScriptの一部のみが必要な場合、必要な部分だけを使うために、カスタムビルドを使用できます。「Reboot」「グリッドのみ」「Flexbox」の3種がありますので、必要に応じて使い分けましょう。
Bootstrap4の大きな変更点
Bootstrap3からBootstrap4にグレードアップするにあたり、以下のような変更がありました。
ソースのCSSファイルがLessからSassに変更
デフォルトのCSSコンパイラーがLessからSassに移行されています。
Bootstrap4にはLibsassとRuby Sassの2バージョンのSassが内蔵されており、Gruntfile.jsにてコンパイラーを選択することにより、好きな方でコンパイルできるようになっています。これにより、さらに高速化が実現されました。
CSSで使用する主要な単位がpxからem、remに変更
フォントやコンポーネントのサイズ指定が、pxからemもしくはremによるサイズ指定へ変更されています。
pxはピクセルを単位とする絶対指定で、emは親要素を基準にした相対指定の単位です。Media Queriesも、pxからemに移行しています。
また、Bootstrap 4のタイポグラフィでは、remが使用されています。remはルート要素(典型的にはhtml要素)に対する、相対的なフォントサイズの単位で、要素の出現位置に依らず、一定のフォントサイズになる点が強みです。
グローバルのフォントサイズが14pxから16pxに変更
今までと比べると大きめに表示されるようになりました。
サイズを変更したい場合は、「bootstrap.css」またはSassファイル「_variables.scss」に記述されているベースサイズを編集することで、全体のフォントサイズを変えることが可能です。
html { font-size: 16px; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; }
グリッドシステムの改良
サイトの横幅を均等に分けるガイドラインのことを「グリッド」と呼びます。そのグリッドに沿ってコンテンツを配置することで、パソコンやスマートフォンなど画面幅が異なってもレイアウトを組み替えやすくなるのです。その仕組みを「グリッドシステム」と呼びます。
グリッドシステムは基本的には今までと同じようにHTMLで利用でき、classもBootstrap3と同じです。ただし、Bootstrap4のグリッドシステムでは、スクリーンサイズ用のclass名が変更になっています。サイズの単位がpxではなく、emに変更されていますので、注意してくださいね。
リセットCSSの変更
Bootstrap3ではリセットCSSにnormalize.cssが使用されていましたが、Bootstrap4ではreboot.cssに変更されています。
Bootstrap4の主な新しい機能
Cards
Wells、 Panelsのコンポーネントが廃止となり、Cardsという新しいコンポーネントに統合されました。多様な背景カラーを持ち、画像やリンク、タイトル、テキストも内包できるので、グリッドの中にコンテンツを入れるような場合に利用できます。
Flexbox
UIレイアウトのために最適化されたボックスモデルです。要素のサイズが不明であったり、ダイナミックに変化するものであっても、柔軟なレイアウトを実現できます。この機能は現状デフォルトではOFFにされているので、「_variables.scss」ファイルにある「$enable-flex」の値を「True」にして有効化する必要があります。
まとめ
変更点に注意するとともに、新しい機能を早速使いこなして、Webデザインをより自由に楽しみたいですね。
これを機に、本格的にWebデザインを基本から学んで、将来の仕事としてみませんか。 インターネット・アカデミーでは、Bootstrap基礎講座を開講しています。Bootstrapを使ったレスポンシブWebデザインのサイト制作に興味がある方は、ぜひご受講をご検討くださいね。
関連講座
本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。