記事にはプロモーションが含まれる場合があります。
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の基本について説明し、バージョン4系の導入の仕方とグリッドシステムの基本、およびBootstrapバージョン3系との違いについて解説していきます。
今回は、Bootstrap4の設定方法とグリッドシステムについて説明していきますね。
目次
- ブートストラップ(BootStrap)とは
- BootStrapを使うためには
- Bootstrapによるグリッドシステム・レスポンシブデザイン
- グリットシステムのその他クラス・使い方
- Bootstrap4で利用できるクラス・ユーティリティ
- Table(テーブル)
- Border(枠線)
- Img(画像)
- Text(テキスト)
- Button(ボタン)
- Display(ディスプレイ) 表示の仕方を変更する
- Form(フォーム)
- Flexユーティリティー (フレックスボックス)
- Card(カード)コンポーネント
- Dropdown(ドロップダウン)
- Navbar(ナビゲーションバー) メニューバーの作成
- Tabs(タブメニュー)の作成
- Pagination(ページネーション) ページ送り
- Collapse(コラップス) コンテンツの開閉
- Tooltip(ツールチップ) ヒントや注釈に
- Popover(ポップオーバー) ヒントや注釈に
- Carousel(カルーセル) スライドショーの使い方
- そのほかの覚えておくと便利なクラス
- まとめ
ブートストラップ(BootStrap)とは
BootStrapの特徴
Bootstrap公式サイト
BootstrapはもともとTwitter社で作られたもので、レスポンシブデザイン対応のCSSフレームワークの一つです。
たとえば、人のキャラを作るときに、顔・目・口などいくつかの部品があらかじめ用意されていて、それらを選択してキャラクターを作成できるようなアプリとかでありますよね。
Bootstrapの登場によって、制作者は予め用意されたコードを記載するだけで、見栄えの良いWebサイトを短期間で制作することができるようになりました。
- レスポンシブデザイン対応
- デザイン性に優れたコンポーネント
- 他シスタムのカスタマイズに役に立つ
- レスポンシブデザイン対応
- レスポンシブデザインとは、1つのWebサイトで、PCからタブレット、スマートフォンなどの大きさの異なる画面に合わせて最適なレイアウトを表示する手法です。レスポンシブデザインは現在主流の方式です。
- デザイン性に優れたコンポーネント
- コンポーネント（部品）とは、フォームやボタン、ナビゲーションなどのパーツのことで、BootStrapであらかじめ用意されています。制作者はこれらのコンポーネント（部品）を自作する必要はなく、HTMLタグにクラスを追加するだけで、体裁の整ったコンポーネントをすぐに利用できます。
- BootStrapを採用しているサービスが多く、他シスタムカスタマイズに役に立つ
- ワードプレスの人気テーマでもたくさん利用されており、覚えておくとワードプレスのレイアウト調整にも役立つシーンが多いと思います。
■記述例 aタグのクラスにBootstrapのボタン用クラス(btn btn-success)を記述。
<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つの主要なアーキテクチャ変更を中心にさまざまな変更が行われている。
合わせて読みたい記事
下記の「Bootstrap3.3.7の使い方 導入方法と基本・レスポンシブデザインを徹底解説」にBootstrap3.3.7の使い方を掲載しています。
Bootstrap4の前のバージョンですが、既存サイトやシステムではまだまだ多く使われていますので、必要に応じて勉強しておくと役に立ちます。
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
ダウンロード後、解凍してきたフォルダー内には、cssフルダーにはコンパイルされたcssファイル、jsフォルダーにはJavaScriptファイルが格納されています。
たくさんのファイルがありますが、Bootstrapの一番多くの機能を含んでいるCSSファイルがbootstrap.cssで、Javascriptファイルがbootstrap.bundle.jsです。
同じ名前のファイルで末尾に「min」が付いているのは、圧縮版といい、改行やコメント、スペースなどを除去して圧縮（Minify）した軽量版になっています。内容に違いはありませんが、改行やスペースなどが省略されて人間にとっては読みにくくなるものの、読み込みスピードが高速化されます。
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も読み込む設定にしましょう。
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>
（※）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>
下記のように緑色や赤色のボタンのようになっています。
内容としては、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の略で、本例でいうところの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">
下記を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>
(※)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>
上記のように、グリッドシステムを利用することでパソコンやタブレット、スマートフォンなど画面幅が異なってもレイアウトを組み替えやすくしています。
なお、1つの行に12個以上の列が配置されている場合、13個目以降を含むグループは新しい行に折り返されます。
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>
■上記の表示例 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>
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>
上記例では、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- |
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>
{prefix}に記述したクラスは、画面幅がブレークポイントサイズ以上のデバイスに適用されます。
たとえば、上記サンプルのように.col-md-6と指定すると、.col-lg(xl)-**と明示しない限り、lg(xl)サイズでも2列分が適用されます。
■bootstrap.css(col-md-**が768px以上に対して設定されている)
Bootstrap３系では、グリッドシステム(横並び)の方式にfloatが利用されていましたが、Bootstrap4ではフレックスボックスが採用されました。これにより、カラムの順番指定や使い方がBootstrap3とは違う指定方法になっているものがいくつかあります。
■bootstrap3ではfloatが利用されていました。
■bootstrap3ではフレックスボックスが採用されています。
グリットシステムのその他クラス・使い方
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>
カラムのネスト(入れ子)が可能
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>
(公式サイト)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>
全幅用の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>
なお、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>
また、小さいサイズの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>
(公式サイト) 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>
(公式サイト)Reordering | Grid system Boostrap 4.3
Bootstrap3系では、.col-{prefix}-push-{カラム数}や.col-{prefix}-pull-{カラム数}でカラムの順番を変えることができましたが、Bootstrap4では「.order-*」クラスに統一されたため、push/pullは廃止されました。
グリッドシステムについては、このほかにも色々なオプションがあります。詳しくは、(公式サイト)Grid system Boostrap 4.3をご参照ください。
Bootstrap4で利用できるクラス・ユーティリティ
Bootstrap4ではグリッドシステム以外でも便利なクラスやユーティリティー使い方がたくさんあります。本サイトでも紹介しているいくつかの使い方を簡単にご紹介します。
Table(テーブル)
Bootstrap4で用意されているtable用のクラスを利用すると、レスポンシブなテーブルや、色々なスタイルの表を作ることができます。
詳しい使い方は「Bootstrap4 テーブル(table)クラスの使い方を徹底解説」をご参照ください。
Border(枠線)
borderはボックス内の枠線を指定する際に使用するプロパティです。枠線や枠線の色・角丸などの設定をすることができます。
詳しい使い方は「Bootstrap4 Border(ボーダー)の使い方を徹底解説」をご参照ください。
Img(画像)
Bootstrap4で用意されて入る画像系のクラスを利用すると、画像をサムネイルや角丸・円などを設定することができます。
詳しい使い方は「Bootstrap4 IMG画像の使い方を徹底解説」をご参照ください。
Text(テキスト)
Bootstrap4で用意されているtextクラスを利用すれば、文字の整列、折り返し、太さなどを設定できます。
詳しい使い方は「Bootstrap4 Text ユーティリティの使い方を徹底解説」をご参照ください。
Button(ボタン)
buttonクラスを利用すると、a要素、button要素、input要素でボタンのような見た目を作ることができます。
詳しい使い方は「Bootstrap4 Button(ボタン)の使い方を徹底解説」をご参照ください。
Display(ディスプレイ) 表示の仕方を変更する
displayを利用すると、ブレークポイントに応じて表示・非表示の切り替えのほか、色々なdisplay設定をすることができます。
詳しい使い方は「Bootstrap4 displayクラスの使い方を徹底解説」をご参照ください。
Form(フォーム)
Form(フォーム)に関するBootstrap4のクラスを利用すると、レスポンシブなフォームのレイアウトを作ることができます。
Bootstrap フォームの例
詳しい使い方は「Bootstrap4 フォーム(form)クラスの使い方を徹底解説」をご参照ください。
Flexユーティリティー (フレックスボックス)
Bootstrap4では、flexユーティリティーが用意されており、フレックスボックス(フレキシブルボックス)の設定がクラス名の設定だけで簡単に実装可能です。
詳しい使い方は「Bootstrap4 Flex(フレックス)ユーティリティの使い方を徹底解説」をご参照ください。
Card(カード)コンポーネント
Bootstrap4では、Card(カード)というコンポーネントが用意されています(Bootstrap3で用意されていた、wells、panels, wells, thumbnailsは廃止され、Cardに統合されています。)
詳しい使い方は「Bootstrap4 新コンポーネント「Card」の使い方を徹底解説」をご参照ください。
Dropdown(ドロップダウン)
ドロップダウンに関するクラスを利用すると、下記のようにドロップダウンメニューを作成することができます。
詳しい使い方は「Bootstrap4 Dropdown(ドロップダウン)の使い方を徹底解説」をご参照ください。
Navbarを利用すると、下記のようにナビゲーションバー(メニューバー)を作成することができます。
詳しい使い方は「Bootstrap4 ナビゲーションバー(Navbar)の使い方を徹底解説」をご参照ください。
Tabs(タブメニュー)の作成
BootstrapのTabsコンポーネントを利用すると、下記のようにタブメニューを作成することができます。
詳しい使い方は「Bootstrap4 Tabs(タブメニュー)の使い方を徹底解説」をご参照ください。
Pagination(ページネーション) ページ送り
ページネーションとは、一つのキーワードで複数のページが存在する場合などの場合に、ページ送りの機能を提供するナビゲーションです。
詳しい使い方は「Bootstrap4 Pagination(ページネーション)でページ送りを作るやり方を徹底解説」をご参照ください。
Collapse(コラップス) コンテンツの開閉
Collapse(コラップス)を利用すると、コンテンツを開閉することができます。
詳しい使い方は「Bootstrap4 Collapse(コラップス)の使い方・コンテンツを開閉するやり方を徹底解説」をご参照ください。
Tooltip(ツールチップ) ヒントや注釈に
ツールチップとは、対象の要素にカーソルを合わせたときに小さな領域を表示するJavascriptコンポーネントです。カーソルを対象の要素から外すと表示が消えます。
詳しい使い方は「Bootstrap4 tooltip(ツールチップ)の使い方を徹底解説」をご参照ください。
Popover(ポップオーバー) ヒントや注釈に
ポップオーバーとは、対象の要素をクリックしたときに小さな領域を表示するJavascriptコンポーネントです。対象の要素をもう一度クリックすると表示が消えます。
詳しい使い方は「Bootstrap4 Popover(ポップオーバー)の使い方を徹底解説」をご参照ください。
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>
背景色 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>
横幅 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>
外部余白 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>
| クラス | 意味 |
|---|---|
| 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} |
まとめ
いかがでしたでしょうか。
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の4系の導入からグリッドシステムの使い方を中心に、Bootstrap3系との違いを補足しながら説明しました。
ここでは紹介していませんが、各コンポーネントのオプションの使い方など、他にもたくさんの便利な使い方があります。
詳細は下記の公式サイトに記載されているので、一通り慣れてきたらぜひ他の使い方も色々調べてみてください。
Bootstrap 4.3.ドキュメント
今回は、以上になります。最後までご覧いただきありがとうございました。