1. HOME
  2. プログラミング
  3. Bootstrap
  4. 【入門】初心者必見！Bootstrapの使い方

【入門】初心者必見！Bootstrapの使い方

【入門】初心者必見！Bootstrapの使い方

みなさんこんにちは、さくちゃんです。
本日は、Bootstrapの使い方について紹介していきます。
では早速やっていきましょう！

目次

Bootstrapとは？

まずはBootstrapについて解説していきます。
Wiki先生では、Bootstrapはこのように説明されています。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。

https://ja.wikipedia.org/wiki/Bootstrap

本来、HTMLやCSS、JavaScriptを使って作成するフォームやナビゲーション（Menu）などが、
HTMLコードを書いただけで、簡単に作成できるというわけなんです。

あらかじめBootstrap側でデザインテンプレートが用意されており、決められたコードを入力すると、そのデザインテンプレートを読み込むことができます。

また、レスポンシブデザインにも簡単に対応することができます。
これがBootstrapです。

必要な要素の追加

まずは必要な要素を書いていきます。Bootstrapではあらかじめ「Starter template」というものが用意されているので、そちらをコピーしてエディタに貼り付けて使いましょう。

<!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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

これで準備は完了です。

Bootstrapは基本、class名を指定してあげることで変更できます。
ではそれぞれの、Bootstrapの使い方について見ていきましょう！

文字色・背景色の変更

文字色・背景色の変更は、CSSでは「color」や「background」で指定しましたが、Bootstrapでは下のように書いていきます。

<p class="text-primary">文字色の変更</p>

<p class="bg-primary">背景色の変更</p>

文字色の変更は「text」、背景色の場合は「bg」をclass名に指定します。

「primary」は、Bootstrap側で用意されている色のことを指しています。
下の図をご覧ください。

Color

こちらがあらかじめ用意されている色になります。詳しく見たい方はこちらをご覧ください。
これで簡単に文字色、背景色を変更することができます。

文字の配置・サイズの変更

文字の配置、サイズの変更は、CSSでは「text-align:center;」「width/height:25px;」などと指定したはずです。しかしBootstrapでは下のように書いていきます。

<p class="text-center">文字の配置</p>

<div class="w-25">サイズの変更</div>

文字の配置は、「text-center(中央)」以外にも「text-left(左)」「text-right(右)」と指定することも可能です。

サイズの変更は、Bootstrap側であらかじめサイズが用意されており、下のように指定することができます。

  • 「25％」　→　「w-25」
  • 「50％」　→　「w-50」
  • 「75％」　→　「w-75」
  • 「100％」　→　「w-100」

上以外の数値を指定することはできないので、注意しましょう。
heightも同様で、「w」を「h」に変更することで指定することができます。

padding・margin

padding,marginを指定するときは、CSSでは「padding-top:30px;」や「margin-bottom:30px;」などpadding/marginと上下左右を指定する必要がありました。しかしBootstrapでは、めちゃくちゃ簡単に指定することができます。

paddingの場合は「p」、marginの場合は「m」を書き、そのあとに上下左右の頭文字だけを書くだけで指定できます。書き方は下のように書きます。

  • p- / m-　→　全方向
  • pt- / mt-　→　上方向（top）
  • pr- / mr-　→　右方向（right）
  • pb- / mb-　→　下方向（bottom）
  • pl- / ml-　→　左方向（left）
  • py- / my-　→　上下方向（top、bottom）
  • px- / mx-　→　右左方向（right、left）

この後にサイズを書いていきます。
サイズはpx等で表すのではなく、０〜５の数字で表します。
下のようにそれぞれの０〜５の数字を指定すると、右側のサイズが反映されます。

  • ０　→　０
  • １　→　0.25rem
  • ２　→　0.5rem
  • ３　→　1.0rem
  • ４　→　1.5rem
  • ５　→　3.0rem

また、marginのみ「auto」を指定することができ、中央揃えにすることが可能です。

実際に書くときは「p-3」や「mb-5」などと書いていきます。

グリッドシステム

グリッドシステムとは？

グリッドシステムとは何かというと、Wiki先生ではこのように解説されています。

940ピクセル幅のグリッドレイアウトが標準設計であり、利用者は代わりに可変幅レイアウトを使用できる。両者ともに、携帯電話、縦長と横長、タブレット、パソコンの4つの閲覧端末や解像度に合わせてカラム幅を調整する機能がある。

https://ja.wikipedia.org/wiki/Bootstrap

簡単にいうと、作成したWebサイトをスマートフォン、タブレット、PCで反映させるときに、自動で幅を調整してくれる機能のことを言います。

図で表すと下のようになります。
PCの場合だと、均等に3つのボックスが表示されます。

グリッド

これがスマートフォンの場合だと、下のようになります。

このように、サイズに合わせて、自動でボックスの幅を変えてくれます。
これがグリッドシステムです。

では実際に、グリッドシステムの書き方について見ていきましょう。

container（コンテナ）

グリッドシステムを書くときは、まず始めに「container」というコンテナを作成していきます。

「container」とは倉庫のようなもので、この「container」の中に、row（行）、col（列）を書いていきます。「container」の書き方は

<div class="container">

</div>

と書きます。
では次に、row（行）について見ていきましょう！

row（行）

row（行）は、行を表します。
イメージは、Excelの行と同じです。
書き方は

<div class="container">
<div class="row">


</div>
</div>

と書きます。
先ほぼ言ったように、container（コンテナ）の中に書きます。

では次に、col（列）について見ていきましょう。

col（列）

col（列）は、列を表します。カラムとも呼ばれたりします。
イメージはExcelの列です。

書き方は

<div class="container">
<div class="row">
　　
　　<div class="col">1</div>
　　<div class="col">2</div>
　　<div class="col">3</div>

</div>
</div>

と書きます。
一度ブラウザで確認してみましょう。

ちょっとわかりにくいので、前回学んだ背景色の色を変えてみましょう。

<div class="container">
<div class="row">
　　
　　<div class="col bg-primary">1</div>
　　<div class="col bg-danger">2</div>
　　<div class="col bg-info">3</div>

</div>
</div>

ではブラウザで確認してみましょう

うまく反映されましたね。
今回は３つの列を追加したため、3つの列が表示されています。

このようにしてcol（列）を書いていきます。

col（列）はそのまま記述すると、均等に幅を調整してくれるのですが、12分割で割合を指定することもできます。例えば、12を8と4に分けて書く場合は、下のように書きます。

<div class="container">
<div class="row">
　　
　　<div class="col-8 bg-primary">1</div>
　　<div class="col-4 bg-danger">2</div>

</div>
</div>

このように割合を指定することができます。イメージはこのような感じです。

この技術を使って、レスポンシブにも対応することが可能になります。

また、12よりも多い数字、少ない数字を指定することもできます。

例として、10と5を指定した場合を見てみましょう。
書き方はこのように書いていきます。

<div class="container">
<div class="row">
　　
　　<div class="col-10 bg-primary">1</div>
　　<div class="col-5 bg-danger">2</div>

</div>
</div>

ではブラウザで確認してみましょう。

12よりも多い場合は、自動的に改行されるようになります。

次に少ない場合について見ていきましょう。今回は8と2で指定していきます。
書き方はこのように書いていきます。

<div class="container">
<div class="row">
　　
　　<div class="col-8 bg-primary">1</div>
　　<div class="col-2 bg-danger">2</div>

</div>
</div>

今回はわかりやすいように、8と4で分割した行と比較してみます。
ではブラウザで確認して見ましょう。

12に満たない場合は、足りない部分が空白になっていることがわかります。

table

テーブルを挿入するときは、<table>タグを使って書いていきます。
そしてclass名には「table」と指定してあげます。完成図はこのような感じです。

書き方はこう書いていきます。
それぞれのタグについて説明していきます。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<thead>

<thead>は、テーブルの行のヘッダの部分を指します。

<thead>タグの中に、表示したい文字を書いていきます。

<tr>

<tr>タグは、table rowの略で、テーブルの行を意味します。

行に文字を表示したい場合、<tr>タグで囲み表示させます。

<th>

table headerの略で、ヘッダ部分の内容を意味します。

先ほぼの<tr>タグと組み合わせて、テーブル行のヘッダ部分のセルの内容を書きます。
属性 scope=”col” は 、<th>タグが「下方向」か「右方向」かを表しています。

  • col　→　下方向
  • row　→　右方向

例えば上の図でいうと、「First」の内容は下方向（col）か右方向（row）かということになります。
当然「First」が示す内容は「Mark」「Jacob」「Larry」ですので、書くときは

<th scope="col">First</th>

と書きます。

<tbody>

<tbody>は、テーブルのボディ部分を指します。

ボディ部分に書く内容は、<tbody>タグの中に書いていきます。

<td>

<td>はtable dataの略で、1つ1つのセルのことを指し、<tbody>タグの中で表示させたい内容を書きます。

以上がそれぞれのタグの説明でした。
ここでは出てきませんが、<tfoot>タグというものもあり、これはtable footerの略で、テーブルのフッター部分を指します。よく合計の値を表示させるときに使います。これも覚えておきましょう。

Navs

基本的なナビゲーションは、下のように書きます。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

では、それぞれのタグについて見ていきましょう。

nav

ナビゲーションは基本リストタグを使用します。
<ol>、<ul>などがありますが、<ul>を使っていきます。

<ul>タグにclass名として「nav」を付けてあげると、自動的にナビゲーションと認識してくれます。

書き方は

<ul class="nav">

</ul>

と書いていきます。

nav-item

「nav-item」は、１つ１つのナビゲーションを指します。
上の図でいうと「Active」や「Link」がこれに当たります。

<li>タグにclass名として「nav-item」と書くと、自動的に読み込んでくれます。

書き方は

<li class="nav-item">

</li>

と書きます。

nav-link

「nav-item」が書けたら、次はナビゲーションをクリックした時のリンク、表示名を書いていきます。
リンクは<a>タグを使用し、class名に「nav-link」と書いていきます。
また、「active」と指定すると、指定した「nav-item」が一番最初に表示されるようになります。

書き方は

<li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
 </li>

と書いていきます。
この「nav-item」を増やすことで、ナビゲーションを作成することができます。

disabled

先ほど紹介した「active」は、一番最初に表示した場合に指定しました。
そのほかにも「disabled」というclass名があります。

これはリンクを無効にしたいときに使用します。

あまり使用することはありませんが、一様覚えておきましょう。

Navbar

Navbarを使うと、下のようなナビゲーションが簡単に作成できます。

本来であれば、HTML、CSSを使って、たくさんのコードを書いていき、細かな設定をしていくのですが、「Navbar」を使えば簡単にかっこいいナビゲーションが作成できます。

また、レスポンシブデザインにも対応しており、Bootstrapにあるテンプレートを使うことで、下のようなレスポンシブナビゲーションが作成できます。

では実際に書いていきましょう！

Navbarの書き方

Navbarの書き方は下の通りです。
それぞれのタグについて説明していきます。
「ナビゲーション」で説明した内容は省略します。

<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="#" tabindex="-1" aria-disabled="true">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>

<nav class=” “>に下のクラス名を書いていきます。

navbar

「navbar」をクラス名にしていることで、navbarとして認識されます。
「navbar」は必ず指定しましょう。

navbar-expand-lg

「navbar-expand-lg」は、どのタイミングでレスポンシブデザインに変換するかということを指定しています。
例えば「navbar-expand-lg」だと、サイズが「lg」以上(992px〜)のときは通常のデザイン。「lg」未満(0〜991px)のときはレスポンシブ デザインに変換されます。
「lg」の部分を「sm」「md」に変更することも可能です。

navbar-light bg-light

「navbar-light bg-light」は色を指定するクラスです。
明るめの色は「nav-light」, 暗めの色は「nav-dark」を選択できます。「bg- * 」 ユーティリティでカスタマイズもできます。
詳しくは公式サイトの「Color schemes」をご覧下さい。

navbar-brand

「navbar-brand」はサイトのタイトル・ロゴを指定するクラスです。
文字だけではなく、画像を指定することもできます。

<button class=”navbar-toggler” ・・・

レスポンシブ時のボタンの操作を指定するクラスです。

<span class=”navbar-toggler-icon”></span>

レスポンシブ時のボタンの画像を表示するクラスです。

display

ブレークポイント

displayを使うと、レスポンシブに対応することができます。

Bootstrapではいくつかのブレークポイントが設けられています。
下の図をご覧下さい。

このブレークポイントを指定してあげることで、レスポンシブに対応することができます。
具体的には、ある要素を「スマートフォンのときだけ表示させる」などと指定する時に使用します。
ちなみに、スマートフォンのときは「xs〜sm」、タブレットのときは「md」を指定してあげるといいでしょう。

前回紹介した「グリッドシステム」でも活用することなので必ず覚えましょう！

https://sakuchan.org/bootstrap4/

書き方

では実際に、「〜のときだけ表示/非表示にする」という要素を書いていきましょう！
まずはそれぞれのときのクラスを確認しましょう。

表示クラス
全て表示d-block
xsのときだけ表示d-block d-sm-none
smのときだけ表示d-none d-sm-block d-md-none
mdのときだけ表示d-none d-md-block d-lg-none
lgのときだけ表示d-none d-lg-block d-xl-none
xlのときだけ表示d-none d-xl-block
非表示クラス
全て非表示d-none
xsのときだけ非表示d-none d-sm-block
smのときだけ非表示d-sm-none d-md-block
mdのときだけ非表示d-md-none d-lg-block
lgのときだけ非表示d-lg-none d-xl-block
xlのときだけ非表示d-xl-none

displayに対する値として今回は「block」を指定しましたが、それ以外にも「inline」「inline-block」を指定しても構いません。

では実際に書いていきます。
例えば、「ある要素をxsのときだけ表示させる」と書くときは

<div class="d-block d-sm-none">
block
</div>

と書きます。
実際にブラウザで確認して見ましょう。
xs以外のときは表示されないので、下のようになります。

そしてxsのときになると「block」という文字が表示されます。

このようにしてdisplayを使います。

Shadows

影(Shadows)

Bootstrapでは、簡単に下の図のような「影（Shadows）」をつけることができます。

ただし細かな設定はできません。
細かな設定をする場合は、CSSの「box-shadow」を使って設定していきます。

では実際にコードを書いていきましょう！

書き方

書き方は、上の図のように4つあります。
では1つずつ見ていきましょう。

影なし

影を指定しない場合は、クラス名に「shadow-none」と指定します。
書き方は下のように書いて行きます。

<div class="shadow-none">No shadow</div>

小さい影

小さい影を指定する場合は、クラス名に「shadow-sm」と指定します。
書き方は下のように書いて行きます。

<div class="shadow-sm">Small shadow</div>

通常の影

通常の影を指定する場合は、クラス名に「shadow」と指定します。
書き方は下のように書いて行きます。

<div class="shadow">Regular shadow</div>

大きい影

大きい影を指定する場合は、クラス名に「shadow-lg」と指定します。
書き方は下のように書いて行きます。

<div class="shadow-lg">Larger shadow</div>

角を丸くする

角を丸くしたいときは、クラス名に「rounded」とつけると丸くできます。
書き方は

<div class="shadow rounded">Regular shadow</div>

と書きます。

Pagination

影(Shadows)

Bootstrapでは、簡単に下の図のような「影（Shadows）」をつけることができます。

ただし細かな設定はできません。
細かな設定をする場合は、CSSの「box-shadow」を使って設定していきます。

では実際にコードを書いていきましょう！

書き方

書き方は、上の図のように4つあります。
では1つずつ見ていきましょう。

影なし

影を指定しない場合は、クラス名に「shadow-none」と指定します。
書き方は下のように書いて行きます。

<div class="shadow-none">No shadow</div>

小さい影

小さい影を指定する場合は、クラス名に「shadow-sm」と指定します。
書き方は下のように書いて行きます。

<div class="shadow-sm">Small shadow</div>

通常の影

通常の影を指定する場合は、クラス名に「shadow」と指定します。
書き方は下のように書いて行きます。

<div class="shadow">Regular shadow</div>

大きい影

大きい影を指定する場合は、クラス名に「shadow-lg」と指定します。
書き方は下のように書いて行きます。

<div class="shadow-lg">Larger shadow</div>

角を丸くする

角を丸くしたいときは、クラス名に「rounded」とつけると丸くできます。
書き方は

<div class="shadow rounded">Regular shadow</div>

と書きます。

Cards

そもそもCardsとは何かと言うと、言葉で説明すると難しいのですが、簡単に言うと下の図のようなものです。

Cards1

↑こんないかにもカッコ良さそうな感じのものが簡単に作れます。

では実際に基本的な書き方と、グリットシステムを利用した書き方について見ていきましょう。

基本的な書き方

上の図のような基本的な書き方は下のようになります。
それぞれのタグについて説明して行きます。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

card

まずはじめに、「Cards」として認識させるために、クラス名に「card」と指定します。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">

</div>

また、「style」で幅（width）の大きさを決めることもできます。

card-img-top

card-img-topは、cardの中に画像を入れるときにクラス名で「card-img-top」と指定してあげます。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">
 <img src="..." class="card-img-top" alt="...">
</div>

画像を挿入する<img>タグにクラス名で「card-img-top」を書きます。

card-body

card-bodyは、「card」の中に文章を書くときに指定するクラス名です。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">
 <img src="..." class="card-img-top" alt="...">
  <div class="card-body">

  </div>
</div>

「card-body」と指定してあげることで、「card」の中の文章を各部分だと認識してくれます。

card-title

card-titleは、「card-body」の中にタイトルとして表示させたいときに、クラス名で指定してあげます。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">
 <img src="..." class="card-img-top" alt="...">
   <div class="card-body">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
    </div>
   </div>
</div>

ここでは<h5>を指定していますが、他の<h1>、<h2>などでも構いません。

card-text

card-textは、「card-body」の中にテキストとして表示させたいときに、クラス名で指定してあげます。
書き方は下のように書いて行きます。

<div class="card" style="width: 18rem;">
 <img src="..." class="card-img-top" alt="...">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">TEXT</p>
   </div>
</div>

こうすることで、「card-body」の中のテキストとして認識されます。

「card」の中に「ボタン」を設置することもできるので、自分好みにアレンジして行きましょう！

グリッドシステムを利用した書き方

「Cards」は、グリッドシステムと組み合わせることもできます。
グリッドシステムについて、こちらをご覧ください。

https://sakuchan.org/bootstrap4/

では実際に書いて行きましょう。
書き方は下のように書いて行きます。

<div class="container">
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>
</div>

書き方は簡単で、グリッドシステムで学んだ「container」「row」「col」を使うだけです！
この場合だと、「col-sm-6」なので、「画面幅がsm以上のときはグリッドを6個持つcol（カラム）を作成します。」という風になります。これが2つあるので、「sm以上のときは、グリッドを6個持つcol（カラム）を2つ作成する」ということになります。

実際に表示されるときは下のようになります。

✅ sm以上のとき

container1

✅ sm以下のとき

container2

Jumbotron

Jumbotronとは？

そもそも「Jumbotron」とは何か？というと、サイトに主要なマーケティングメッセージを表示できるものです。簡単にいうと下のような図です。

Jumbotron1

よくTOPページで見ることが多いのではないでしょうか？
こういったものをBootstrapでは作成することができます。

では実際に、書き方について見て行きましょう。

書き方

「Jumbotron」は下のように書きます。

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, ・・・</p>
  <hr class="my-4">
  <p>It uses utility classes for typography ・・・</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

ぶっちゃけ親要素の<div>タグに「jumbotron」とクラス名で指定するだけで、書けます。
他のタグは基本<p>タグ、<h1>タグで書けるようになっています。
それぞれに指定されているクラス名は、文字の大きさを変えたり、目立たせたりするようなクラス名になっています。詳しく見たい方はこちらをご覧ください。

また自分のお好みで「ボタン」をつけたり、背景には色、写真を指定することできます。

Carousel

Carouselとは？

そもそもCarouselとは何か？と言うと回転台、回転木馬などを意味します。ここで言う「Carousel」は、写真やコンテンツなどを横にスライドさせながら表示できるものを言います。

Bootstrapでは、下の写真のようなものが作成できます。

Corousel1

本来であればJavaScriptなどを使ってスライドさせるのですが、このようにBootstrapだけで簡単に作ることができます。

すごいですね、Bootstrap。

基本的な書き方

基本的な書き方は下のようになります。

<div class="carousel slide" data-ride="carousel" style="width:400px">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="..." alt="Third slide">
    </div>
  </div>
</div>

だいたい５秒間隔でスライドが切り替わります。

書き方はシンプルで、

  1. 「class=”carousel slide”」でCarouselであることを宣言します。
  2. 「data-ride=”carousel”」で自動的にスライドさせるようにします。
  3. 「class=”carousel-inner”」でスライドさせる写真をこの中に書いて行きます。
  4. 「class=”carousel-item”」でスライドさせる写真を追加します。

と書いて行きます。
すると下のようなスライドが作成できます。

Suraido

その他にも、アイコンを表示させてスライドさせる方法もあります。
書き方は、上のコードに下のコードを追加するだけです。

<div id="carousel" class="carousel slide" data-ride="carousel" style="width:100%">

〜省略〜

<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

ここで注意することは、先ほどは「id」を指定しなくてもよかったのですが、ここでは、「アイコンをクリックするとスライドさせる」ため、「id」を指定する必要があります。

「id」を指定する場所は「class=”carousel slide”」の部分に「id」を指定します。
id名はなんでも構いませんが、一度しか使用できないので、注意しましょう。

うまく反映されると下のようになります。

Suraida2

では本日は以上になります。

オススメの教材