bootstrap

Bootstrapメモ①

学習履歴

■はじめに

Web 画面の開発に取り掛かっているが、Bootstrap が便利そうなので、使い方をメモしておく。

■Bootstrap とは

Bootstrap は、CSS のフレームワークだ。

Web ページの様々な表示に関するスタイルシートのクラスが取り揃えられており、
それらのクラスを HTML タグに組み込むだけで、様々な表示や動きもった
かっこいい Web画面が作れるようになる。

Bootstrap 利用するには、3 種類の方法がある。

<利用方法>
1.ソースを ダウンロード
して利用する

2.CDNから利用する

3.パッケージマネージャーを利用する。

■条件

・CDN を利用する場合は、ネットワークに接続できること
・ダウンロードを利用する場合は、Bootstrap ファイルを任意のフォルダに保存しておくこと

■導入の初歩の初歩

Bootstrap に本格的に入る前に、さらっと導入方法を確認して、イメージを
掴んでおこう。

Introduction に「Starter template」があったので、ベースはこれを使う。

index.html ファイルを作成して、以下のコードを入力後、好きな場所に保存してほしい。

index.html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>

それから画面に表示させてみよう。

img.png

分かりにくいと思うが、この Hello, World! が表示されていたら成功だ。

■Navbarを使ってみる

Navbar は、HTML のナビゲーションバーを簡単につくれるクラスだ。

Navbar のページから好きなバーを選んで、先ほどの作成した index.html に張り付けてみる。

1. ナビゲーションバーを追加

<!-- Add NavVer --> とコメントした nav タグで囲った部分が追加したコードだ。

index.html
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Add NavVer -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>

設定が終えたら、表示させてみよう。

img.png

一瞬で、ナビゲーションバーができた。
すごい、ちゃんとドロップダウンリストも出せる。

あと、画面を縮めるとちゃんと縮小もしてくれる。

img.png

スマホにも対応ばっちりだ。
※文字は縮小されてみにくくなるかもだが

ちなみにこの拡大・縮小は、Bootstrap の、グリッドレイアウト と呼ばれるレイアウトに
関する機能によるものだ。

グリッドとは、画面を縦横に分割したもので、Excel の方眼紙をイメージして貰えれば想像しやすいと思う。

img.png

グリッドレイアウトでは、表示される画面の幅に応じて、横方向のグリッドの
レイアウトが自動で調整される。

2. Navbarバーの色の変更

色の変更もできるらしい。

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

さっきのコードの nav タブに追加してみよう。

<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark">

img.png

3. Navbar中央寄せ

中央寄せもできるらしい。

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

index.html を div タグで囲ってみよう。

img.png

簡単だが、HTML に専用のクラスを追加するだけでレイアウトをかっこよくできることが分かった。

Sass の導入

Sass(Syntactically Awesome StyleSheets) は、スタイルシートを生成するための簡易言語だ。

Ruby ベースで開発されているので、Ruby を ここ でダウンロードしよう。
※ここからは、Windows 環境での説明

ダウンロードが完了すると Windows 環境の場合、以下のコマンドプロンプトが立ち上がる。
img.png

1 を入力して Enter を押すとインストールが開始される。
その後、2 → 3 と同様に入力し、インストールが完了されるのを待つ。
(2, 3 は必要なのかは不明だけど)

インストールが完了したらコマンドプロンプトを立ち上げて、sass の
インストールを行う。

sass.install
gem install sass

これで準備は完了だ。

Sass は、スタイルシートではなく、スタイルシートを生成するためのデータにすぎないので、
css として使用するためには、コンパイルする必要がある。

実行コマンドはこうなる。

sass [Sassファイル]:[CSS ファイル]

style.scss ファイルを作成し、以下の内容を記述しよう。

sytle.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

記述が完了したら、コマンドプロンプトで、scss ファイルを置いたディレクトリに移動し、
コンパイルしてみよう。

sass style.scss:style.css

正常にコンパイルされたら、style.sass ファイルの格納場所と同じ場所に
style.css ファイルが出力される。

style.css
body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

/*# sourceMappingURL=style.css.map */

正直、いちいちコンパイルしないで、css ファイルに直接書き込んだ方が楽そうに見えるが、
活用方法は後で考えよう。

グリッドスタイルの基本

1. グリッドスタイルの列と行

グリッドは、Excel の方眼紙みたいなものだ。
つまり、列 (row) と 行 (col) の概念がある。

グリッドレイアウトは、Web ページを列と行で分割してコンテンツを埋め込んでいくことが基本になる。

img.png

2. グリッドレイアウトの基本タグ

グリッドコードの基本形はこうだ。

<div class="container">
 <div class="row">
   <div class="col">
    -----コンテンツ-----
   </div>
 </div>

 <!-- 必要な分だけ増やす-->
 <div class="row">
   <div class="col">
    -----コンテンツ-----
   </div>
  
  <div class="col">
    -----コンテンツ-----
   </div>

  <div class="col">
    -----コンテンツ-----
   </div>
 </div>
</div>

それぞれのタグの意味を補足する。

・div class="container"
グリッドレイアウトで表示させたいページの外枠。
イメージとしては、Excel方眼紙そのもの。

・div class="row"
行 (row) を作るタグ。
イメージとしては、Excel 方眼紙の横列。
container の中なら好きなだけ設置できる。

.div class="col"
列 (col) を作るタグ。
イメージとしては、Excel 方眼紙の縦列。
グリッドレイアウトの機能を使用する場合は、ここにコンテンツを配置する
row の中なら好きなだけ設置できる。

3. グリッドの列数と画面サイズ

・グリッドの列数

Bootstrap のグリッドは、横方向に 12 列で分かれている。

つまり、12 列の区切りを意識してコンテンツを配置する必要があるんだ。

img.png

・画面サイズ

画面サイズも基準がある。

サイズ 説明
極小サイズ(-) 幅576px未満。コンテンツのレイアウトは変更されない。
小型サイズ(sm) 幅576px以上。コンテンツは、540px未満だと折り返す。
中型サイズ(md) 幅768px以上。コンテンツは、720px未満だと折り返す。
大型サイズ(lg) 幅992px以上。コンテンツは、960px未満だと折り返す。
極大サイズ(xl) 幅1200px以上。コンテンツは、1140px未満だと折り返す。

・指定方法

クラス名の横に基準となる画面サイズと列数の情報を付与する。

class="col-サイズ-列数"

例)<div class="col-sm-3">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TopPage</title>
    <link rel="stylesheet" href="../../../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../../css/style.css"/>

    <script src="../../../js/jquery-3.3.1.min.js"></script>
    <script src="../../../js/popper.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/script.js"></script>

</head>
<body>
    <div class="container">
        <h1>Welcome To Rabbit Project</h1>
        <div class="row">
            <div class="col-md-4">col 4</div>
            <div class="col-md-4">col 4</div>
            <div class="col-md-4">col 4</div>
        </div>

        <div class="row">
            <div class="col-sm-6">col 6</div>
            <div class="col-sm-6">col 6</div>
        </div>

        <div class="row">
            <div class="col-sm-12">col 12</div>
        </div>
    </div>

</body>
</html>
style.css
div {
  padding: 5px 10px;
  border: 1px solid lightgray; }

/*# sourceMappingURL=style.css.map */

img.png

縮めるとコンテンツが縦に並ぶ。

img.png

ものすごく簡単だ。

・複数の幅指定

画面サイズによって列数の割り当てを変えたい場合は、複数サイズ指定することもできる。

<div class="container">
        <h1>Welcome To Rabbit Project</h1>
        <div class="row">
            <div class="col-lg-7 col-md-6 col-sm-4">
                <div>col main</div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-4">
                <div>col sub</div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4">
                <div>col sub</div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div>col 12</div>
            </div>
        </div>
    </div>

この例では、に足すと 12 になるようにしている。

<div class="col-lg-7 col-md-6 col-sm-4">
<div class="col-lg-3 col-md-3 col-sm-4">
<div class="col-lg-2 col-md-3 col-sm-4">
          12       12       12

・可変コンテナ

グリッドレイアウトには、固定コンテナと可変コンテナの 2 種類のコンテナがある。

固定コンテナは、幅のサイズがある一定の大きさになったときに一気に変化がでる。
対して、可変コンテナはサイズに合わせてなめらかに表示サイズが変更される。

可変コンテナにする方法は簡単で、container クラスに fruid 属性を付けるだけだ。

<body>
 <div class="container-fruid">
  ・・・
 </div>
</body>

・コンテナの二重構造

コンテナを二重にもできる。

<body>
    <div class="container-fruid">
        <h1>Welcome To Rabbit Project</h1>
        <div class="container-fruid">
            <div class="row">
                <div class="col-lg-7 col-md-6 col-sm-4">
                    <div>col main</div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-4">
                    <div>col sub</div>
                </div>
                <div class="col-lg-2 col-md-3 col-sm-4">
                    <div>col sub</div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div>col 12</div>
                </div>
            </div>
        </div>
    </div>
</body>

・コンテナのネスト

コンテナをネストすることもできる。
その際は、行 (row) をネストする。

<body>
    <div class="container-fruid">
        <h1>Welcome To Rabbit Project</h1>
        <div class="container-fruid">
            <div class="row">

                <div class="col-lg-7 col-md-6 col-sm-4">
                    <div class="row"><!-- ネスト -->
                        <div class="col-md-6">
                            <div>main content A</div>
                        </div>
                        <div class="col-md-6">
                            <div>main content B</div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-4">
                    <div>col sub</div>
                </div>
                <div class="col-lg-2 col-md-3 col-sm-4">
                    <div>col sub</div>
                </div>
            </div>
        </div>
    </div>
</body>

4. スタイル・ユーティリティ

Bootstrap では、主なスタイルがあらかじめ用意されている。
これらを利用することで、簡単にスタイルを適用することができる。

・色の指定

■カラーテーブル

タグ 意味
primary 主要な情報、やや明るいブルー
secondary 副次的な情報、グレー
success 成功したことを報告、グリーン
info インフォメーション、くすんだブルー
warning 警告、オレンジ
danger 危険、レッド
light 白に近いライトグレー
dark 黒に近いダークグレー

テキストの色を設定

「text-○○」とすると適用できる。

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>TEST</h1>
            </div>
        </div>
        <div class="row" style="background-color:#0033">
            <div class="col-sm-12 text-primary">
                <h1>TEST</h1>
            </div>
            <div class="col-sm-12 text-secondary">
                <h1>TEST</h1>
            </div>
            <div class="col-sm-12 text-success">
                <h1>TEST</h1>
            </div>
            <div class="col-sm-12 text-text-info">
                <h1>TEST</h1>
            </div>
            <div class="col-sm-12 text-warning">
                <h1>TEST</h1>
            </div>
            <div class="col-sm-12 text-danger">
                <h1>TEST</h1>
            </div>
            <div class="col-sm-12 text-light">
                <h1>TEST</h1>
            </div>
            <div class="col-sm-12 text-dark">
                <h1>TEST</h1>
            </div>
        </div>

    </div>
</body>

※スタイルシートの適用なし
img.png

スタイル・ユーティリティの主なクラス

text と同じ要領で他の html 要素も装飾できる。
※○○には、カラーテーブルのタグを指定する

■クラステーブル

クラス名 適応箇所
bg-○○ 背景色の設定
table-○○ テーブルカラーの指定
border ボーダーを指定
border-top(bottom, right, left)-0 上(下、右、左)の線を消す
border-○○ ボーダーの色を指定
rounded 四隅を丸める
rounded-top(bottom, right, left, circle) 上(下、右、左)の2各を丸める
rounded-circle 枠線を楕円形にする
d-inline インラインを設定する(改行が入らないようにする)
d-block ブロックを設定する(改行が入るようにする)
d-inline-block インラインブロック(インラインとして並べられるが、その内部は1つのブロックとしてまとめられる)
float-right 右端から並べる
float-left 左端から並べる
float-none フロートをOFFにする
clearfix 特定の場所のフロートを解除する
d-flex フレックス(複数のタグの整列)を指定
d-inline-flex インラインでフレックス(複数のタグの整列)を指定
d-flex flex-row 横方向に整列する
d-flex flex-row-reverse 横方向に逆順に整列する
d-flex flex-column 縦方向に整列する
d-flex flex-column-reverse 縦方向に逆順に整列する
text-left(center, right, jsutify) テキストの左(中央、右、均等)揃え
↓mergin/paddingの指定 「m-x-3」のように指定する
m marginの指定
p paddingの指定
x left, right を指定
y top, bottomを設定
t topを設定
b bottomを設定
r rightを設定
l leftを設定
0 幅をゼロに指定
1 幅を0.25remに指定
2 幅を0.5remに指定
3 幅を1remに指定
4 幅を1.5remに指定
5 幅を3remに指定
auto 幅を自動調整
↓width/hightの指定 「w-25」のように指定する
w 幅(wight)の指定
h 高さ(height)の指定
25 25%に設定
50 50%に設定
75 75%に設定
100 100%に設定

まだまだ Bootstrap には、クラスがあるが、メモが長くなったので以上にする。

まとめ

・Bootstrp の基本的な使い方を学んだ。