.NET開発者のためのブログメディア
【Bootstrap3と4を比較】Bootstrap4の新機能と変更点まとめ
BootstrapはWebページ開発で便利なWebフレームワークです。HTML、CSS、JavaScriptといったWeb開発において必要不可欠な開発言語、ボタンやメニューなどの画面で必要な部品、スマホやタブレット用に画面サイズを変更するレスポンシブデザイン機能などが組み込まれています。ここでは、2018年2月にリリースされたBootstrap4について取り上げたいと思います。
- PL
- Bootstrapって本当に便利ツールですよね。簡単におしゃれなWebデザインができますし！
- PM
- そうですよね。Webデザイナーは重宝しているのではないでしょうか。Bootstrap4にバージョンアップしてよりいっそうパワーアップしたので、便利機能などをいくつか紹介していきますね。
目次
Bootstrap4の概要ついて
Bootstrap4の新機能を紹介します。まず、画面で使用できる部品の数が増えました。これは開発者にとっては嬉しいことといえます。また、最も機能で充実した点として、Flexboxを利用できるようになったことが挙げられるでしょう。
Flexboxが利用できるとなると、その名の通りフレキシブル（柔軟性、融通の利く）な画面が簡単に作成できます。Flexboxは今やほとんどのブラウザでサポートされていますので、Bootstrap4を利用した開発ニーズはこれからますます増えることでしょう。
ただし、Bootstrap4はInternet Explorer 9以下がサポートされていないのでIEで開発される場合、注意が必要です。
Bootstrap3から4の変更点まとめ
ここではBootstrap3とBootstrap4の変更点についてまとめてみましたので、ご参考ください。
| 項目 | Bootstrap3 | Bootstrap4 |
|---|---|---|
| 全体 | ||
| リセットCSS | normalize.css | reboot.css |
| CSSプリプロセッサー | Less | Sass |
| サイズ単位 | px | rem と em |
| フォント・サイズ | 14px | 16px |
| グリッド | ||
| 段階 | 4 (xs,sm,md,lg) | 5 (xs,sm,md,lg,xl) |
| 表 | ||
| 背景色と文字色の反転 | × | ○ |
| ヘッダー・スタイル | × | ○ |
| 表のレスポンシブ | ○ | ○ |
| サイドにヘッダー要素 | × | ○ |
| ボタン | ||
| 外枠デザインのボタン | × | ○ |
| サイズ | 4 種類 (xs,sm,標準,lg) | 3 種類 (sm, 標準, lg) |
| テンプレートなど | ||
| ノン・レスポンシブデザイン | ○ | × |
| カード・デザイン | × | ○ |
| パネル・デザイン | ○ | ×（カードに含む） |
| サムネイル | ○ | ×（カードに含む） |
- PL
- Bootstrap4にバージョンアップして、ますますおしゃれな画面が作成できそうですね。
- PM
- Flexboxが使用できるようになったのは、本当に開発者にとってはありがたいことだと思います。Flexboxは、これからのWeb開発のスタンダードになってくるのではないでしょうか。
おしゃれな画面開発のためにBootstrap4を使いこなしましょう
最近のWeb画面はおしゃれな画面が多いです。しかし、自力でHTML、CSS、JavaScriptといった言語を駆使して、ユーザー受けの良い画面を作成しようとすると、かなりの知識と工数が必要になります。Bootstrap4を利用することで、おしゃれな画面を手軽に作成できるようになるため、この機会に試してみてはいかがでしょうか。
