トップ
ライブラリ/Framework/CMS
Bootstrap
Bootstrapは、UIまで手が回らないエンジニアにうれしい「CSSやJavaScript」のライブラリです。デザイン面のすぐれた豊富なテンプレートに加え、デバイスやブラウザ依存を吸収してくれます。この記事ではBootstrapの入門知識からBootstrap4の管理画面用のテンプレートの利用まで解説していきます。
最終的にはすぐれたデザインのテンプレートを使いこなしたいですが、少々知識がないとテンプレートのカスタマイズが難しいと思います。 そこでHTML、CSS、JavaScriptのおさらいから入り、管理画面を想定したサンプルを作りながら、bootstrapの入門知識を解説していきたいと思います。
この記事の目次です。
2. HTML、CSS、JavaScript、jQueryの入門知識
4. bootstrap実践1(Hello Bootstrap)
7. bootstrap4の管理画面のテンプレートの利用方法
bootstrapとは、UIまで手が回らないエンジニアにうれしい「HTML、CSS、およびJSを使用して開発するためのオープンソースのツールキット」です。
Sassの変数とmixin、レスポンシブグリッドシステム、豊富なビルド済みコンポーネント、およびjQuery上に構築された強力なプラグインを使用して、アイデアをすばやくプロトタイプ作成したり、アプリケーション全体のUIが構築できます。
bootstrapについて見ていく前にHTML、CSS、JavaScript、jQueryの入門知識を見ていきます。
ホームページなどのページはHTML/CSSを記述して表示します。HTMLは構造をCSSはデザインを決めます。この記事では、HTMLと、右寄せなどCSSの入門知識を解説しています。
JavaScriptとは、IEやChrome、FirefoxなどWebブラウザで動かせるプログラミング言語です。 プロトタイプ式のオブジェクト指向で、 Javaなどの一般的なオブジェクト指向のプログラミング言語と異なるオブジェクト指向言語となっています。
jQueryとは、ブラウザ用のJavaScriptライブラリです。 特にブラウザに依存しないオープンソースのセレクタが特徴です。 セレクタを使用したCSSやHTMLタグのDOM操作などJavaScriptコードをそのまま書くより簡単にコードが記述できます。
bootstrapは「https://getbootstrap.com/」からダウンロードできます。またBootstrapCDNから直接ソースで取り込んで利用できます。
「Hello Bootstrap!!」を表示するサンプルを作りながら、「viewport」、「bootstrap.min.css」の取り込みについて解説していきます。 なお、ダウンロードしたファイルにはたくさんファイルがありますが、入門ということでシンプルに「bootstrap.min.css」のみ使います。
まずは以下のような「Hello Bootstrap!!」と表示するコードを表示してみます。
/test └─sample.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello Bootstrap!!</title>
</head>
<body>
Hello Bootstrap!!
</body>
</html>
bootstrapは使用していませんが、bootstrapの基本として上記のような「viewport」を定義します。 「viewport」は、PC向けサイトをスマホで表示すると、文字などが小さすぎて閲覧しづらくなる問題を回避する指定です。
「bootstrap.min.css」を取り込むことでフォントがきれいになります。
/test │ sample.html └─css bootstrap.min.css
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello Bootstrap!!</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
Hello Bootstrap!!
</body>
</html>
CSSファイルはheadタグの中で取り込む取り込みます。 「bootstrap.min.css」を取り込むことでデフォルトのスタイルがbootstrap仕様に替わります。
今度はログインフォームの作成を目指しながら、Bootstrapの実践知識を補足していきます。
まずはログインフォームのHTMLを見ていきます。 「bootstrap.min.css」を取り込んだだけですが、素よりきれいですね。
/test │ sample.html ├─css │ bootstrap.min.css └─img account-icon.png
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ログイン</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <form> <h1><img src="img/account-icon.png" alt="ログイン"/></h1> <p><input type="email" placeholder="メールアドレス" required autofocus></p> <p><input type="password" placeholder="パスワード" required></p> <p><a href="#">パスワードをお忘れの場合</a></p> <p><button type="submit">ログイン</button></p> </form> </body> </html>
まだ「bootstrap.min.css」を取り込んだだけです。 account-icon.pngは自作したものです。
今度はボタンをカスタマイズして青いボタンに変更していきます。
/test │ sample.html ├─css │ bootstrap.min.css └─img account-icon.png
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form>
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button class="btn btn-primary" type="submit">ログイン</button></p>
</form>
</body>
</html>
bootstrapで青いボタンを表示するにはclass属性に「btn btn-primary」を指定します。
今度はログインフォームを水平方向の中央に寄せていきます。
/test │ sample.html ├─css │ bootstrap.min.css └─img account-icon.png
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form class="text-center">
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button class="btn btn-primary" type="submit">ログイン</button></p>
</form>
</body>
</html>
あるブロック内で左右水平方向の中央に寄せたい場合はclass属性に「text-center」を指定します。
今度はログインフォームを垂直方向に中央に寄せていきます。
/test │ sample.html ├─css │ bootstrap.min.css └─img account-icon.png
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ログイン</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> html { height: 100%; margin: 0 auto; padding: 0; display: table; } body { min-height: 100%; margin: 0 auto; padding: 0; display: table-cell; vertical-align: middle; } </style> </head> <body> <form class="text-center"> <h1><img src="img/account-icon.png" alt="ログイン"/></h1> <p><input type="email" placeholder="メールアドレス" required autofocus></p> <p><input type="password" placeholder="パスワード" required></p> <p><a href="#">パスワードをお忘れの場合</a></p> <p><button class="btn btn-primary" type="submit">ログイン</button></p> </form> </body> </html>
bootstrapでの画面の垂直方向に中央寄せする方法は見当たりませんでした。 独自のスタイルを適用することでかゆい所は解決できます。
今度はログインフォームにカード形式の枠をつけていきます。
/test │ sample.html ├─css │ bootstrap.min.css └─img account-icon.png
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ログイン</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> html { height: 100%; margin: 0 auto; padding: 0; display: table; } body { min-height: 100%; margin: 0 auto; padding: 0; display: table-cell; vertical-align: middle; } </style> </head> <body> <form class="text-center card"> <div class="card-body"> <h1 class="card-title"><img src="img/account-icon.png" alt="ログイン"/></h1> <p class="card-text"><input type="email" placeholder="メールアドレス" required autofocus></p> <p class="card-text"><input type="password" placeholder="パスワード" required></p> <p class="card-text"><a href="#">パスワードをお忘れの場合</a></p> <p class="card-text"><button class="btn btn-primary" type="submit">ログイン</button></p> </div> </form> </body> </html>
bootstrapの「card」「card-body」「card-title」「card-text」などの「card-XXX」を使用してカード形式を作ることができます。
今度はログインフォームにカード形式の枠をつけていきます。
/test │ sample.html ├─css │ bootstrap.min.css └─img account-icon.png
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ログイン</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> html { height: 100%; margin: 0 auto; padding: 0; display: table; } body { min-height: 100%; margin: 0 auto; padding: 0; display: table-cell; vertical-align: middle; } </style> </head> <body> <form class="text-center card"> <div class="card-body"> <h1 class="card-title"><img src="img/account-icon.png" alt="ログイン"/></h1> <p class="card-text"><input class="form-control" type="email" placeholder="メールアドレス" required autofocus></p> <p class="card-text"><input class="form-control" type="password" placeholder="パスワード" required></p> <p class="card-text"><a href="#">パスワードをお忘れの場合</a></p> <p class="card-text"><button class="btn btn-primary" type="submit">ログイン</button></p> </div> </form> </body> </html>
bootstrapの「form-control」を指定するとフォームに効果がつけられます。
今度はログイン後のダッシュボードの作成を目指しながら、Bootstrap実践知識を捕捉していきます。
まず初めにbootstrapの開始テンプレートについて見ていきます。
bootstrap.min.cssに加えて、一部のコンポーネントでJavaScriptを使用していますので、bootstrap.min.jsが必要です。 さらにそれらが使用するjquery、popperといったJavaScriptの外部ライブラリが必要です。
以下のファイルをダウンロードしてから保存して取り込むか、直接URL指定して取り込みます。
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
bootstrapの開始テンプレートは以下になります。
構成は以下になります。
/test │ sample.html ├─css │ bootstrap.min.css └─js bootstrap.min.js jquery-3.3.1.slim.min.js popper.min.js
sample.htmlのコードです。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ダッシュボード</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> ダッシュボード <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
コードの表示例です。
コンテナは基本のレイアウトでグリッドシステムで入れ子にする場合に必要になります。 「container」を指定すると、幅568、768、992、1200のブレークポイントで固定幅のコンテナ(ブレークポイントで max-width が変わる)切り替えてくれます。
以下は「container」のサンプルです。
構成は以下になります。
/test │ sample.html ├─css │ bootstrap.min.css └─js bootstrap.min.js jquery-3.3.1.slim.min.js popper.min.js
sample.htmlのコードです。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ダッシュボード</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> .my-bg-color { background-color:#614983; color:#ffffff; } </style> </head> <body> <div class="my-bg-color container"> ダッシュボード </div> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
※my-bg-colorは独自に定義したスタイルです。
コードの表示例です。
コンテナは基本のレイアウトでグリッドシステムで入れ子にする場合に必要になります。 「container」を指定すると、幅568、768、992、1200のブレークポイントで固定幅のコンテナ(ブレークポイントで max-width が変わる)切り替えてくれます。
viewport 全体に広がる全幅で利用するには、container-fluidを使います。
以下は「container-fluid」のサンプルです。
構成は以下になります。
/test │ sample.html ├─css │ bootstrap.min.css └─js bootstrap.min.js jquery-3.3.1.slim.min.js popper.min.js
sample.htmlのコードです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ダッシュボード</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.my-bg-color {
background-color:#614983;
color:#ffffff;
}
</style>
</head>
<body>
<div class="my-bg-color container-fluid">
ダッシュボード
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
コードの表示例です。
viewport 全体に広がる全幅で利用するには、container-fluidを使います。
グリッドシステムを使用するとレイアウトの配置が簡単に行えます。基本としてrowを指定した領域の中にcolを配置します。
以下は「rowとcol」のサンプルです。
構成は以下になります。
/test │ sample.html ├─css │ bootstrap.min.css └─js bootstrap.min.js jquery-3.3.1.slim.min.js popper.min.js
sample.htmlのコードです。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ダッシュボード</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> .my-bg-color { background-color:#614983; color:#ffffff; } .my-content-bg-color { background-color:#cccccc; color:#000000; } </style> </head> <body> <div class="my-bg-color container-fluid"> <div class="row"> <div class="col">ロゴ</div> <div class="col">アカウント情報</div> </div> <div class="row"> <div class="col">メニュー</div> <div class="my-content-bg-color col">コンテンツ</div> </div> </div> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
※my-content-bg-colorは独自に定義したスタイルです。
コードの表示例です。
グリッドシステムを使用するとレイアウトの配置が簡単に行えます。基本としてrowを指定した領域の中にcolを配置します。 colを指定すると等間隔で表示されるようになります。
グリッドでコンテンツをネストすることができます。ネストした場合、その領域の範囲で100%幅になるよう調整されます。
以下は「ネスト」のサンプルです。
構成は以下になります。
/test │ sample.html ├─css │ bootstrap.min.css └─js bootstrap.min.js jquery-3.3.1.slim.min.js popper.min.js
sample.htmlのコードです。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ダッシュボード</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> .my-bg-color { background-color:#614983; color:#ffffff; } .my-content-bg-color { background-color:#cccccc; color:#000000; } </style> </head> <body> <div class="my-bg-color container-fluid"> <div class="row"> <div class="col"> ロゴ <div class="row"> <div class="col">メニュー</div> </div> </div> <div class="col"> アカウント情報 <div class="row"> <div class="my-content-bg-color col">コンテンツ</div> </div> </div> </div> </div> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
コードの表示例です。
グリッドでコンテンツをネストすることができます。ネストした場合、その領域の範囲で100%幅になるよう調整されます。
モバイルの幅の時に折り返したい、そんなときはcol-smが使えます。colに-smをつけると幅575px以下の時に挙動をかえることができます。
以下は「col-sm」のサンプルです。
構成は以下になります。
/test │ sample.html ├─css │ bootstrap.min.css └─js bootstrap.min.js jquery-3.3.1.slim.min.js popper.min.js
sample.htmlのコードです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ダッシュボード</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.my-bg-color {
background-color:#614983;
color:#ffffff;
}
.my-content-bg-color {
background-color:#cccccc;
color:#000000;
}
</style>
</head>
<body>
<div class="my-bg-color container-fluid">
<div class="row">
<div class="col">
ロゴ
<div class="row">
<div class="col">メニュー</div>
</div>
</div>
<div class="col-sm">
アカウント情報
<div class="row">
<div class="my-content-bg-color col">コンテンツ</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
コードの表示例です。
モバイルの幅の時に折り返したい、そんなときはcol-smが使えます。colに-smをつけると幅575px以下の時に挙動をかえることができます。
bootstrap4の管理画面のテンプレートの利用方法について見ていきます。
無料で提供されているテンプレートもいろいろあります。試してみてください。
Material Dashboardです。ドキュメントが整っているのが魅力です。ダウンロードにはメールアドレスを登録する必要があります。
Now UI Dashboardです。ドキュメントが整っているのが魅力です。ダウンロードにはメールアドレスを登録する必要があります。
Bootstrapを始める場合、どのような機能やクラスがあるか簡単に把握しておくとスムーズです。 ここではBootstrap入門をテーマにグリッドレイアウトやページングなどのサンプルなどを掲載しつつ、初心者向けのBootstrap(Bootstrap4)の使い方を解説しています。
コンテナは基本のレイアウトでグリッドシステムで入れ子にする場合に必要になります。 「container」を指定すると、幅568、768、992、1200のブレークポイントで固定幅のコンテナ(ブレークポイントで max-width が変わる)切り替えてくれます。
viewport 全体に広がる全幅で利用するには、container-fluidを使います。
Bootstrapのグリッドシステムはflexboxで構築されており、ページ全体で最大12列まで表示することができます。
最小単位が12分割した1列で、それを必要に応じて2列分、3列分と幅の割合が指定できます。 グリッドシステムはレスポンシブ(応答に応じて最適化)で、画面サイズに応じて列が自動的に再配置されます。
Bootstrap4グリッドシステムには5つのクラスがあります。 以下のクラスを組み合わせると、より動的で柔軟なレイアウトが作成できます。
超小型デバイス、画面幅576px未満
小型デバイス、画面幅576ピクセル以上
中型デバイス、画面幅768ピクセル以上
大型デバイス、画面幅992ピクセル以上
超大型デバイス、画面幅1200ピクセル以上
グリッドレイアウトの基本的な構成は、まず外側をrowクラスで指定し、行を作り、その中にcol*クラスを指定します。
<div class="row"> <div class="col">コル</div> <div class="col">コル</div> <div class="col">コル</div> </div>
上記の例のようにcolだけの場合はrowの範囲で相対的な幅で分割されます。3つcolを並べた場合、1セル33%になります。4つcolの場合25%です。
次の例は、タブレットから始まる4つの等幅の列を作成し、特大のデスクトップにスケーリングする方法を示しています。 576px未満のスマホまたは画面では、列は自動的に重なって表示されます。
<div class="row"> <div class="col-sm-3">col-sm-3</div> <div class="col-sm-3">col-sm-3</div> <div class="col-sm-3">col-sm-3</div> <div class="col-sm-3">col-sm-3</div> </div>
以下のようにすると4対8と割合の異なるレスポンシブカラムが作れます。 smを指定しているので、576px未満のスマホまたは画面では、列は自動的に重なって表示されます。
<div class="row"> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-8">col-sm-8</div> </div>
Bootstrap4のテキストについて見ていきます。
Bootstrap4のテキスト関連のデフォルト設定は以下のようになっています。
Bootstrap4のHTML見出し(h1~h6)は、以下のようにフォントサイズが設定されます。
表示見出しは、通常の見出しよりも目立つようにフォントサイズを大きく、フォント幅を軽く表示するクラスです。 .display-1、.display-2、.display-3、.display-4の4つのクラスから選択できます。
<h1 class="display-1">display-1</h1> <h1 class="display-2">display-2</h1> <h1 class="display-3">display-3</h1> <h1 class="display-4">display-4</h1>
Bootstrap4で<mark>を使用すると黄色の背景色のテキストになります。
使用すると<mark>黄色の背景色のテキスト</mark>になります。
Bootstrap4で<small>を使用すると軽めの2次的テキストになります。
使用すると<small>軽めの2次的テキスト</small>になります。
Bootstrap4で<abbr>を使用するとドット下線のついたテキストになります。
使用すると<abbr>ドット下線のついたテキスト</abbr>になります。
Bootstrap4の色について見ていきます。
Bootstrap4には、「色による意味」を提供するコンテキストクラスがいくつかあります。 テキストの色のクラスは次のとおりです。
Bootstrap4の背景の色のクラスは次のとおりです。
Bootstrap4の表について見ていきます。
Bootstrap4のベーシックな表は、.tableクラスを指定します。 この場合、軽いパディングと水平分割線があります。
Bootstrap4のベーシックな表の表示イメージになります。
Bootstrap4のベーシックな表のサンプルコードです。
<table class="table"> <tr><th>名前</th><th>メールアドレス</th></tr> <tr><td>太郎</td><td>tarou@example.com</td></tr> <tr><td>花子</td><td>hanako@example.com</td></tr> </table>
Bootstrap4のストライプな表は、.table-stripedクラスを指定します。
Bootstrap4のストライプな表の表示イメージになります。
Bootstrap4のストライプな表のサンプルコードです。
<table class="table table-striped"> <tr><th>名前</th><th>メールアドレス</th></tr> <tr><td>太郎</td><td>tarou@example.com</td></tr> <tr><td>花子</td><td>hanako@example.com</td></tr> </table>
ページングのサンプルです。
<nav aria-label="ページングの例"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">前へ</a></li> <li class="page-item active"><a class="page-link" href="#">現在</a></li> <li class="page-item"><a class="page-link" href="#">次へ</a></li> </ul> </nav>
この記事の更新履歴です。
スポンサーリンク
サイト内のページ
言語
C・C++
/HTML
/Java
/JavaScript
/PHP
/シェルスクリプト
開発環境
Ant
/Eclipse
/gcc
/gdb
/Git
/g++
/JDK
/JUnit
/ZAP
技術・仕様
Ajax
/CORBA
/Java EE(旧称J2EE)
/JNI
ライブラリ/Framework/CMS
bootstrap
/jQuery
/Lucene
/MyBatis
/Spring
/Struts
/WordPress
Web API
Google Maps
ITインフラ
OSとミドルウェア
Linux
/Windows
/シェル
Apache/Tomcat
/MySQL
/Redis
/Solr
ITインフラ
セキュリティ
公開サーバーのセキュリティ
SI
ホームページの作り方
/小さな会社のISMS
スポンサーリンク
関連サイト内検索ツール
zealseedsおよび関連サイト内のページが検索できます。
IPアドレス確認ツール
あなたのグローバルIPアドレスは以下です。
3.221.159.255
HTMLの表示色確認ツール
パスワード生成ツール
文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。
ここに生成されます。
スポンサーリンク