Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の基本について説明し、バージョン4系の導入の仕方とグリッドシステムの基本、およびBootstrapバージョン3系との違いについて解説していきます。

Bootstrap3を使っていたんですが、Bootstrap4とどういった点が違うんでしょうか？

基本的には同じですが、新しく導入された機能や廃止された機能もあります。
今回は、Bootstrap4の設定方法とグリッドシステムについて説明していきますね。

【HTML・CSSを個別指導】
Webスクール<「WEBST8」

ブートストラップ(BootStrap)とは

BootStrapの特徴

Bootstrap公式サイト

BootstrapはもともとTwitter社で作られたもので、レスポンシブデザイン対応のCSSフレームワークの一つです。

フレームワークっていうのはなんなんでしょうか？？

フレームワークとは直訳すると「枠組み」のことで、汎用的な機能を共通化しておき簡単に利用できるようにした仕組みのことです。
たとえば、人のキャラを作るときに、顔・目・口などいくつかの部品があらかじめ用意されていて、それらを選択してキャラクターを作成できるようなアプリとかでありますよね。

あ、たとえば、アメブロのキャラクターとかそんな感じで作れますよね！

CSSフレームワークとはそれのCSS版で、あらかじめ用意されたブートストラップ用の部品を利用することで一から自分で作成するよりも簡単にWebページが作成できるようになります。

BootStrapの特徴

Bootstrapの登場によって、制作者は予め用意されたコードを記載するだけで、見栄えの良いWebサイトを短期間で制作することができるようになりました。

レスポンシブデザイン対応
デザイン性に優れたコンポーネント
他シスタムのカスタマイズに役に立つ

レスポンシブデザイン対応: レスポンシブデザインとは、1つのWebサイトで、PCからタブレット、スマートフォンなどの大きさの異なる画面に合わせて最適なレイアウトを表示する手法です。レスポンシブデザインは現在主流の方式です。
デザイン性に優れたコンポーネント: コンポーネント（部品）とは、フォームやボタン、ナビゲーションなどのパーツのことで、BootStrapであらかじめ用意されています。制作者はこれらのコンポーネント（部品）を自作する必要はなく、HTMLタグにクラスを追加するだけで、体裁の整ったコンポーネントをすぐに利用できます。
BootStrapを採用しているサービスが多く、他シスタムカスタマイズに役に立つ: ワードプレスの人気テーマでもたくさん利用されており、覚えておくとワードプレスのレイアウト調整にも役立つシーンが多いと思います。

■記述例　aタグのクラスにBootstrapのボタン用クラス(btn btn-success)を記述。

<a href="#" class="btn btn-success">BootStrapのボタン</a>

1	<a href="#" class="btn btn-success">BootStrapのボタン</a>

■表示例　ボタン機能を利用してできたボタン
BootStrapのボタン

上記のように、Bootstrapで定義している記述方法にしたがってHTMLファイルを作成することで、Webページのレスポンシブ対応やレイアウト調整を簡単に仕上げることができるようになります。

ワードプレスの人気テーマでもたくさん利用されており、覚えておくとワードプレスのレイアウト調整にも役立つシーンが多いと思います。

BootStrapベースのWordPressテーマLightning

2019年4月時点の最新はBootstrap4系

Bootstrapにもバージョンがあります。2018年1月18日（米国時間）にオープンソースCSSフレームワーク「Bootstrap」の最新バージョン「Bootstrap 4」がリリースされました。

今2019年1月時点でも多くのシステム・サイトでまだBootstrap3系が利用されていますが、これからはBootstrap4系が主流になっていくことが予想されます。

ここでは、Bootstrap4系(4.3)を利用するための方法をご説明していきます。

2018年1月18日（米国時間）、オープンソースCSSフレームワーク「Bootstrap」の最新バージョン「Bootstrap 4」が正式リリースされた。最新バージョンでは、CSSメタ言語を従来の「LESS」（Leaner CSS）から「Sass」（Syntactically Awesome Stylesheets）へ変更したり、CSSのFlexboxをデフォルトで有効にしたりするという2つの主要なアーキテクチャ変更を中心にさまざまな変更が行われている。

「Bootstrap 4」が正式リリース――IE10以降、iOS 7以降、Android 5.0以降に対応

合わせて読みたい記事

下記の「Bootstrap3.3.7の使い方導入方法と基本・レスポンシブデザインを徹底解説」にBootstrap3.3.7の使い方を掲載しています。

Bootstrap4の前のバージョンですが、既存サイトやシステムではまだまだ多く使われていますので、必要に応じて勉強しておくと役に立ちます。

Bootstrapの使い方導入方法と基本・レスポンシブデザインを徹底解説

BootStrapを使うためには

BootStrapを使うための事前準備

Bootstrap4系(4.3)を利用するための方法をご説明していきます。Bootstrapを使うためには以下の4ファイルを読み込む必要があります。

Bootstrapの公式サイトからダウンロードしたCSSファイル「bootstrap.css」
Bootstrapの公式サイトからダウンロードしたJavascriptファイル「bootstrap.js(※注)」
（popper.js.orgからダウンロードしたJavascriptファイル「popper.js(※注)）」
jQueryの公式サイトからダウンロードしたjavascriptファイル「jquery-x.x.x.jp」

(※注)bootstrap.jsの代わりにbootstrap.bundle.jsを利用することができます。bootstrap.bundle.jsはpopper.jsを内包しているため、bootstrap.bundle.jsを利用する場合はpopper.jsを読み込む必要はありません。popper.jsは、Bootstrap4から追加されたらしい依存ライブラリです。ここでは、bootstrap.bundle.jsを利用する例で進めます。

(※)bootstrap.cssやbootstrap.jsの代わりに、bootstrap.min.cssやbootstrap.min.jsを利用する場合もあります。内容に違いはありませんが、改行やスペースなどが省略されて人間にとっては読みにくくなるものの、読み込みスピードが高速化されます。

■通常版 bootstrap.css

■圧縮版 bootstrap.min.css 改行やスペースが省略されています

各ファイルをダウンロードして利用する

ここでは、事前準備としてデスクトップ上にlessonフォルダ、index.htmlファイル、cssフォルダ、jsフォルダを作成した前提で進めていきます。

lessonフォルダに空のindex.html、css・jsフォルダを作成する

bootstrapに必要となる3ファイルを下記のようにcss、jsフォルダ内に格納する手順で説明していきます。

BootStrapのダウンロード

まず下記のリンクからbootstrapの公式サイトにアクセスします。
Download Bootstrap 4.3

Downloadを選択します。

bootstrap-4.3.1-dist.zipというzipファイルがダウンロードされますので、解凍します。

bootstrap-4.3.1-distフォルダには「css」「js」フォルダがあります。

ここでは、以下の2ファイルを利用します。

bootstrap-4.3.1-distフォルダ＞cssフォルダ＞bootstrap.cssファイル
bootstrap-4.3.1-distフォルダ＞jsフォルダ＞bootstrap.bundle.js(※)

事前に作成したlessonフォルダ内のcss/jsフォルダにこの二つのファイルをそれぞれコピーしておきましょう。

■bootstrap.css

■bootstrap.bundle.js

(補足)bootstrap4.x.x-distの各ファイルについて

ダウンロード後、解凍してきたフォルダー内には、cssフルダーにはコンパイルされたcssファイル、jsフォルダーにはJavaScriptファイルが格納されています。

たくさんのファイルがありますが、Bootstrapの一番多くの機能を含んでいるCSSファイルがbootstrap.cssで、Javascriptファイルがbootstrap.bundle.jsです。

同じ名前のファイルで末尾に「min」が付いているのは、圧縮版といい、改行やコメント、スペースなどを除去して圧縮（Minify）した軽量版になっています。内容に違いはありませんが、改行やスペースなどが省略されて人間にとっては読みにくくなるものの、読み込みスピードが高速化されます。

(補足)bootstrap.bundle.jsについて

bootstrap4では、popper.jsというjavascriptファイルを読み込む必要があります。

bootstrap.bundle.jsは、bootstrap.jsに加えてpopper.jsの機能も含んでいるため、bootstrap.js＋popper.jsの代わりにbootstrap.bundle.jsを利用することもできます。

JSファイル	bootstrapの基本機能	popper.js
bootstrap.bundle.js	含む	含む
bootstrap.js	含む	含まない (別途popper.jsを読み込む必要がある)

bootstrap.bundle.jsではなく、bootstrap.jsを読み込む設定にする場合は、下記URLからpopper.jsも読み込む設定にしましょう。

https://popper.js.org

jQueryのダウンロード

bootstrap.jsはjqueryを利用しているため、jqueryファイルもダウンロードしておきます。

下記からjqueryの公式サイトにアクセスします。
Downloading jQuery

ここでは、「Download the uncompressed, development jQuery 3.3.1」を選択してダウンロードします。

lessonsフォルダのjsフォルダにダウンロードしたファイルをコピーしておきましょう。

現時点でフォルダ・ファイル構成が下記のようになっていることを確認してください。

index.htmlの設定

つぎに、事前に作成したindex.htmlでbootstrapを使う設定を記述していきます。

下記のように、viewportの設定(※)とheadタグ内にbootstrap.cssを読み込む設定を行い、body閉じタグ直前(</body>)にjqueryとbootstrap.bundle.jsを読み込む設定を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>はじめてのBootstrap4</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/bootstrap.css">

</head>
<body>


  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>はじめてのBootstrap4</title>

</head>

<body>

</body>

</html>

（※）meta name="viewport"...の記述はスマートフォン用のレスポンシブデザインに対応するために必要な記述です。viewportについては「CSSメディアクエリとViewPortによるレスポンシブデザインの作り方」をご参照ください。

(※)jsファイルの順番は、jquery、bootstrap.jsの順番で記述するようにしてください。順番が逆だと正常に動作しなくなります。

設定完了後にindex.htmlファイルをChromeで開いて、パスが通っているか確認します。

検証ツールから、 Consoleタグを開いて何もエラーが出ていなければOKです。

Consoleタグを開いてファイルパスエラーが表示されていれば設定にミスがありますので、確認してください。

これでbootstrapの準備が整いました。

Bootstrapを利用する

さて、これまでの手順でbootstrapを利用する準備が整いました。それではbootstrapを使ってみましょう。

bodyタグ内に下記のように記述してみてください。

<h1>ボタンの練習</h1>
<a href="#" class="btn btn-success">ボタン</a>
<a href="#" class="btn btn-warning">ボタン</a>

<h1>ボタンの練習</h1>

下記のように緑色や赤色のボタンのようになっています。

内容としては、aタグにclass="btn btn-success/warning"をつけただけですが、bootstrap.cssの中で「.btn-successクラスは緑色のボタンのようにする」というように定義しているために上記のような表示になります。

このようにbootstrapであらかじめ用意されているクラス名を利用することで、自分で1から記述しなくてもbootstrapの定義に従った表現ができるようになるため自分で記述する手間を大幅に削減することができます。

CDNを利用してBootstrap4を始める場合

前述のやり方では、「bootstrap.css」、「bootstrap.bundle.js」、「jquery-3.3.1.js」の3ファイルを利用しましたが、下記のようにCDNを利用して、Web上に公開されているbootstrapファイルを利用することもできます。

CDN（Content Delivery Network）とは

CDNとは、Content Delivery Networkの略で、本例でいうところのcssファイルやjsファイルを配信するサーバー(仕組み)のことです。

自前のサーバーに格納したCSSファイルやJSファイルを読み込む代わりに、CDNで配信されているCSSファイルやJSファイルを利用することができます。

詳細はCDNってそもそも何？なんかサーバの負荷が下がるって聞いたんだけど！〜をご覧ください。

下記をheadタグに挿入します。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

1 2	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

下記をbodyの閉じタグ(</body>)に挿入します。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

下記のようになっていればOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>はじめてのBootstrap4</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>はじめてのBootstrap4</title>

</head>

<body>

</body>

</html>

先ほどのファイルをダウンロードするやり方はbootstrap.bundle.jsを利用していましたが、こちらの例では、bootstrap.jsを利用しているのでpopper.jsを読み込む設定をしていますね。

(※)Javascriptファイルの記載の順番は、jquery→popper→bootstrapの順にしてください。3ファイルはそれぞれ依存関係のあるファイルであるため、順番が異なると正常に動作しなくなります。

(詳細は「Introduction - Bootstrap」をご覧ください。

設定完了後にindex.htmlファイルをChromeで開いて、パスが通っているか確認します。

検証ツールから、 Consoleタグを開いて何もエラーが出ていなければOKです。

Consoleタグを開いてファイルパスエラーが表示されていれば設定にミスがありますので、確認してください。

これでbootstrapの準備が整いました。

▲▲目次に戻る▲▲

Bootstrapによるグリッドシステム・レスポンシブデザイン

それでは、BootStrapで最もよく使われるグリッドシステム・レスポンシブデザイン機能について説明していきます。

Bootstrapでは横幅を12分割したグリッド(格子)を利用して、分割された12の列の数を指定して横並びや横幅を作成できます。グリッドの中に文字や画像を配置します。Bootstrapでは、レスポンシブデザインとグリッドシステムの組み合わせにより、画面に応じたコンテンツの配置が可能になります。

下記はグリッドシステムを使ったサンプルです。1行目は12分割、2行目は4分割分割、3行目は2分割しています。

■上記のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>はじめてのBootstrap4</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/bootstrap.css">
  <style media="screen">
   .skyblue{
     background: skyblue;
     height: 100px;
     text-align: center;
     line-height: 100px;
   }
   .pink{
     background: pink;
     height: 100px;
     text-align: center;
     line-height: 100px;
   }
   </style>
 </head>
 <body>
   <div class="container">
     <h1>グリッドシステム</h1>
     <h3>12分割(1*12)</h3>
     <div class="row">
       <div class="col-lg-1 skyblue">
         col-lg-1
       </div>
       <div class="col-lg-1 pink">
         col-lg-1
       </div>
       <div class="col-lg-1 skyblue">
         col-lg-1
       </div>
       <div class="col-lg-1 pink">
         col-lg-1
       </div>
       <div class="col-lg-1 skyblue">
         col-lg-1
       </div>
       <div class="col-lg-1 pink">
         col-lg-1
       </div>
       <div class="col-lg-1 skyblue">
         col-lg-1
       </div>
       <div class="col-lg-1 pink">
         col-lg-1
       </div>
       <div class="col-lg-1 skyblue">
         col-lg-1
       </div>
       <div class="col-lg-1 pink">
         col-lg-1
       </div>
       <div class="col-lg-1 skyblue">
         col-lg-1
       </div>
       <div class="col-lg-1 pink">
         col-lg-1
       </div>
     </div>
     <br>
     <h3>4分割(3*4)</h3>
     <div class="row">
       <div class="col-lg-3 skyblue">
         col-lg-3
       </div>
       <div class="col-lg-3 pink">
         col-lg-3
       </div>
       <div class="col-lg-3 skyblue">
         col-lg-3
       </div>
       <div class="col-lg-3 pink">
         col-lg-3
       </div>
     </div>
     <br>
     <h3>2分割(2*6)</h3>
     <div class="row">
       <div class="col-lg-6 skyblue">
         col-lg-6
       </div>
       <div class="col-lg-6 pink">
         col-lg-6
       </div>
     </div>
   </div>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>はじめてのBootstrap4</title>

.skyblue{

background: skyblue;

height: 100px;

text-align: center;

line-height: 100px;

}

.pink{

background: pink;

height: 100px;

text-align: center;

line-height: 100px;

}

</style>

</head>

<body>

<h1>グリッドシステム</h1>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

col-lg-1

</div>

<br>

col-lg-3

</div>

col-lg-3

</div>

col-lg-3

</div>

col-lg-3

</div>

<br>

col-lg-6

</div>

col-lg-6

</div>

</body>

</html>

上記のように、グリッドシステムを利用することでパソコンやタブレット、スマートフォンなど画面幅が異なってもレイアウトを組み替えやすくしています。

なお、1つの行に12個以上の列が配置されている場合、13個目以降を含むグループは新しい行に折り返されます。

(重要)Bootstrap4とBootstrap3ではブレークポイントが異なります。

Bootstrap3系と4系の最も大きな違いの一つに、ブレークポイントの変更があります。

Bootstrap 3では(xs、sm、md、lg)の4つだったブレークポイントが、Bootstrap 4では、(xs、sm、md、lg)5つに増えました。Bootstrap 3では、768px以下の指定が全て一括で適用されてしまうので、より小さなデバイス向けの設定が増えた形になります。
書き方が変更されたものもあったり、同じ書き方でも動作が変わるものもあるので気をつけましょう。

Bootstrap4	識別子	Extra small	Small	Medium	Large	Extra large
	ブレークポイント	<576px	≥576px	≥768px	≥992px	≥1200px
	プレフィックス	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

Bootstrap3	識別子	Extra small		Small	Medium	Large
	ブレークポイント	<768px		≥768px	≥992px	≥1200px
	プレフィックス	.col-xs-		.col-sm-	.col-md-	.col-lg-

.col-sm-、.col-md-、.col-lg-と同じプレフィックスでもブレークポイントが異なっていることに注意です。

グリッドシステムの基本の使い方

グリッドシステムを利用するためには下記のようにして利用することができます。

<div class="container">で囲む
上記のcontainerクラスの中で<div class="row">で一行を定義する
上記のrowクラスの中で<div class="col-{prefix}-{列数(1〜12)}">で何分割するかを定義する

■使用例 PC用画面で2分割するサンプル

<div class="container">
	<h1>PC用画面(lg)のときは2分割する</h1>
	<div class="row">
		<div class="col-lg-6 skyblue">
			1(6/12)
		</div>
		<div class="col-lg-6 pink">
			2(6/12)
		</div>
	</div>
</div>

<h1>PC用画面(lg)のときは2分割する</h1>

1(6/12)

</div>

2(6/12)

</div>

■上記の表示例 PC用画面で2分割するサンプル

(※)グリッドシステムを使わなくて良い場合(col-{prefix}-**で分割しない場合)は、rowやcolクラスを省略してcontainerクラス直下に中身を描いても構いません。

詳細は、(公式サイト)Grid system | CSS・Boostrap 4.3をご参照ください。

グリッドシステムを使うための容器的役割　containerクラス(必須)

各役割についてもう少し細かく説明していきます。containerクラスはグリッドシステムで正しく列を分割するための入れ物（容器）的な役割を果たします。

containerの中にある要素を画面の中央に幅を固定する必須のクラスです。containerを省略してrowやcol-{prefix}-**を使うとレスポンシブデザインが正しく動作しません。

■水色部分がcontainer要素です。横幅サイズに応じて余白が自動で調整されます。

また、containerの最大幅は、(ブラウザの)横幅サイズによって変化します。

(ブラウザの)横幅	575px以下	576px以上	768px以上	992px以上	1200px以上
containerの最大幅(max-width)	100%	540px	720px	960px	1140px

■参考 containerのCSS設定

一行を定義する　rowクラス

rowクラスは行を定義するための入れ物（容器）的な役割を果たします。rowクラスは前述のcontainerに内包されます。

■container要素の中のrow要素

boottsrap container要素の中にあるrow要素

■上記のソースコード

<div class="container" style="background: skyblue;height: 100px;">
	container要素。グリッドシステムの容器の役割。
	<div class="row" style="background:pink;">
		row要素。一行を定義する。
	</div>
</div>

container要素。グリッドシステムの容器の役割。

row要素。一行を定義する。

</div>

rowを省略してcol-{prefix}-**を使って分割することはできません。　

列を定義する col-{prefix}-{カラム数}クラス

col-{prefix}-カラム数(列数)を利用して列を定義します。col-{prefix}-{カラム数(列数)}はrowクラスに内包されます。

{prefix}には横幅のサイズタイプ(横幅サイズに応じたxl/lg/md/sm/なしなどの種類)が入り、{カラム数(列数)}には1〜12までの数字が入ります。

bootsrap row要素の中にあるcol要素

■上記のソースコード

<div class="container" style="background: skyblue;height: 100px;">
	container要素。グリッドシステムの容器の役割。
	<div class="row" style="background:pink;">
		<div class="col-md-6" style="background:orange">
			col-md-6
		</div>
		<div class="col-md-6" style="background:brown">
			col-md-6			
		</div>
	</div>
</div>

container要素。グリッドシステムの容器の役割。

col-md-6

</div>

col-md-6

</div>

上記例では、col-md-6のように{prefix}の箇所でmdというワードを利用して分割しました。

mdは、具体的には「768px以上の場合は」という意味になり、横幅サイズごとに分割する数を変更することができます。

{カラム数}には1〜12までの数字が入ります。合計で12になるように定義します。

mdのほかにも横幅サイズの大きさに応じて、xl/lg/sm/-などのサイズを指定することができます。各サイズ毎のブレイクポイントや横幅の範囲などは下記の通りです。

Bootstrap4	識別子	Extra small	Small	Medium	Large	Extra large
	ブレークポイント	<576px	≥576px	≥768px	≥992px	≥1200px
	プレフィックス	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

(重要)Bootstrap4とBootstrap3ではブレークポイントが異なります。

Bootstrap3系と4系の最も大きな違いの一つに、ブレークポイントの変更があります。

Bootstrap 3では(xs、sm、md、lg)の4つだったブレークポイントが、Bootstrap 4では、(xs、sm、md、lg)5つに増えました。書き方が変更されたものもあったり、同じ書き方でも動作が変わるものもあるので気をつけましょう。

Bootstrap4	識別子	Extra small	Small	Medium	Large	Extra large
	ブレークポイント	<576px	≥576px	≥768px	≥992px	≥1200px
	プレフィックス	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

Bootstrap3	識別子	Extra small		Small	Medium	Large
	ブレークポイント	<768px		≥768px	≥992px	≥1200px
	プレフィックス	.col-xs-		.col-sm-	.col-md-	.col-lg-

.col-sm-、.col-md-、.col-lg-、と同じプレフィックスでもブレークポイントが異なっていることに注意です。

公式サイト Grid system Bootstrap4.3 Document

下記のように各サイズごとに列数を定義できるので、レスポンシブデザインを簡単に設定することができます。

■上記のソースコード

<body>
  <div class="container" style="background: skyblue;font-size:20px;">
    container要素。グリッドシステムの容器の役割。
    <ul>
      <li>col-mdのブレークポイント：768px以上で2列</li>
      <li>col-xlのブレークポイント：1200px以上で4列</li>
    </ul>
    <div class="row">
      <div class="col-md-6 col-xl-3" style="background:orange">
        col-md-6, col-xl-3
      </div>
      <div class="col-md-6 col-xl-3" style="background:pink">
        col-md-6, col-xl-3
      </div>
      <div class="col-md-6 col-xl-3" style="background:silver">
        col-md-6, col-xl-3
      </div>
      <div class="col-md-6 col-xl-3" style="background:gold">
        col-md-6, col-xl-3
      </div>
    </div>
    <br>
  </div>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>

<body>

container要素。グリッドシステムの容器の役割。

<ul>

<li>col-mdのブレークポイント：768px以上で2列</li>

<li>col-xlのブレークポイント：1200px以上で4列</li>

</ul>

col-md-6, col-xl-3

</div>

col-md-6, col-xl-3

</div>

col-md-6, col-xl-3

</div>

col-md-6, col-xl-3

</div>

<br>

</div>

</body>

{prefix}に記述したクラスは、画面幅がブレークポイントサイズ以上のデバイスに適用されます。

たとえば、上記サンプルのように.col-md-6と指定すると、.col-lg(xl)-**と明示しない限り、lg(xl)サイズでも2列分が適用されます。

■bootstrap.css(col-md-**が768px以上に対して設定されている)

(補足)Bootstrap4では、floatの代わりにフレックスボックスが採用されています

Bootstrap３系では、グリッドシステム(横並び)の方式にfloatが利用されていましたが、Bootstrap4ではフレックスボックスが採用されました。これにより、カラムの順番指定や使い方がBootstrap3とは違う指定方法になっているものがいくつかあります。

■bootstrap3ではfloatが利用されていました。

■bootstrap3ではフレックスボックスが採用されています。

flex …… フレックスコンテナ内のアイテムの幅についてまとめて指定する

▲▲目次に戻る▲▲

グリットシステムのその他クラス・使い方

col-{プレフィックス}で均等幅が作成できる

bootstrap4では、col-{プレフィックス}-{数字}の、数字部分を入れずに使うことで、均等幅のカラムを並べることができます。

■表示例

■ソースコード

<body>
  <div class="container">
    <h1>
      md以上で5つのカラムが均等に並ぶ例
    </h1>
    <div class="row">
      <div class="col-md" style="background-color:skyblue;height:100px;">
        1
      </div>
      <div class="col-md" style="background-color:orange;height:100px;">
        2
      </div>
      <div class="col-md" style="background-color:skyblue;height:100px;">
        3
      </div>
      <div class="col-md" style="background-color:orange;height:100px;">
        4
      </div>
      <div class="col-md" style="background-color:skyblue;height:100px;">
        5
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>

<body>

<h1>

md以上で5つのカラムが均等に並ぶ例

</h1>

</div>

</div>

</div>

</div>

</div>

</body>

カラムのネスト(入れ子)が可能

rowやcol-**-**は入れ子が可能で下記のように設定することができます。

■表示例

■上記のソースコード

<body>
  <div class="container" style="background:blue;">
    <p>container要素</p>
    <div class="row">
      <div class="col-md-6" style="background:skyblue">
        <p style="text-align:center">col-md-6</p>
        <div class="row">
          <div class="col-md-4" style="background:pink">
            col-md-4(入れ子)
          </div>
          <div class="col-md-4" style="background:orange">
            col-md-4(入れ子)
          </div>
          <div class="col-md-4" style="background:aqua">
            col-md-4(入れ子)
          </div>
        </div>
      </div>
    </div>
    <br>
  </div>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>

<body>

<p>container要素</p>

col-md-4(入れ子)

</div>

col-md-4(入れ子)

</div>

col-md-4(入れ子)

</div>

<br>

</div>

</body>

(公式サイト)Nesting columns | CSS・GetBoostrap 4.3

▲▲目次に戻る▲▲

containerの外側で要素を記述することが可能

row、col-{prefix}などのグリッドシステムを利用する際はcontainerの中で記述する必要がありますが、全幅背景のようなcontainerの外側に内容を記述したい場合はcontainerの外側で要素を書くことができます。

たとえば、背景画面などブラウザ全幅の指定が必要な場合は、containerクラスの外側にdivやsectionタグを囲みます。

■上記のソースコード

<body>
  <section style="background:url(https://webst8.com/blog/wp-content/uploads/2017/10/bg-pentagon1.png);height:100px;">
    <div class="container" style="background:skyblue;">
      <p>container要素</p>
      <br>
    </div>
  </section>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>

<body>

<p>container要素</p>

<br>

</div>

</section>

</body>

全幅用のcontainer「container-fluid」

containerの全幅版で「container-fluid」が用意されています。container-fluid内にrowやcol-{prefix}-を記述することができます。

■containerとcontainer-fluidの違い

■上記のソースコード

<body>
  <h1 class="text-center">containerとcontainer-fluidの違い</h1>
  <div class="container" style="background-color: skyblue;">
    <h2>container</h2>
    <div class="row">
      <div class="col-lg-4" style="background-color:orange">
        col-lg-4
      </div>
      <div class="col-lg-4" style="background-color:yellow">
        col-lg-4
      </div>
      <div class="col-lg-4" style="background-color:orange">
        col-lg-4
      </div>
    </div>
  </div>
  <div class="container-fluid" style="background-color: pink; ">
    <h2>container-fluid</h2>
    <div class="row">
      <div class="col-lg-4" style="background-color:orange">
        col-lg-4
      </div>
      <div class="col-lg-4" style="background-color:yellow">
        col-lg-4
      </div>
      <div class="col-lg-4" style="background-color:orange">
        col-lg-4
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>

<body>

<h1 class="text-center">containerとcontainer-fluidの違い</h1>

<h2>container</h2>

col-lg-4

</div>

col-lg-4

</div>

col-lg-4

</div>

<h2>container-fluid</h2>

col-lg-4

</div>

col-lg-4

</div>

col-lg-4

</div>

</body>

なお、container-fluidは全幅ですが、内部余白設定がされています。

offsetの指定で余白を作成する

offset-{prefix}-{カラム数}を利用すると、カラム数分左側に余白(オフセット）をつくることができます。

■表示例

■上記のソースコード

<body>
  <h1 class="text-center">offset-{プレフィックス}-{カラム数}</h1>
  <div class="container" style="background-color:grey;">
    <div class="row">
      <div class="offset-lg-2 col-lg-8" style="background-color: skyblue;">
        ←←col-lg-offset-2で左側に2列分の余白ができた
        <br><br><br>
        水色部分がcol-lg-8です。
        <br><br><br>
        本例では1200px以上(lgとxl)で左側に2列分の余白がついて、
        1199px以下のサイズでは2列分の余白がなくなります
        <br><br><br>
      </div>
    </div>
    </div
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
  </body>

<body>

<h1 class="text-center">offset-{プレフィックス}-{カラム数}</h1>

←←col-lg-offset-2で左側に2列分の余白ができた

水色部分がcol-lg-8です。

本例では1200px以上(lgとxl)で左側に2列分の余白がついて、

1199px以下のサイズでは2列分の余白がなくなります

</div>

</div

</body>

(※注)bootstrapバージョン3の場合は書き方が「col-{prefix}-offset-{カラム数}」になっており、bootstrap4から書き方が変わっているので注意が必要です。

また、小さいサイズのoffsetは大きいサイズに影響を与えるので、offset-{プレフィックス}-0などでリセットする場合もあります。

■offset-md-2が影響してlgサイズで下に落ちた例と、offset-lg-0でリセットした例

■上記のコード

<body>
  <div class="container">
    <h3>lgサイズでもoffset-md-2が効いて2つ目のcol-lg-6が下に落ちている</h3>
    <div class="row">
      <div class="col-md-8 offset-md-2 col-lg-6" style="background-color:orange">
        col-8 offset-2 col-lg-6
      </div>
      <div class="col-lg-6" style="background-color:skyblue;">
        col-lg-6
      </div>
    </div>

    <h3 class="text-center">offset-lg-0でoffsetをリセット</h3>
    <div class="row">
      <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-0" style="background-color:orange">
        col-8 offset-2 col-lg-6
      </div>
      <div class="col-lg-6" style="background-color:skyblue;">
        col-lg-6
      </div>
    </div>
  </div>
</body>

<body>

<h3>lgサイズでもoffset-md-2が効いて2つ目のcol-lg-6が下に落ちている</h3>

col-8 offset-2 col-lg-6

</div>

col-lg-6

</div>

<h3 class="text-center">offset-lg-0でoffsetをリセット</h3>

col-8 offset-2 col-lg-6

</div>

col-lg-6

</div>

</body>

(公式サイト) Offsetting columns | CSS・Bootstrap 4.3

▲▲目次に戻る▲▲

orderでカラムの順番を変える

見た目のカラムの順番を変えたい場合は、order-**を利用します。PC表示とスマホ表示で順番を変えたい場合などに有効です。

■orderでサイドバーとメインコンテンツの順番を変えた例

■上記のソースコード

<body>
  <div class="container">
    <p>
      992px以上でorderが効き、左サイドバーが左に来る
      <br>
      991px以下でorderが無効になり、メインコンテンツ→サイドバーの順番になる
    </p>
    <div class="row">
      <div class="col-lg-9 order-lg-2" style="background-color:skyblue;height:100px;">
        <h2>メインコンテンツ</h2>
      </div>
      <div class="col-lg-3 order-lg-1" style="background-color:orange;height:100px;">
        <h2>サイドバー</h2>
      </div>
    </div>
  </div>
</body>

<body>

<p>

992px以上でorderが効き、左サイドバーが左に来る

<br>

991px以下でorderが無効になり、メインコンテンツ→サイドバーの順番になる

</p>

<h2>メインコンテンツ</h2>

</div>

<h2>サイドバー</h2>

</div>

</body>

(公式サイト)Reordering | Grid system Boostrap 4.3

bootstrap4でpushとpullは廃止されました

Bootstrap3系では、.col-{prefix}-push-{カラム数}や.col-{prefix}-pull-{カラム数}でカラムの順番を変えることができましたが、Bootstrap4では「.order-*」クラスに統一されたため、push/pullは廃止されました。

グリッドシステムについては、このほかにも色々なオプションがあります。詳しくは、(公式サイト)Grid system Boostrap 4.3をご参照ください。

▲▲目次に戻る▲▲

Bootstrap4で利用できるクラス・ユーティリティ

Bootstrap4ではグリッドシステム以外でも便利なクラスやユーティリティー使い方がたくさんあります。本サイトでも紹介しているいくつかの使い方を簡単にご紹介します。

Table(テーブル)

Bootstrap4で用意されているtable用のクラスを利用すると、レスポンシブなテーブルや、色々なスタイルの表を作ることができます。

詳しい使い方は「Bootstrap4 テーブル(table)クラスの使い方を徹底解説」をご参照ください。

Bootstrap4 テーブル(table)クラスの使い方を徹底解説

Border(枠線)

borderはボックス内の枠線を指定する際に使用するプロパティです。枠線や枠線の色・角丸などの設定をすることができます。

詳しい使い方は「Bootstrap4 Border(ボーダー)の使い方を徹底解説」をご参照ください。

Bootstrap4 Border(ボーダー)の使い方を徹底解説

Img(画像)

Bootstrap4で用意されて入る画像系のクラスを利用すると、画像をサムネイルや角丸・円などを設定することができます。

詳しい使い方は「Bootstrap4 IMG画像の使い方を徹底解説」をご参照ください。

Bootstrap4 IMG画像の使い方を徹底解説

Text(テキスト)

Bootstrap4で用意されているtextクラスを利用すれば、文字の整列、折り返し、太さなどを設定できます。

詳しい使い方は「Bootstrap4 Text ユーティリティの使い方を徹底解説」をご参照ください。

Bootstrap4 Text ユーティリティの使い方を徹底解説

Button(ボタン)

buttonクラスを利用すると、a要素、button要素、input要素でボタンのような見た目を作ることができます。

詳しい使い方は「Bootstrap4 Button(ボタン)の使い方を徹底解説」をご参照ください。

Bootstrap4 Button(ボタン)の使い方を徹底解説

Display(ディスプレイ) 表示の仕方を変更する

displayを利用すると、ブレークポイントに応じて表示・非表示の切り替えのほか、色々なdisplay設定をすることができます。

詳しい使い方は「Bootstrap4 displayクラスの使い方を徹底解説」をご参照ください。

Bootstrap4 displayクラスの使い方を徹底解説

Form(フォーム)

Form(フォーム)に関するBootstrap4のクラスを利用すると、レスポンシブなフォームのレイアウトを作ることができます。

Bootstrap フォームの例

詳しい使い方は「Bootstrap4 フォーム(form)クラスの使い方を徹底解説」をご参照ください。

Bootstrap4 フォーム(form)クラスの使い方を徹底解説

Flexユーティリティー (フレックスボックス)

Bootstrap4では、flexユーティリティーが用意されており、フレックスボックス(フレキシブルボックス)の設定がクラス名の設定だけで簡単に実装可能です。

詳しい使い方は「Bootstrap4 Flex(フレックス)ユーティリティの使い方を徹底解説」をご参照ください。

Bootstrap4 Flex(フレックス)ユーティリティの使い方を徹底解説

Card(カード)コンポーネント

Bootstrap4では、Card(カード)というコンポーネントが用意されています(Bootstrap3で用意されていた、wells、panels, wells, thumbnailsは廃止され、Cardに統合されています。)

詳しい使い方は「Bootstrap4 新コンポーネント「Card」の使い方を徹底解説」をご参照ください。

Bootstrap4 新コンポーネント「Card」の使い方を徹底解説

Dropdown(ドロップダウン)

ドロップダウンに関するクラスを利用すると、下記のようにドロップダウンメニューを作成することができます。

詳しい使い方は「Bootstrap4 Dropdown(ドロップダウン)の使い方を徹底解説」をご参照ください。

Bootstrap4 Dropdown(ドロップダウン)の使い方を徹底解説

Navbar(ナビゲーションバー) メニューバーの作成

Navbarを利用すると、下記のようにナビゲーションバー(メニューバー)を作成することができます。

詳しい使い方は「Bootstrap4 ナビゲーションバー(Navbar)の使い方を徹底解説」をご参照ください。

Bootstrap4 ナビゲーションバー(Navbar)の使い方を徹底解説

Tabs(タブメニュー)の作成

BootstrapのTabsコンポーネントを利用すると、下記のようにタブメニューを作成することができます。

詳しい使い方は「Bootstrap4 Tabs(タブメニュー)の使い方を徹底解説」をご参照ください。

Bootstrap4 Tabs(タブメニュー)の使い方を徹底解説

Pagination(ページネーション) ページ送り

ページネーションとは、一つのキーワードで複数のページが存在する場合などの場合に、ページ送りの機能を提供するナビゲーションです。

詳しい使い方は「Bootstrap4 Pagination(ページネーション)でページ送りを作るやり方を徹底解説」をご参照ください。

Bootstrap4 Pagination(ページネーション)でページ送りを作るやり方を徹底解説

Collapse(コラップス) コンテンツの開閉

Collapse(コラップス)を利用すると、コンテンツを開閉することができます。

詳しい使い方は「Bootstrap4 Collapse(コラップス)の使い方・コンテンツを開閉するやり方を徹底解説」をご参照ください。

Bootstrap4 Collapse(コラップス)の使い方・コンテンツを開閉するやり方を徹底解説

Tooltip(ツールチップ) ヒントや注釈に

ツールチップとは、対象の要素にカーソルを合わせたときに小さな領域を表示するJavascriptコンポーネントです。カーソルを対象の要素から外すと表示が消えます。

詳しい使い方は「Bootstrap4 tooltip(ツールチップ)の使い方を徹底解説」をご参照ください。

Bootstrap4 tooltip(ツールチップ)の使い方を徹底解説

Popover(ポップオーバー) ヒントや注釈に

ポップオーバーとは、対象の要素をクリックしたときに小さな領域を表示するJavascriptコンポーネントです。対象の要素をもう一度クリックすると表示が消えます。

詳しい使い方は「Bootstrap4 Popover(ポップオーバー)の使い方を徹底解説」をご参照ください。

Bootstrap4 Popover(ポップオーバー)の使い方を徹底解説

Carousel(カルーセル) スライドショーの使い方

カルーセルとは、回転木馬という意味の英単語で、複数の横に並んだ写真などの項目をマウスやタッチ操作で左右にスライドして項目を入れ替えることができます。スライドショーやスライダーとも呼ばれます。

詳しい使い方は「Bootstrap4 Carousel(カルーセル)によるスライドショーの使い方を徹底解説」

Bootstrap4 Carousel(カルーセル)によるスライドショーの使い方を徹底解説

そのほかの覚えておくと便利なクラス

テキストカラー text-{color}

Bootstrap4では、便利な文字色のクラスtext-{color}が用意されています。ここでは、よく使う文字色をいくつかご紹介します

■表示例

■上記のソースコード

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-white bg-dark">.text-white(わかりやすくするため背景黒色設定)</p>

<p class="text-primary">.text-primary</p>

<p class="text-secondary">.text-secondary</p>

<p class="text-success">.text-success</p>

<p class="text-danger">.text-danger</p>

<p class="text-warning">.text-warning</p>

<p class="text-white bg-dark">.text-white(わかりやすくするため背景黒色設定)</p>

背景色 bg-{color}

Bootstrap4では、便利な背景色のクラスbg-{color}が用意されています。ここでは、よく使う背景色をいくつかご紹介します

■表示例

■上記のソースコード

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-white">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>

<div class="bg-primary text-white">.bg-primary</div>

<div class="bg-secondary text-white">.bg-secondary</div>

<div class="bg-success text-white">.bg-success</div>

<div class="bg-danger text-white">.bg-danger</div>

<div class="bg-warning text-white">.bg-warning</div>

<div class="bg-white text-dark">.bg-white</div>

横幅 w-{%}

Bootstrap4では、横幅に関するクラスw-{%}が用意されています。ここでは、よく使う横幅クラスをご紹介します

■表示例

■上記のソースコード

<div class="w-25 bg-secondary">Width 25%</div>
<div class="w-50 bg-secondary">Width 50%</div>
<div class="w-75 bg-secondary">Width 75%</div>
<div class="w-100 bg-secondary">Width 100%</div>

<div class="w-25 bg-secondary">Width 25%</div>

<div class="w-50 bg-secondary">Width 50%</div>

<div class="w-75 bg-secondary">Width 75%</div>

<div class="w-100 bg-secondary">Width 100%</div>

外部余白 m{方向}-{0〜5,auto}と内部余白 p{方向}-{0〜5}

Bootstrap4では、外部余白に関するm{方向}-{0〜5,auto}と内部余白に関するクラスp{方向}-{0〜5}が用意されています。

外部余白に関するクラス

■表示例

■上記のソースコード

<div class="w-50 bg-secondary m-0">m-0</div>
<div class="w-50 bg-secondary m-1">m-1</div>
<div class="w-50 bg-secondary m-2">m-2</div>
<div class="w-50 bg-secondary m-3">m-3</div>
<div class="w-50 bg-secondary m-4">m-4</div>
<div class="w-50 bg-secondary m-5">m-5</div>
<div class="w-50 bg-secondary mx-auto">mx-auto</div>

クラス	意味
m-0	margin:0
m-1	margin:0.25rem
m-2	margin:0.5rem
m-3	margin:1rem
m-4	margin:1.5rem
m-5	margin:3rem
m{x\|y\|t\|l\|r\|b}-{0〜5}	mx-{0\|1\|2\|3\|4\|5}：左右のmarginが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} my-{0\|1\|2\|3\|4\|5}}：上下のmarginが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} mt-{0\|1\|2\|3\|4\|5}：margin-topが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} mb-{0\|1\|2\|3\|4\|5}：margin-bottomが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} ml-{0\|1\|2\|3\|4\|5}：margin-leftが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} mr-{0\|1\|2\|3\|4\|5}：margin-rightが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem}
mx-auto	横方向のmarginがauto

内部余白 paddingに関するクラス

■表示例

■上記のソースコード

<div class="w-50 bg-secondary p-0">p-0</div>
<hr>
<div class="w-50 bg-secondary p-1">p-1</div>
<hr>
<div class="w-50 bg-secondary p-2">p-2</div>
<hr>
<div class="w-50 bg-secondary p-3">p-3</div>
<hr>
<div class="w-50 bg-secondary p-4">p-4</div>
<hr>
<div class="w-50 bg-secondary p-5">p-5</div>

<hr>

<hr>

<hr>

<hr>

<hr>

クラス	意味
p-0	padding:0
p-1	padding:0.25rem
p-2	padding:0.5rem
p-3	padding:1rem
p-4	padding:1.5rem
p-5	padding:3rem
p{x\|y\|t\|l\|r\|b}-{0〜5}	px-{0\|1\|2\|3\|4\|5}：左右のpaddingが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} py-{0\|1\|2\|3\|4\|5}}：上下のpaddingが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} pt-{0\|1\|2\|3\|4\|5}：padding-topが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} pb-{0\|1\|2\|3\|4\|5}：padding-bottomが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} pl-{0\|1\|2\|3\|4\|5}：padding-leftが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem} pr-{0\|1\|2\|3\|4\|5}：padding-rightが{0 \| 0.25rem \| 0.5rem \| 1rem \| 1.5rem \| 3rem}

【HTML・CSSを個別指導】
Webスクール<「WEBST8」

まとめ

いかがでしたでしょうか。

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の4系の導入からグリッドシステムの使い方を中心に、Bootstrap3系との違いを補足しながら説明しました。

ここでは紹介していませんが、各コンポーネントのオプションの使い方など、他にもたくさんの便利な使い方があります。

詳細は下記の公式サイトに記載されているので、一通り慣れてきたらぜひ他の使い方も色々調べてみてください。
Bootstrap 4.3.ドキュメント

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

YouTubeチャンネルはこちら

今回は、以上になります。最後までご覧いただきありがとうございました。

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

Bootstrap4の使い方 ブートストラップの導入方法と基本を徹底解説！

ブートストラップ(BootStrap)とは

BootStrapの特徴

2019年4月時点の最新はBootstrap4系

BootStrapを使うためには

BootStrapを使うための事前準備

各ファイルをダウンロードして利用する

BootStrapのダウンロード

jQueryのダウンロード

index.htmlの設定

Bootstrapを利用する

CDNを利用してBootstrap4を始める場合

Bootstrapによるグリッドシステム・レスポンシブデザイン

グリッドシステムの基本の使い方

グリッドシステムを使うための容器的役割 containerクラス(必須)

一行を定義する rowクラス

列を定義する col-{prefix}-{カラム数}クラス

グリットシステムのその他クラス・使い方

col-{プレフィックス}で均等幅が作成できる

カラムのネスト(入れ子)が可能

containerの外側で要素を記述することが可能

全幅用のcontainer「container-fluid」

offsetの指定で余白を作成する

orderでカラムの順番を変える

Bootstrap4で利用できるクラス・ユーティリティ

Table(テーブル)

Border(枠線)

Img(画像)

Text(テキスト)

Button(ボタン)

Display(ディスプレイ) 表示の仕方を変更する

Form(フォーム)

Flexユーティリティー (フレックスボックス)

Card(カード)コンポーネント

Dropdown(ドロップダウン)

Navbar(ナビゲーションバー) メニューバーの作成

Tabs(タブメニュー)の作成

Pagination(ページネーション) ページ送り

Collapse(コラップス) コンテンツの開閉

Tooltip(ツールチップ) ヒントや注釈に

Popover(ポップオーバー) ヒントや注釈に

Carousel(カルーセル) スライドショーの使い方

そのほかの覚えておくと便利なクラス

テキストカラー text-{color}

背景色 bg-{color}

横幅 w-{%}

外部余白 m{方向}-{0〜5,auto}と内部余白 p{方向}-{0〜5}

外部余白に関するクラス

内部余白 paddingに関するクラス

まとめ

YouTubeチャンネル開設しました！

おすすめ記事３選

【徹底解説】レンタルサーバーおすすめ比較７選WordPress対応

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【総まとめ】WordPress（ワードプレス）ホームページ作り方

Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！

グリッドシステムを使うための容器的役割　containerクラス(必須)

一行を定義する　rowクラス