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の簡単な使い方

「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の管理画面（ダッシュボード）の作り方

bootstrapの管理画面（ダッシュボード）の作り方をテーマにbootstrapの使い方をまとめていきます。

bootstrapを使用したログイン画面（ログインフォーム）の実装例

bootstrapを使用したログイン画面（ログインフォーム）の作成を目指しながら、Bootstrapの実践知識を補足していきます。

詳細

bootstrapを使用したダッシュボードの実装例

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

詳細

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

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

管理画面（ダッシュボード）の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

6. bootstrap4のリファレンス

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

コンテナ

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

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

グリッドシステム

Bootstrapのグリッドシステムはflexboxで構築されており、ページ全体で最大12列まで表示することができます。

最小単位が12分割した1列で、それを必要に応じて2列分、3列分と幅の割合が指定できます。グリッドシステムはレスポンシブ（応答に応じて最適化）で、画面サイズに応じて列が自動的に再配置されます。

Bootstrap4のグリッドクラス

Bootstrap4グリッドシステムには5つのクラスがあります。以下のクラスを組み合わせると、より動的で柔軟なレイアウトが作成できます。

.col-
超小型デバイス、画面幅576px未満
.col-sm-
小型デバイス、画面幅576ピクセル以上
.col-md-
中型デバイス、画面幅768ピクセル以上
.col-lg-
大型デバイス、画面幅992ピクセル以上
.col-xl-
超大型デバイス、画面幅1200ピクセル以上

Bootstrap4グリッドレイアウトの基本的な構成

グリッドレイアウトの基本的な構成は、まず外側を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％です。

Bootstrap4グリッドレイアウトのレスポンシブカラム

次の例は、タブレットから始まる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>

Bootstrap4グリッドレイアウトの割合の異なるレスポンシブカラム

以下のようにすると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のテキスト関連のデフォルト設定は以下のようになっています。

font-size：16px
line-height：1.5
font-family："Helvetica Neue", Helvetica, Arial, sans-serif
pタグ：margin-top:0、margin-bottom:1rem (デフォルトで16px)

見出し（h1～h6）

Bootstrap4のHTML見出し（h1～h6）は、以下のようにフォントサイズが設定されます。

h1 : 2.5rem（40px）
h2 : 2rem（32px）
h3 : 1.75rem（28px）
h4 : 1.5rem（24px）
h5 : 1.25rem（20px）
h6 : 1rem（16px）

表示見出し(.display-*)

表示見出しは、通常の見出しよりも目立つようにフォントサイズを大きく、フォント幅を軽く表示するクラスです。 .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>

マーカー（<mark>）

Bootstrap4で<mark>を使用すると黄色の背景色のテキストになります。

使用すると<mark>黄色の背景色のテキスト</mark>になります。

小さめの文字（<small>）

Bootstrap4で<small>を使用すると軽めの2次的テキストになります。

使用すると<small>軽めの2次的テキスト</small>になります。

略語（<abbr>）

Bootstrap4で<abbr>を使用するとドット下線のついたテキストになります。

使用すると<abbr>ドット下線のついたテキスト</abbr>になります。

色

Bootstrap4の色について見ていきます。

テキストの色

Bootstrap4には、「色による意味」を提供するコンテキストクラスがいくつかあります。テキストの色のクラスは次のとおりです。

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body
.text-light

背景の色

Bootstrap4の背景の色のクラスは次のとおりです。

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

表

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>

6. ページング

ページングのサンプルです。

<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>

更新履歴

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

2019/12/8 bootstrap4のリファレンスを追記しました。
2019/5/18 bootstrap実践知識3（ダッシュボード）を追記しました。
2019/5/17 記事をUPしました。

戻る

スポンサーリンク

サイト内のページ

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

開発環境
Ant /Burp /Eclipse /Fiddler /gcc /gdb /Git /g++ /JDK /JMeter /JUnit /Teraterm /ZAP

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

ライブラリ／Framework／CMS
bootstrap /jQuery /FuelPHP /Lucene /MyBatis /Seasar2 /Spring /Struts /WordPress

Web API
Google Maps

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

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

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

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

PC製品
ZOTAC

SI
ホームページの作り方

その他
IT用語 /ITスキル体系

スポンサーリンク

IPアドレス確認ツール

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

18.97.9.174

HTMLの表示色確認ツール

パスワード生成ツール

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

ここに生成されます。

スポンサーリンク

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

目次

1. bootstrapとは

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

HTML

JavaScript

jQuery

3. bootstrapのダウンロード

4. bootstrapの簡単な使い方

viewport

構成

sample.html

ポイント

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

構成

sample.html

ポイント

5. bootstrapの管理画面（ダッシュボード）の作り方

bootstrapを使用したログイン画面（ログインフォーム）の実装例

bootstrapを使用したダッシュボードの実装例

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

管理画面（ダッシュボード）のbootstrap4の無料デザインテンプレート

Material Dashboard

Now UI Dashboard

6. bootstrap4のリファレンス

コンテナ

グリッドシステム

Bootstrap4のグリッドクラス

Bootstrap4グリッドレイアウトの基本的な構成

Bootstrap4グリッドレイアウトのレスポンシブカラム

Bootstrap4グリッドレイアウトの割合の異なるレスポンシブカラム

テキスト

デフォルト設定

見出し（h1～h6）

表示見出し(.display-*)

マーカー（<mark>）

小さめの文字（<small>）

略語（<abbr>）

色

テキストの色

背景の色

表

ベーシックな表

表示イメージ

サンプルコード

ストライプな表

表示イメージ

サンプルコード

6. ページング

更新履歴