Bootstrap4の使い方と新機能「Card」について解説

- システム
エンジニア - Bootstrap4の使い方が知りたいです。
- プロジェクト
マネージャー - こちらの記事で解説していきますので、順を追って見ていきましょう。
Bootstrap4の使い方を紹介します
今回は、Bootstrap4の使い方を紹介します。
ここでは、
・Bootstrap4を使えるようにする方法
・Bootstrap4を導入するとどうなる?
・Bootstrap4の新機能「Card」
・Bootstrap4の新機能「5段階のグリッド・レイアウト」
について紹介します。
Bootstrap4に興味のある方はぜひご覧ください。
Bootstrapを使えるようにする方法
Bootstrap4を使えるようにするには、2種類の方法があります。必要なファイル群をダウンロードして使う方法と、CDNを使ってリンクを記述する方法です。ここでは、手軽に利用できるCDNを利用します。
以下のようにベースのHTMLを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title></title> </head> <body> Your code here! <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html> |
Bootstrap4を導入するとどうなる?
Bootstrapを使うと、デザインが統一され、洗練されたデザインになります。テーブルとボタンでサンプルを紹介します。Bootstrap4を使わない場合と、使った場合の違いを見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table> <caption>table</caption> <tr><th>name</th><th>age</th><th>email</th></tr> <tr><td>taro</td><td>24</td><td>taro@email.com</td></tr> <tr><td>jiro</td><td>18</td><td>jiro@email.com</td></tr> <tr><td>saburo</td><td>37</td><td>saburo@email.com</td></tr> </table> <hr> <table class="table table-striped table-bordered"> <caption>Bootstrapのtable</caption> <tr><th>name</th><th>age</th><th>email</th></tr> <tr><td>taro</td><td>24</td><td>taro@email.com</td></tr> <tr><td>jiro</td><td>18</td><td>jiro@email.com</td></tr> <tr><td>saburo</td><td>37</td><td>saburo@email.com</td></tr> </table> <hr> normal button <button type="button">Button</button> <hr> Bootstrap button <button type="button" class="btn btn-primary">Button</button> |
実行結果は以下のようになります。
See the Pen
bootstrap4_3 by kskumd (@kskumd)
on CodePen.
上側のtableはBootstrapを使っていませんので、味気ないtableになっています。下側のtableはBootstrapを使っているので、デザイン性の高いtableになっています。
Bootstrap4の新機能「Card」
Bootstrap4の新機能「Card」について紹介します。Cardは以下のようなコンテナです。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="card" style="width: 18rem;"> <div class="card-header"> Card Header </div> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is card text.This is card text.This is card text.This is card text.This is card text.This is card text.This is card text.This is card text.</p> <button type="button" class="btn btn-primary">Button</button> </div> <div class="card-footer"> Card Footer </div> </div> |
実行結果は以下のようになります。
See the Pen
bootstrap4_2 by kskumd (@kskumd)
on CodePen.
Bootstrap4の新機能「5段階のグリッド・レイアウト」
Bootstrap4で、グリッド・レイアウトが5段階になりました(Bootstrap3は4段階)。グリッド・レイアウトの使い方を紹介します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container-fluid"> <div class="row"> <div class="col-sm border border-primary">A</div> <div class="col-sm border border-primary">B</div> <div class="col-sm border border-primary">C</div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-2 border border-primary">A</div> <div class="col-sm-8 border border-primary">B</div> <div class="col-sm-2 border border-primary">C</div> </div> </div> |
実行結果は以下のようになります。画面の横幅を狭めてみてください。
下記は埋め込みURLのため、横幅を広げても変動しないので、自分でHTMLを書いてみてください。
上側の例では、画面サイズが sm 以上の時は 3分割となり、それより小さくなると縦方向に並ぶことが分かります。
下側の例では、画面サイズが sm 以上の時は 2:8:2 の割合となり、それより小さくなると縦方向に並ぶことが分かります。
See the Pen
bootstrap4_1 by kskumd (@kskumd)
on CodePen.
- システム
エンジニア - CDNを使ってリンクを記述すれば手軽にBootstrap4を利用することができるのですね。
- プロジェクト
マネージャー - Bootstrap4を使ってデザイン性の高いWebページを作成しましょう。
まとめ
いかがでしたでしょうか。Bootstrap4の導入方法について紹介しました。また、Bootstrap4の新機能について紹介しました。
Bootstrapを使うことで、簡単にデザイン性の高いWebページになります。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)