bootstrap－入門からbootstrap4の管理画面のテンプレート利用まで。

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

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

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入門知識1（Hello Bootstrap）

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

viewport

まずは以下のような「Hello 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」を取り込むことでフォントがきれいになります。

構成

/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仕様に替わります。

5. bootstrap入門知識2（ログインフォーム）

今度はログインフォームの作成を目指しながら、bootstrap入門知識を紹介していきます。

ログインフォームのHTML

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

構成

/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」を指定するとフォームに効果がつけられます。

6. bootstrap入門知識3（ダッシュボード）

今度はログイン後のダッシュボードの作成を目指しながら、bootstrap入門知識を紹介していきます。

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

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

必要なファイル

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

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

bootstrap.min.cssの取得URLの例）
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
bootstrap.min.jsの取得URLの例）
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
jqueryの取得URLの例）
https://code.jquery.com/jquery-3.3.1.slim.min.js
popperの取得URLの例）
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js

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>

コードの表示例

コードの表示例です。

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

コードの表示例

コードの表示例です。

ポイント

レイアウト（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>

コードの表示例

コードの表示例です。

ポイント

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を配置します。 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>

コードの表示例

コードの表示例です。

ポイント

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

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

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

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

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

Material Dashboard

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

ライセンス：MIT
ダウンロード：https://www.creative-tim.com/product/material-dashboard
デモページ：https://demos.creative-tim.com/material-dashboard/examples/dashboard.html
ドキュメント：https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html

Now UI Dashboard

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

ライセンス：MIT
ダウンロード：https://www.creative-tim.com/product/now-ui-dashboard
デモページ：https://demos.creative-tim.com/now-ui-dashboard/examples/dashboard.html
ドキュメント：https://demos.creative-tim.com/now-ui-dashboard/docs/1.0/getting-started/introduction.html

更新履歴

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

2019/5/19 グリッドシステムについて追記しました。
2019/5/18 bootstrap入門知識3（ダッシュボード）を追記しました。
2019/5/17 記事をUPしました。

戻る

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /bootstrap /CORBA /Java EE（旧称J2EE） /JNI

ライブラリ／Framework／CMS
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アドレスは以下です。

52.87.176.39

HTMLの表示色確認ツール

パスワード生成ツール

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

ここに生成されます。

スポンサーリンク

bootstrap－入門からbootstrap4の管理画面のテンプレート利用まで。

目次

1. bootstrapとは

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

HTML

JavaScript

jQuery

3. bootstrapのダウンロード

4. bootstrap入門知識1（Hello Bootstrap）

viewport

構成

sample.html

ポイント

「bootstrap.min.css」の取り込み

構成

sample.html

ポイント

5. bootstrap入門知識2（ログインフォーム）

ログインフォームのHTML

構成

sample.html

ポイント

青いボタン（btn btn-primary）

構成

sample.html

ポイント

水平方向に中央寄せ（text-center）

構成

sample.html

ポイント

垂直方向に中央寄せ（独自のスタイル適用）

構成

sample.html

ポイント

カード形式の枠を作る（card、card-XXX）

構成

sample.html

ポイント

フォームに効果をつける（form-control）

構成

sample.html

ポイント

6. bootstrap入門知識3（ダッシュボード）

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

必要なファイル

bootstrapの開始テンプレート

構成

sample.html

コードの表示例

レイアウト（container）

構成

sample.html

コードの表示例

ポイント

レイアウト（container-fluid）

構成

sample.html

コードの表示例

ポイント

グリッドシステム（rowとcol）

構成

sample.html

コードの表示例

ポイント

グリッドシステム（ネスト）

構成

sample.html

コードの表示例

ポイント

グリッドシステム（col-sm）

構成

sample.html

コードの表示例

ポイント

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

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

Material Dashboard

Now UI Dashboard

更新履歴