CSSのフレームワーク：参考

テキスト目次 > HTMLとCSSの応用 > CSSのフレームワーク：参考

Bootstrapは、CSSフレームワークのひとつです。Web制作で使用するグリッドレイアウトやレイアウトパーツを簡単に作成できるので、制作を大幅に効率化できます。

しかし、Bootstrapをどのように使用すればいいのかわからない方も多いのではないでしょうか。

この記事では、Bootstrapの使い方を解説します。導入方法から基本的な使い方まで、わかりやすく解説した内容となっております。Bootstrapを使ってみたい方はぜひ参考にしてください。

目次

Bootstrapとは

Bootstrapとは、Web制作を効率化するフレームワークのひとつです。HTML/CSS、JavaScriptで構成され、ボタンやテーブルなど様々なパーツのテンプレートが用意されています。

Bootstrapを使用するメリットは以下のとおりです。

こBootstrapを使用するメリット

  • Web制作の効率化
  • デザインが苦手でもおしゃれなサイトを作れる
  • レスポンシブ対応が簡単

Bootstrapの導入方法

Bootstrapを使用するには、以下の2つの方法があります。

  • CDNを読み込む
  • フォルダをダウンロードする

CDNを読み込む

Bootstrapを使用する1つ目の方法は、CDNをHTMLファイルで読み込むことです。

CDNとは？

コンテンツ・デリバリー・ネットワークの略であり、オンラインで外部のサービスを利用できるシステムのこと

CDNを読み込む場合は、以下のページに記載されているURLをコピーして、それぞれ特定の場所に貼り付けます。

Bootstrap Introductionページ

Bootstrapでは、CSSとJavaScriptのCDNが必要です。それぞれ記述する場所が決められています。

CSSのCDN

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 </head>
HTML

CSSを読み込むときは、HTMLファイルの<head>タグ内の最後に記述します。他にスタイルシートがある場合は、BootstrapのCDNを先頭に配置します。

JavaScript

 <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://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
       integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
       crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
       integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
       crossorigin="anonymous"></script>
</body>
JavaScript

JavaScriptを読み込むときは、HTMLファイルの <body>タグ内の最後に記述します。 Bootstrapの機能をすべて使うためには、jQueryとPopperの記述が必要です。この2つがあることで、アニメーションを追加する記述の簡略化やツールチップの実装が可能になります。

CDNは記述の順番を間違えてしまうと適用されないため、注意が必要です。また、ローカル環境だとブラウザに反映されないことも把握しておきましょう。

フォルダをダウンロードする

Bootstrapを使用する2つ目の方法は、フォルダをダウンロードすることです。

フォルダのダウンロードは、以下のページから行います。

Bootstrap ダウンロードページ

紫色の「Download」というボタンをクリックすると、ダウンロードが始まります。zip形式でダウンロードされるので、解凍してフォルダを開きましょう。

ダウンロード時点のBootstrapフォルダには、HTMLファイルが存在しません。そのため、自身でHTMLファイルを作成する必要があります。

HTMLファイルを作成したら、以下のページに記載されているテンプレートをコピーして貼り付けます。

Bootstrap Introductionページ

以下のコードをコピーして貼り付けても大丈夫です。

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

   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <title>Hello, world!</title>
 </head>

 <body>

   <h1>Hello, world!</h1>




   <!-- Optional JavaScript; choose one of the two! -->
   <!-- Option 1: Bootstrap Bundle with Popper -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   <!-- Option 2: Separate Popper and Bootstrap JS -->
   <!--
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
   -->
 </body>
</html>
HTML

導入が終了したら、次は具体的な使い方を学習しましょう。

おもな使い方は次の2つです。

  • グリッドシステムを利用したレイアウト作成
  • ボタンやテーブルなどのコンポーネント作成

次の項目から詳しく解説していきます。

Bootstrapでグリッドレイアウトを作成する

Bootstrapでは、グリッドシステムを用いたレイアウトの作成が可能です。グリッドとは、ページ内の要素を格子状に配置するレイアウトのことです。

Bootstrapでグリッドシステムを作成するときは、以下のようにHTMLを記述します。

  1. <div>タグを作成し、class=”container”もしくはclass=”container-fluid”と指定する
  2. 1の<div>タグの中に新しく<div>タグを作成し、class=”row”とする
  3. 2の<div>タグの中に新しく複数の<div>タグを作成し、class=”col-(prefix)-(数値)”とする
  4. (数値)の合計が12になるように指定する

このルールにしたがって、サンプルコードを作成してみましょう。枠線がわかりやすいように.borderを追加しています。

<div class="container">
  <div class="row">
    <div class="col-md-4 border">4</div>
    <div class="col-md-6 border">6</div>
    <div class="col-md-2 border">2</div>
  </div>
</div>
HTML

class=”col-(prefix)-(数値)”のprefixの部分は、レスポンシブ対応時に必要となります。画面幅ごとにクラス名が決められているので、適切なprefixを記述するようにしましょう。

画面幅ごとのprefixは以下の表を参照してください。

prefix画面幅デバイス
xxl1400px以上デスクトップ
xl1200px~1399px
lg992px~1199px
md768px~-991pxタブレット
sm576px~767px
xm575px以下モバイル

Bootstrapでコンポーネントを配置する

Bootstrapには、Web制作のレイアウトで使用する様々なコンポーネントが用意されています。コンポーネントとは、レイアウトの構成要素のことです。

Bootstrapでおもに使用するコンポーネントは以下の4つです。

  • 　ボタン
  • 　テーブル
  • 　フォーム
  • 　画像

ボタン

Bootstrapでボタンを作成するときは、<button>タグにclass=”btn-btn-(プロパティ名)”を指定します。

以下がBootstrapで用意されているボタンの一覧です。

 <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
   <button type="button" class="btn btn-success">Success</button>
   <button type="button" class="btn btn-danger">Danger</button>
   <button type="button" class="btn btn-warning">Warning</button>
   <button type="button" class="btn btn-info">Info</button>
   <button type="button" class="btn btn-light">Light</button>
   <button type="button" class="btn btn-dark">Dark</button>
HTML

ボタンのサイズ変更やクリック時の動作などのオプションはこちらのサイトで確認してください。

Bootstrap

テーブル

Bootstrapでテーブルを作成するときは、<table>タグに.tableクラスを指定します。

テーブルのデザイン変更はクラスの追加によって行います。おもに使用するclassは以下のとおりです。

class効果
table-responsiveテーブルを横スクロールにする。<table>タグを囲む<div>タグを配置し、クラスを指定する
table-striped行の色を1行ずつ交互に変える
table-bordererセルに枠線を追加する

記述例は以下のとおりです。

<div class="table-responsive">
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">animal</th>
        <th scope="col">fruits</th>
        <th scope="col">season</th>
       </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>cat</td>
        <td>apple</td>
        <td>spring</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>dog</td>
        <td>grape</td>
        <td>summer</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>bird</td>
        <td>peach</td>
        <td>winter</td>
      </tr>
    </tbody>
  </table>
</div>
HTML

フォーム

Bootstrapでフォームを作成するときは、以下の2つのclassを指定します。

  • form-group
  • form-control

<form>タグの中に<div>タグを作り、.form-groupを指定します。これによりフォーム内の要素をグループ化できます。

<input>タグや<textarea>タグにform-controlを指定することで、スタイルが適用されます。

<form>
  <div class="form-group">
    <label>Your Name</label>
    <input type="name" class="form-control" placeholder="Name">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-secondary">送信</button>
</form>
HTML

画像の編集

Bootstrapを使用すると、画像の編集を簡単に行えます。

画像の編集で使用するclassは以下のとおりです。

class効果
img-fluid画像をレスポンシブ対応にする
img-thumbnail画像に境界線ができ、角に丸みをつける
rounded float-left画像を左寄せにする
rounded float-right画像を右寄せにする
rounded mx-auto b-block画像を中央寄せにする

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP