インターネット・アカデミー オフィシャルブログ
About

Bootstrapの最新バージョン「Bootstrap4」の気になる変更点とは?

2016年12月17日

Bootstrapの最新バージョン「Bootstrap4」の気になる変更点とは?

Twitter社が作った有名なCSSフレームワーク、「Bootstrap」。Bootstrap3を使ってサイトを作成している方も多いと思います。Bootstrap3から最新版であるBootstrap4に移行する際は、いくつか大きな変更点がありますので、事前にポイントを踏まえてから移行作業を行いましょう。

インストール方法とオプション

インストールの方法は二種類あります。

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マーケティングについて役立つ情報をご紹介しています。

  • このエントリーをはてなブックマークに追加

現在、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発とインターネット・アカデミーのカリキュラム開発を担当する。

海外支店責任者として、アメリカとインド、日本を行き来する。5年間、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発と普及活動を行ってきた経歴を持つ。

日本の新宿校、渋谷校インストラクター。主にWebマー ケティングとクリエイティブ系の授業を担当。

バンガロール校インストラクター。デジタルマーケティング が専門分野。

Google認定Webマーケティング講座の企画・開発に携わる。「PHPカンファレンス2011」で講演。「PHP公式資格教科書」の執筆など

バンガロール校支店長。Webプロデューサー、インストラクター、エリアマネージャを経て、現在はグローバル展開のビジネスディベロップメントを担当。

「W3C"HTML5 Tour"」での講演や、インド校にてWebデザイナーおよびチーフインストラクターを勤めた経歴を持つ、人気キャリアプロデューサー。

フランスにあるW3CのEUホスト、ERCIM(欧州情報処理数学研究コンソーシアム)に常駐し、Webの研究を行うインド人インストラクター。Webマーケティングに精通している。

テーマテーマ

最新の記事最新の記事

スタッフ別ブログスタッフ別ブログ