Bootstrapの基礎

目次

第1章 イントロダクション

1.1 Webアプリケーションフレームワークの基本

Bootstrapは、HTMLやCSSやJavaScriptで構成されるフロントエンドの Webアプリケーションフレームワークです。

1.1.1 Webアプリケーションフレームワークとは

フレームワークとは、枠組みや骨組みを意味する言葉です。 WebサイトやWebアプリケーションを構築する上で、その骨組みを提供したり、 よく使用する汎用的な機能をまとめて提供するものを Webアプリケーションフレームワークと言います。

フレームワークと似たものにライブラリがあります。 ライブラリは、よく使用する機能を部品化し、それを集めてパッケージ化したものです。 ライブラリが単にコードの再利用を目的としているのに対し、 フレームワークは設計レベルの再利用を目的としています。 ライブラリは部品の集まりですから、部品をどのように組み合わせ、 最終的にどのようなWebサイト・Webアプリケーションにするのかは、製作者に委ねられます。 一方、フレームワークでは、全体の骨組みをテンプレートとして用意し、 製作者はテンプレートの肉付け作業を行います。 Webサイト・Webアプリケーションの土台が既にあるので、後は枠にはめていくだけです。

1.1.2 フレームワーク導入の利点

フレームワークには主に以下の利点があります。

1.2 Bootstrapの特徴

1.2.1 レスポンシブWebデザインに対応

現在、Web政策に置いて、マルチデバイス対応の手法の主流となっているのが、 レスポンシブWebデザイン (Responsive Web Design)です。 1つのWebページで、スマートフォンやタブレットやPCなど複数のデバイスに合わせた 最適なレイアウトで表示する手法です。

レスポンシブWebデザインを構成するのは主に以下の技術です。

1.2.2 グリッドシステムによるレイアウト

グリッドシステム (Grid System)は、グリッド（縦横線の格子）状のガイドラインを下地に、 画像や文字をブロックごとに配置する手法を指します。 統一感や一貫性といったレイアウトのクオリティを維持するために使用されてきました。

近年は、Webページのレイアウト手法としても用いられる機会が増え、 Bootstrapをはじめとする多くのCSSフレームワークのレイアウト手法としても採用されています。

Bootstrapでは、レイアウトを縦に12分割した12カラムのグリッドシステムが採用されており、 横一行の合計が12カラムになるようにレイアウトをしていきます。 グリッドシステムとレスポンシブWebデザインを組み合わせて、モバイルでは12カラム分、 デスクトップでは4カラム分といった、画面に応じたコンテンツの配置が可能になります。

1.2.3 デザイン性に優れたコンポーネント

Bootstrapは、フォームやボタンやナビゲーションなどのGUIのパーツも用意しています。 このような要素をコンポーネントと言います。

洗練されたデザインのコンポーネントを自作しようとすると、かなりの時間がかかります。 Bootstrapを利用すると、HTMLのタグにクラスを追加するだけで、 体裁の整ったコンポーネントを利用できます。

1.3 Bootstrapの歴史

1.3.1 Bootstrapの誕生と歩み

1.3.2 バージョンによる違い

Bootstrap 4では、コンポーネント、jQueryプラグイン、ドキュメントなど Bootstrap 3のほぼすべてが書き直されました。 中でも大きな変更点は以下の通りです。

1.4 Bootstrapの導入

1.4.1 Bootstrapの導入に必要な環境

Bootstrapを導入するにあたっては、これまでのフロントエンドの開発環境があればそれで十分です。 特別に必要となるものはありません。 必要なアプリケーションは、HTML、CSS、JavaScriptを編集するテキストエディタと、 表示を確認するWebブラウザです。

1.4.2 ダウンロードして利用する

Bootstrapの公式サイト (http://getbootstrap.com/)にアクセスし、 [Documentation]の中の[Download] (http://getbootstrap.com/docs/4.1/getting-started/download/) に移動します。

このページの [Compiled CSS and JS]の下にある [Download]ボタンをクリックし、 ファイルのダウンロードを実行します。

ダウンロードしたファイルを解凍すると、cssフォルダとjsフォルダができます。 主にcssフォルダ内のbootstrap.min.cssを使用します。

1.4.3 HTMLの雛形

BootstrapでWebサイトを構築する場合は、 ダウンロードしたCSSファイルやJavaScriptファイルをHTMLから読み込む必要があります。 作業フォルダを作成し、その中にcssフォルダとjsフォルダを作成します。 cssフォルダには、ダウンロードしたbootstrap.min.cssを格納します。 jsフォルダには、bootstrap.bundle.min.jsを格納します。

HTMLの雛形を以下に示します。

リスト 1-2 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">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1 class="text-success">Hello, world!</h1>
<script src="js/jquery-3.3.1.slim.min.js"></script> 
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

1.4.4 CDNを利用する。

Stack Pathが無償で提供しているBootstrap CDNを利用することもできます。 リスト1-4のサンプルは、Bootstrap公式サイトの「Starter template」を元にしています。 前述の雛形との違いは、ファイルの参照先がCDNになっている点と、 CDNからのクロスサイトスクリプティング (XSS) を防ぐため、 integrity属性とcrossorigin属性がある点です。

リスト 1-4 Bootstrap CDNによる設定例 
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

第2章 Bootstrapのレイアウト

2.1 Bootstrapのグリッドシステム

Bootstrapのレイアウトは、ページ幅を12列に分割したグリッドシステムを採用しています。 この機能は、ページを2段組みや3段組みにしたり、コンポーネントを横に並べて配置したりする 場合などに活用できます。

2.1.1 カラム(column:列)とガター(gutter:溝)

12列に分割したグリッドの列をカラム (column:列)と言います。 各カラムの間の余白をガター (gutter:溝)と言います。

各カラムの左右内側　(padding)には 15pxのガターが設定されているため、 コンテンツ間の余白は 30pxとなります。

2.1.2 コンテナ

Bootstrapのグリッドシステムを使用してレイアウトする際、 最初に使用するのがコンテナ (container)です。 コンテナは、コンテンツを格納する箱で、ページの水平中央にコンテンツを配置します。

コンテナには、固定幅コンテナと可変幅コンテナの2種類があります。 画面サイズによってコンテンツの最大幅を切り替える場合は、 固定幅コンテナのcontainerクラスを使用します。

リスト 2-1 固定幅コンテナ 
<div class="container">
  <!-- ここにコンテンツを入れる -->
</div>

画面サイズ全幅に渡る流動的なコンテンツ幅を持たせるには、 可変幅コンテナのcontainer-fluidクラスを使用します。

リスト 2-2 可変幅コンテナ 
<div class="container-fluid">
  <!-- ここにコンテンツを入れる -->
</div>

2.1.3 rowクラス

コンテナの中に、rowクラスを格納します。 rowクラスは、カラムをレイアウトするために使用するクラスで、この中にコラムをまとめます。 複数行にしたい場合は、containerの中にrowクラスを指定した要素を追加します。

リスト 2-3 コンテナ要素の中にrowクラスを指定した要素を格納する 
<div class="container">
  <div class="row"><!-- 1行目 -->
    <!-- ここにコンテンツを入れる -->
  </div>
  <div class="row"><!-- 2行目 -->
    <!-- ここにコンテンツを入れる -->
  </div>
</div>

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

以下の例では、3つの等幅カラムを作成します。 colクラスを指定した3つのカラムは、rowクラスを指定した要素で1行にまとめられます。

リスト 2-4 Bootstrapのグリッドシステムの基本構造 
<div class="container">
  <div class="row">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="col">3列目</div>
  </div>
</div>
1列目
2列目
3列目

2.2 列の自動レイアウト

2.2.1 等幅カラム

リスト 2-5 等幅カラム 
<div class="container">
  <div class="row">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
  </div>
  <div class="row">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="col">3列目</div>
  </div>
</div>
1列目
2列目
1列目
2列目
3列目

2.2.2 指定幅カラム

リスト 2-6 指定幅カラムのレイアウト 
<h3>1列カラム × 12列分</h3>
<div class="container">
  <div class="row">
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
  </div>
</div>
<h3>2列カラム + 4列カラム + 6列カラム = 12列分</h3>
<div class="container">
  <div class="row">
    <div class="col-2">col-2</div>
    <div class="col-4">col-4</div>
    <div class="col-6">col-6</div>
  </div>
</div>
<h3>5列カラム + 7列カラム = 12列分</h3>
<div class="container">
  <div class="row">
    <div class="col-5">col-5</div>
    <div class="col-7">col-7</div>
  </div>
</div>

1列カラム × 12列分

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1

2列カラム + 4列カラム + 6列カラム = 12列分

col-2
col-4
col-6

5列カラム + 7列カラム = 12列分

col-5
col-7

2.2.3 1カラムのみ幅を指定

リスト 2-7 1カラムのみ幅を指定 
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col-6">col-6</div>
    <div class="col">col</div>
  </div>
</div>
col
col-6
col

2.3 レスポンシブなグリッドシステム

2.3.1 5段階のレイアウト制御

2.3.2 ブレイクポイントによる切り替え

リスト 2-8 ブレイクポイントによる切り替え 
<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>
col-sm-8
col-sm-4
col-sm
col-sm
col-sm

2.3.3 可変幅カラム

リスト 2-9 可変幅カラム 
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col-auto">col-auto</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col">col</div>
    <div class="col-md-auto">col-md-auto : Medium以上でコンテンツによって幅が可変</div>
    <div class="col">col</div>
  </div>
</div>
col
col-auto
col
col
col-md-auto : Medium以上でコンテンツによって幅が可変
col

2.3.4 等幅カラムを複数行に分解

リスト 2-10 等幅カラムを複数行に分割する 
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>
col
col
col
col

2.3.5 行の分割をブレイクポイントで切り替え

リスト 2-11 行の分割をブレイクポイントで切り替え 
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100 d-none d-md-block"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>
col
col
col
col

2.3.6 複数クラスの組み合わせ

リスト 2-12 複数クラスの組み合わせ 
<h3>ペース：全幅＋半幅カラム、Medium以上：8列＋4列カラム</h3>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">col-12とcol-md-8</div>
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
  </div>
</div>
<h3>ペース：半幅カラム×3、Medium以上：4列カラム×3</h3>
<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
  </div>
</div>

ペース：全幅＋半幅カラム、Medium以上：8列＋4列カラム

col-12とcol-md-8
col-6とcol-md-4

ペース：半幅カラム×3、Medium以上：4列カラム×3

col-6とcol-md-4
col-6とcol-md-4
col-6とcol-md-4

2.4 カラムの整列

2.4.1 行単位での垂直方向の整列

リスト 2-13 行単位での垂直方向整列 
<h3>垂直上揃え：align-items-start</h3>
<div class="container">
  <div class="row align-items-start">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>
<h3>垂直中央揃え：align-items-center</h3>
<div class="container">
  <div class="row align-items-center">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>
<h3>垂直下揃え：align-items-end</h3>
<div class="container">
  <div class="row align-items-end">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

垂直上揃え：align-items-start

col
col
col

垂直中央揃え：align-items-center

col
col
col

垂直下揃え：align-items-end

col
col
col

2.4.2 カラム単位での垂直方向の整列

リスト 2-14 カラム単位での垂直方向整列 
<div class="container">
  <div class="row">
    <div class="col align-self-start">align-self-start</div>
    <div class="col align-self-center">align-self-center</div>
    <div class="col align-self-end">align-self-end</div>
  </div>
</div>
align-self-start
align-self-center
align-self-end

2.4.3 水平方向の整列

リスト 2-15 水平方向の整列 
<h3>水平左揃え：justify-content:flex-start</h3>
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
</div>
<h3>水平中央揃え：justify-content:flex-center</h3>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
</div>
<h3>水平右揃え：justify-content:flex-end</h3>
<div class="container">
  <div class="row justify-content-end">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
</div>
<h3>等間隔に配置：justify-content:space-around</h3>
<div class="container">
  <div class="row justify-content-around">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
</div>
<h3>両端から均等に配置：justify-content:space-between</h3>
<div class="container">
  <div class="row justify-content-between">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
</div>

水平左揃え：justify-content:flex-start

col-4
col-4

水平中央揃え：justify-content:flex-center

col-4
col-4

水平右揃え：justify-content:flex-end

col-4
col-4

等間隔に配置：justify-content:space-around

col-4
col-4

両端から均等に配置：justify-content:space-between

col-4
col-4

2.4.4 ガターの削除

リスト 2-17 ガターを削除したカラム 
<h3>no-guttersありの場合</h3>
<div class="container">
  <div class="row no-gutters">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>
<h3>no-guttersなしの場合（参考）</h3>
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>
<h3>コンテナなし、no-guttersありの場合</h3>
<div class="row no-gutters">
  <div class="col">col</div>
  <div class="col">col</div>
</div>

no-guttersありの場合

col
col

no-guttersなしの場合（参考）

col
col

コンテナなし、no-guttersありの場合

col
col

2.4.5 カラムの折り返し

リスト 2-18 カラムの折り返し 
<div class="container">
  <div class="row">
    <div class="col-9">col-9</div>
    <div class="col-4">col-4<br>
      9列+4列=13列。このカラムで12列を超えるため、新しい行に折り返される</div>
    <div class="col-6">col-6<br>
      4列+6列=10列。このカラムは12列以内に収まっているため、新しい行内に継続される</div>
  </div>
</div>
col-9
col-4
9列+4列=13列。このカラムで12列を超えるため、新しい行に折り返される
col-6
4列+6列=10列。このカラムは12列以内に収まっているため、新しい行内に継続される

2.5 カラムの並べ替え

2.5.1 order-*クラスで並べ替え

リスト 2-19 コンテンツの並べ替え 
<div class="container">
  <div class="row">
    <div class="col">第1のカラム（順序指定ない）</div>
    <div class="col order-12">第2のカラム（順序指定は12）</div>
    <div class="col order-1">第2のカラム（順序指定は1）</div>
  </div>
</div>
第1のカラム（順序指定ない）
第2のカラム（順序指定は12）
第2のカラム（順序指定は1）
リスト 2-20 コンテンツの並べ替え (order-fist) 
<div class="container">
  <div class="row">
    <div class="col">第1のカラム（順序指定ない）</div>
    <div class="col">第2のカラム（順序指定ない）</div>
    <div class="col order-first">第3のカラム（順序指定は1）</div>
  </div>
</div>
第1のカラム（順序指定ない）
第2のカラム（順序指定ない）
第3のカラム（順序指定は1）

2.5.2 カラムのオフセット

リスト 2-21 オフセット用クラスによるカラムのオフセット 
<div class="container">
  <div class="row">
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4 offset-md-4">col-md-4とoffset-md-4</div>
  </div>
</div>
col-md-4
col-md-4とoffset-md-4
リスト 2-22 オフセットのリセット 
<div class="container">
  <div class="row">
    <div class="col-md-4">col-md-4</div>
    <div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0</div>
  </div>
</div>
col-md-4
col-sm-5とcol-md-6
col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0
リスト 2-22 オフセットのリセット 
<div class="container">
  <div class="row">
    <div class="col-md-3 ml-md-auto">col-md-3とml-md-auto</div>
    <div class="col-md-3 ml-md-auto">col-md-3とml-md-auto</div>
  </div>
</div>
col-md-3とml-md-auto
col-md-3とml-md-auto

2.5.3 グリッドレイアウトの入れ子

リスト 2-24 グリッドレイアウトの入れ子 
<div class="container">
  <div class="row">
    <div class="col-sm-9">第一階層：col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">第二階層：col-8とcol-sm-6</div>
        <div class="col-4 col-sm-6">第二階層：col-4とcol-sm-6</div>
      </div>
    </div>
    <div class="col-sm-3">第一階層：col-sm-3</div>
  </div>
</div>
第一階層：col-sm-9
第二階層：col-8とcol-sm-6
第二階層：col-4とcol-sm-6
第一階層：col-sm-3

2.6 レイアウトのためのユーティリティ

2.6.1 Displayユーティリティ

2.6.2 Visibilityユーティリティ

2.6.3 Flexユーティリティ

2.6.4 Spacingユーティリティ

第3章 基本的なスタイリング

3.1 タイポグラフィ

3.1.1 見出し

3.1.2 見出しに副見出しを付ける

3.1.3 見出しを目立たせる

3.1.4 リード

3.1.4 インラインテキスト要素

3.1.5 Textユーティリティ

3.1.6 略語

3.1.7 引用文

3.1.8 引用元の表示

3.1.9 引用文の位置合わせ

3.1.10 リスト

3.1.11 インラインリスト

3.1.12 定義リスト

3.2 コード

3.2.1 インラインのコード表記

3.2.2 コードブロックの表記

3.2.3 変数の表記

3.2.4 ユーザーインプットの表記

3.2.5 サンプル出力

3.3 画像

3.3.1 レスポンシブ画像

3.3.2 サムネイル画像

3.3.3 画像の位置合わせ

3.4 テーブル

3.4.1 テーブルの基本スタイル

3.4.2 暗色テーブル

3.4.3 テーブルヘッドのオプション

3.4.4 縞模様のテーブル

3.4.5 罫線付きのテーブル

3.4.6 罫線なしのテーブル

3.4.7 テーブル行のマウスオーバー表示

3.4.8 テーブルのコンパクト化

3.4.9 テーブル行・セルの色付け

3.4.10 キャプション

3.4.11 レスポンシブ対応のテーブル

3.5 図表

3.5 1 図表の基本的なスタイリング

3.5.2 図表キャプションの位置合わせ

3.6 Rebootによる初期設定

3.6.1 Rebootによって初期化されているスタイル

3.6.2 全要素へのリブート設定

3.6.3 body要素へのリブート設定

3.6.4 見出しと段落へのリブート設定

3.6.5 リストへのリブート設定

3.6.6 整形済みのテキストへのリブート設定

3.6.7 テーブルへのリブート設定

3.6.8 フォームへのリブート設定

3.6.9 リンクへのリブート設定

3.6.10 その他要素へのリブート設定

3.6.11 HTML5のhidden属性

第4章 基本的なコンポーネント

4.1 ジャンボトロン

4.1.1 基本的な使用例

4.1.2 ジャンボトロンを全幅で表示する

4.2 アラート

4.2.1 基本的な使用例

4.2.2 リンクの色

4.2.3 アラート内にコンテンツを追加する

4.2.4 アラートを閉じる

4.3 バッジ

4.3.1 基本的な使用例

4.3.2 カウンターを作成する

4.3.3 ピル型のバッジを作成する

4.3.4 アクション付きのバッジを作成する

4.4 プログレス

4.4.1 基本的な使用例

4.4.2 プログレスバーにテキストラベルを追加する

4.4.3 プログレスバーの高さを変更する

4.4.4 プログレスバーの背景を変更する

4.4.5 複数のプログレスバーを重ねて表示する

4.4.6 プログレスバーをストライブにする

4.4.7 プログレスバーのストライブをアニメーションにする

4.5 カード

4.5.1 基本的な使用例

4.5.2 カードのスタイルを変更する

4.5.3 カードのサイズを変更する

4.5.4 カードのテキストを整列する

4.5.5 カードにナビゲーションを組み込む

4.5.6 カードの画像とテキストをアニメーションにする

4.5.7 カードをレイアウトする

4.6 メディアオブジェクト

4.6.1 基本的な使用例

4.6.2 メディアオブジェクトの入れ子

4.6.3 メディアの位置合わせ

4.6.4 メディアオブジェクトの並べ替え

4.6.5 メディアオブジェクトをリストに組み込む

第5章 ナビゲーションのコンポーネント

5.1 ナビゲーション

5.1.1 基本的な使用例

5.1.2 ナビゲーションに使用できるスタイル

5.1.3 レスポンシブ対応のナビゲーション

5.1.4 ドロップダウンナビゲーション

5.1.5 ナビゲーションのJavaScript使用例

5.2 ナビゲーションバー

5.2.1 外枠の作成

5.2.2 サブコンポーネントの作成

5.2.3 ナビゲーションバーの配色

5.2.4 ナビゲーションバーの幅の設定

5.2.5 ナビゲーションバーの配置

5.2.6 レスポンシブ対応の設定

5.3 パンくずリスト

5.3.1 基本的な使用例

5.4 リストグループ

5.4. 1基本的な使用例

5.4.2 リスト項目をアクティブ状態にする

5.4.3 リスト項目を無効状態にする

5.4.4 リンク付きリストグループ

5.4.5 ボタンのリストグループ

5.4.6 リストグループの背景色を変更する

5.4.7 リンク付きリストグループの背景色を変更する

5.4.8 バッジ付きコンテンツのリストグループ

5.4.9 カスタムコンテンツのリストグループ

5.4.10 枠なしのリストグループ

5.5 ページネーション

5.5.1 基本的な使用例

5.5.2 ページネーションにアイコンを使用する

5.5.3 リンクに無効状態や現在位置であることを示す

5.5.4 ページネーションのサイズを変更する

5.5.5 ページネーションの配置

第6章 フォームとボタンのコンポーネント

6.1 フォーム

6.1.1 基本的な使用例

6.1.2 チェックボックスとラジオボタン

6.1.3 レイアウトを調整する

6.1.4 ヘルプテキストを表示する

6.1.5 一連のフォームグループをまとめて無効にする

6.1.6 フォームの入力検証機能を使う

6.1.7 Bootstrap独自にスタイル設定されたフォームを使用する

6.2 入力グループ

6.2.1 基本的な使用例

6.2.2 入力グループのサイズ調整

6.2.3 チェックボックスやラジオボタンのアドオン

6.2.4 複数の入力コントロール

6.2.5 複数のアドオンを組み合わせる

6.2.6 ボタン付きアドオン

6.2.7 ドロップダウン付きアドオン

6.2.8 スプリットボタンのアドオン

6.2.9 カスタムフォームの組み込み

6.3 ボタン

6.3.1 基本的な使用例

6.3.2 アウトラインボタンを作成する

6.3.3 ボタンサイズを変更する

6.3.4 ブロックレベルのボタンを作成する

6.3.5 アクティブ状態のボタンを作成する

6.3.6 無効状態のボタンを作成する

6.3.7 切り替えボタンを作成する

6.3.8 チェックボックスとラジオボタンを作成する

6.3.9 メソッド

6.4 ボタングループ

6.4.1 基本的な使用例

6.4.2 ボタンツールバーを作成する

6.4.3 サイズを変更する

6.4.4 ドロップダウンメニューを入れ子にする

6.4.5 垂直方向のボタングループを作成する

6.5 ドロップダウン

6.5.1 基本的な使用例

6.5.2 ドロップダウン方向を変更する

6.5.3 メニュー項目のリンクに使用できる要素

6.5.4 メニューの位置揃えを変更する

6.5.5 ドロップダウンメニューにさまざまな要素を組み込む

6.5.6 ドロップダウンメニューに自由形式のテキストを配置する

6.5.7 ドロップダウンのメニュー項目に無効やアクティブ状態を設定する

6.5.8 ドロップダウンにリンクなしのメニュー項目を追加する

6.6 ドロップダウンのJavaScript使用

6.6.1 ドロップダウンのオプション

6.6.2 ドロップダウンのメソッド

6.6.3 ドロップダウンのイベント

第7章 JavaScriptを利用したコンポーネント

7.1 BootstrapのJavaScriptプラグイン

7.1.1 BootstrapのJavaScriptプラグイン

7.1.2 Bootstrapのデータ属性API

7.2 カルーセル

7.2.1 基本的な使用例

7.2.2 コントローラを表示させる

7.2.3 インジケータを表示させる

7.2.4 スライドのキャプションを表示させる

7.2.5 フェードで遷移させる

7.3 カルーセルのJavaScript使用

7.3.1 カルーセルのメソッド

7.3.2 カルーセルのイベント

7.4 折り畳み

7.4.1 基本的な使用例

7.4.2 複数の要素の表示と非表示とを切り替える

7.4.3 アコーディオンを作成する

7.5 折り畳みのJavaScript使用

7.5.1 折り畳みのメソッド

7.5.2 折り畳みのイベント

7.6 モーダル

7.6.1 基本的な使用例

7.6.2 サイズのオプション

7.7 モーダルのJavaScript使用

7.7.1 モーダルのメソッド

7.7.2 モーダルのイベント

7.8 スクロールスパイ

7.8.1 基本的な使用例

7.8.2 body要素以外の要素での使用例

7.9 スクロールスパイのJavaScript使用

7.9.1 スクロールスパイのメソッド

7.9.2 スクロールスパイのイベント

第8章 ユーティリティ

8.1 Colorユーティリティ

8.1.1 文字色を設定するクラス

8.1.2 背景色を設定するクラス

8.2 Borderユーティリティ

8.2.1 ボーダーを追加するクラス

8.2.2 ボーダーを削除するクラス

8.2.3 ボーダー色を設定するクラス

8.2.4 角丸を設定するクラス

8.3 Displayユーティリティ

8.3.1 表示形式を設定するクラス

8.3.2 要素の表示／非表示を設定するレスポンシブなクラス

8.3.3 印刷時の表示／非表示を設定するクラス

8.4 Sizingユーティリティ

8.4.1 幅を設定するクラス

8.4.2 高さを設定するクラス

8.4.3 最大幅100%を設定するクラス

8.4.4 最大高100%を設定するクラス

8.5 Spacingユーティリティ

8.5.1 Spacingユーティリティの記法

8.5.2 自動マージンの応用

8.6 Flexユーティリティ

8.6.1 flexboxを有効にするユーティリティ

8.6.2 flexコンテナの主軸方向を設定するクラス

8.6.3 主軸方向の整列をするクラス

8.6.4 交差軸方向の整列をするクラス

8.6.5 flexアイテムを交差軸上で個別に整列するクラス

8.6.6 flexコンテナ全幅に渡って等幅で整列するクラス

8.6.7 flexアイテムの幅の伸縮を指定するクラス

8.6.8 flexアイテムの折り返しを設定するクラス

8.6.9 特定のflexアイテムの表示順序を入れ替えるクラス

8.6.10 自動マージンでflexアイテムを分離する

8.6.11 複数行におけるflexアイテムの交差軸を整列するクラス

8.7 Floatユーティリティ

8.7.1 フロートを設定するクラス

8.7.2 ブレイクポイントでフロートを切り替えるクラス

8.7.3 Clearfixユーティリティ

8.8 Positionユーティリティ

8.8.1 要素の位置指定をするクラス

8.8.2 最上部に固定するクラス

8.8.3 最下部に固定するクラス

8.8.4 最上部に達すると固定するクラス

8.9 Textユーティリティ

8.9.1 文字の均等割り付けを設定するクラス

8.9.2 文字の左寄せ／右寄せ／中央揃えを設定するクラス

8.9.3 文字を折り返さないよう設定するクラス

8.9.4 長いテキストを省略記号で表すクラス

8.9.5 文字を大文字や小文字に変換するクラス

8.9.6 文字の太さとイタリック体を設定するクラス

8.9.7 等幅フォントを指定するクラス

8.10 Vertical alignユーティリティ

8.10.1 インライン要素の垂直方向の整列

8.10.2 テーブルセルの垂直方向の整列

8.11 その他のユーティリティクラス

8.11.1 スクリーンリーダー用ユーティリティ

8.11.2 Visibilityユーティリティ

8.11.3 クローズアイコンユーティリティ

8.11.4 Embedユーティリティ

8.11.5 Shadowsユーティリティ

第9章 Bootstrapでモックアップを作る

9.1 サイト概要とファイルの準備

9.1.1 サイト概要

9.1.2 ワイヤーフレームの確認

9.1.3 使用する主なコンポーネント

9.2 新規ファイル作成

9.2.1 head要素の修正

9.2.2 基本構造の入力

9.3 ヘッダーの作成

9.4 ナビゲーションバーの作成

9.4.1 ナビゲーションバーのレイアウト

9.4.2 ナビゲーションバーの基本構成

9.4.3 サブコンポーネントの組み込み

9.4.4 ナビゲーションバーの完成図

9.5 メインビジュアルの作成

9.5.1 メインビジュアルのレイアウト

9.5.2 メインビジュアルの基本構成

9.5.3 インジケータの組み込み

9.5.4 各スライドの組み込み

9.5.5 各コントローラの組み込み

9.5.6 メインビジュアルの完成図

9.6 コンテンツ 01(News) の作成

9.6.1 コンテンツ01のレイアウト

9.6.2 コンテンツ01の構成

9.6.3 コンテンツ01の完成図

9.7 コンテンツ 02(About) の作成

9.7.1 コンテンツ02のレイアウト

9.7.2 コンテンツ02の構成

9.7.3 コンテンツ02の完成図

9.8 コンテンツ 03(Menu) の作成

9.8.1 コンテンツ03のレイアウト

9.8.2 コンテンツ03の構成

9.8.3 コンテンツ03の完成図

9.9 コンテンツ 04(Coupon) の作成

9.9.1 コンテンツ04のレイアウト

9.9.2 コンテンツ04の構成

9.9.3 コンテンツ04の完成図

9.10 コンテンツ 05(Information) の作成

9.10.1 コンテンツ05のレイアウト

9.10.2 コンテンツ05の構成

9.10.3 左側セクションにテーブルを作成

9.10.4 右側セクションにGoogleマップを埋め込み

9.10.5 コンテンツ05の完成図

9.11 フッタ―の作成

9.11.1 フッターのレイアウト

9.11.2 フッターの構成

9.11.3 フッターの完成図

9.12 リンクの設定と追加CSSの作成

9.12.1 ナビゲーションバーのリンク

9.12.2 コンテンツ02のリンク

9.12.3 フッターのリンク

9.12.4 ページ内のリンクの位置調整

9.13 下層ページ (Contact) の作成

9.13.1 ファイルの準備

9.13.2 下層ページのレイアウト

9.13.3 下層ページの構成

9.13.4 パンくずリストの作成

9.13.5 フォームの作成

9.13.6 下層ページの完成図

第10章 Bootstrapのカスタマイズ

10.1 Bootstrapのオリジナルスタイルを上書きする

10.1.1 カスタマイズ用のCSSを参照する

10.1.2 BootstrapのCSS設計の方針

10.1.3 クラス名の付け方のポイント

10.1.4 スタイルを上書きする際の注意点

10.2 Sassを使ってカスタマイズする

10.2.1 Sassの利用環境を整える

10.2.2 SCSSファイルの準備

10.2.3 背景色にグラデーションを使用できるようにする

10.2.4 Sass変数を上書きする

10.2.5 基本の配色を変更する

10.2.6 bodyの背景色、文字色、リンク色を変更する

10.2.7 Spacingユーティリティを変更する

10.2.8 Sizingユーティリティを変更する

10.2.9 ブレイクポイントを変更する

10.2.10 コンテナを変更する

10.2.11 グリッドのカラム数やガター幅を変更する

10.2.12 書式を変更する

10.3 CSS変数を利用する

10.3.1 Bootstrapで定義されているCSS変数

10.3.2 ミックスインを利用する