トップ ライブラリ/Framework/CMS Bootstrap

Bootstrapとは-入門からBootstrap4の管理画面のテンプレート利用まで。

Bootstrapは、UIまで手が回らないエンジニアにうれしい「CSSやJavaScript」のライブラリです。デザイン面のすぐれた豊富なテンプレートに加え、デバイスやブラウザ依存を吸収してくれます。この記事ではBootstrapの入門知識からBootstrap4の管理画面用のテンプレートの利用まで解説していきます。

最終的にはすぐれたデザインのテンプレートを使いこなしたいですが、少々知識がないとテンプレートのカスタマイズが難しいと思います。 そこでHTML、CSS、JavaScriptのおさらいから入り、管理画面を想定したサンプルを作りながら、bootstrapの入門知識を解説していきたいと思います。

目次

この記事の目次です。

1. bootstrapとは

2. HTML、CSS、JavaScript、jQueryの入門知識

3. bootstrapのダウンロード

4. bootstrap入門

5. bootstrap実践1(Hello Bootstrap)

6. bootstrap実践2(ログインフォーム)

7. bootstrap実践3(ダッシュボード)

8. bootstrap4の管理画面のテンプレートの利用方法

更新履歴

1. bootstrapとは

bootstrapとは、UIまで手が回らないエンジニアにうれしい「HTML、CSS、およびJSを使用して開発するためのオープンソースのツールキット」です。

Sassの変数とmixin、レスポンシブグリッドシステム、豊富なビルド済みコンポーネント、およびjQuery上に構築された強力なプラグインを使用して、アイデアをすばやくプロトタイプ作成したり、アプリケーション全体のUIが構築できます。

2. HTML、CSS、JavaScript、jQueryの入門知識

bootstrapについて見ていく前にHTML、CSS、JavaScript、jQueryの入門知識を見ていきます。

HTML

ホームページなどのページはHTML/CSSを記述して表示します。HTMLは構造をCSSはデザインを決めます。この記事では、HTMLと、右寄せなどCSSの入門知識を解説しています。

詳細

JavaScript

JavaScriptとは、IEやChrome、FirefoxなどWebブラウザで動かせるプログラミング言語です。 プロトタイプ式のオブジェクト指向で、 Javaなどの一般的なオブジェクト指向のプログラミング言語と異なるオブジェクト指向言語となっています。

詳細

jQuery

jQueryとは、ブラウザ用のJavaScriptライブラリです。 特にブラウザに依存しないオープンソースのセレクタが特徴です。 セレクタを使用したCSSやHTMLタグのDOM操作などJavaScriptコードをそのまま書くより簡単にコードが記述できます。

詳細

3. bootstrapのダウンロード

bootstrapは「https://getbootstrap.com/」からダウンロードできます。またBootstrapCDNから直接ソースで取り込んで利用できます。

4. Bootstrap入門

Bootstrapを始める場合、どのような機能やクラスがあるか簡単に把握しておくとスムーズです。 ここではBootstrap入門をテーマにグリッドレイアウトやページングなどのサンプルなどを掲載しつつ、初心者向けのBootstrap(Bootstrap4)の使い方を解説しています。

詳細

5. bootstrap実践1(Hello Bootstrap)

「Hello Bootstrap!!」を表示するサンプルを作りながら、「viewport」、「bootstrap.min.css」の取り込みについて解説していきます。 なお、ダウンロードしたファイルにはたくさんファイルがありますが、入門ということでシンプルに「bootstrap.min.css」のみ使います。

viewport

まずは以下のような「Hello Bootstrap!!」と表示するコードを表示してみます。

Bootstrapを使用しないで表示した場合
Bootstrapを使用しないで表示した場合

構成

/test
└─sample.html
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」の取り込み

「bootstrap.min.css」を取り込むことでフォントがきれいになります。

Bootstrapを使用して表示した場合
Bootstrapを使用して表示した場合

構成

/test
│  sample.html
└─css
        bootstrap.min.css
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>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
Hello Bootstrap!!
</body>
</html>

ポイント

CSSファイルはheadタグの中で取り込む取り込みます。 「bootstrap.min.css」を取り込むことでデフォルトのスタイルがbootstrap仕様に替わります。

6. Bootstrap実践2(ログインフォーム)

今度はログインフォームの作成を目指しながら、Bootstrapの実践知識を補足していきます。

ログインフォームのHTML

まずはログインフォームのHTMLを見ていきます。 「bootstrap.min.css」を取り込んだだけですが、素よりきれいですね。

ログインフォームのHTMLを表示した場合
ログインフォームのHTMLを表示した場合

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png
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>
<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は自作したものです。

青いボタン(btn btn-primary)

今度はボタンをカスタマイズして青いボタンに変更していきます。

青いボタンに変更した表示した場合
青いボタンに変更した表示した場合

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png
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>
<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」を指定します。

水平方向に中央寄せ(text-center)

今度はログインフォームを水平方向の中央に寄せていきます。

水平方向の中央寄せして表示した場合
水平方向の中央寄せして表示した場合

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png
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>
<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
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>
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での画面の垂直方向に中央寄せする方法は見当たりませんでした。 独自のスタイルを適用することでかゆい所は解決できます。

カード形式の枠を作る(card、card-XXX)

今度はログインフォームにカード形式の枠をつけていきます。

カード形式の枠をつけて表示した場合
カード形式の枠をつけて表示した場合

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png
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>
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」を使用してカード形式を作ることができます。

フォームに効果をつける(form-control)

今度はログインフォームにカード形式の枠をつけていきます。

カード形式の枠をつけて表示した場合
カード形式の枠をつけて表示した場合

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png
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>
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」を指定するとフォームに効果がつけられます。

7. Bootstrap実践3(ダッシュボード)

今度はログイン後のダッシュボードの作成を目指しながら、Bootstrap実践知識を捕捉していきます。

bootstrapの開始テンプレート(使用するCSSとJSファイル)

まず初めにbootstrapの開始テンプレートについて見ていきます。

必要なファイル

bootstrap.min.cssに加えて、一部のコンポーネントでJavaScriptを使用していますので、bootstrap.min.jsが必要です。 さらにそれらが使用するjquery、popperといったJavaScriptの外部ライブラリが必要です。

以下のファイルをダウンロードしてから保存して取り込むか、直接URL指定して取り込みます。

bootstrapの開始テンプレート

bootstrapの開始テンプレートは以下になります。

構成

構成は以下になります。

/test
│  sample.html
├─css
│      bootstrap.min.css
└─js
        bootstrap.min.js
        jquery-3.3.1.slim.min.js
        popper.min.js
sample.html

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>
コードの表示例

コードの表示例です。

bootstrapの開始テンプレートを表示した場合
bootstrapの開始テンプレートを表示した場合

レイアウト(container)

コンテナは基本のレイアウトでグリッドシステムで入れ子にする場合に必要になります。 「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

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は独自に定義したスタイルです。

コードの表示例

コードの表示例です。

幅575pxで表示した場合
幅575pxで表示した場合
幅576pxで表示した場合
幅576pxで表示した場合
幅767pxで表示した場合
幅767pxで表示した場合
幅768pxで表示した場合
幅768pxで表示した場合
幅991pxで表示した場合
幅991pxで表示した場合
幅992pxで表示した場合
幅992pxで表示した場合
幅1199pxで表示した場合
幅1199pxで表示した場合
幅1200pxで表示した場合
幅1200pxで表示した場合

ポイント

コンテナは基本のレイアウトでグリッドシステムで入れ子にする場合に必要になります。 「container」を指定すると、幅568、768、992、1200のブレークポイントで固定幅のコンテナ(ブレークポイントで max-width が変わる)切り替えてくれます。

レイアウト(container-fluid)

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

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>

コードの表示例

コードの表示例です。

container-fluidで表示した場合
container-fluidで表示した場合

ポイント

viewport 全体に広がる全幅で利用するには、container-fluidを使います。

グリッドシステム(rowとcol)

グリッドシステムを使用するとレイアウトの配置が簡単に行えます。基本として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

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を指定して表示した場合
rowとcolを指定して表示した場合

ポイント

グリッドシステムを使用するとレイアウトの配置が簡単に行えます。基本として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

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が使えます。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

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>

コードの表示例

コードの表示例です。

幅が576px以上の時に表示した場合
幅が576px以上の時に表示した場合
幅が575px以下の時に表示した場合
幅が575px以下の時に表示した場合

ポイント

モバイルの幅の時に折り返したい、そんなときはcol-smが使えます。colに-smをつけると幅575px以下の時に挙動をかえることができます。

8. bootstrap4の管理画面のテンプレートの利用方法

bootstrap4の管理画面のテンプレートの利用方法について見ていきます。

無料の管理画面のテンプレート

無料で提供されているテンプレートもいろいろあります。試してみてください。

Material Dashboard

Material Dashboardです。ドキュメントが整っているのが魅力です。ダウンロードにはメールアドレスを登録する必要があります。

Material Dashboardのデモページ
Material Dashboardのイメージ

Now UI Dashboard

Now UI Dashboardです。ドキュメントが整っているのが魅力です。ダウンロードにはメールアドレスを登録する必要があります。

Now UI Dashboardのデモページ
Now UI Dashboardのイメージ

更新履歴

この記事の更新履歴です。

戻る

スポンサーリンク

サイト内のページ

言語
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 /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

34.225.194.144

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク