【Bootstrap5の使い方】高速でモダンなイケてるサイト構築

2022 8/27

2022年8月27日

本記事の想定読者

Bootstrapってなに？
Bootstrapの使い方を詳しく知りたい

本記事は上記の方に向けて、執筆しています。

本記事では、Bootstrapの使い方を網羅しております。

本記事の概要

Bootstrapとは
Bootstrapの使う前に
Bootstrap：レイアウトの使い方
Bootstrap：コンポーネントの使い方

当サイトのようなサイトを運営したい方

本記事を読み終えた後に、実際にBootstrapを活用したサイトを作成してみてください。

簡単な機能で問題なしです。

レンタルサーバー：エックスサーバー
レンタルドメイン：Xserverドメイン
WordPressテーマ：SWELL

プログラミングを効率よく学びたい方

プログラミングスキルをお金をかけずに学びたい方は、侍エンジニアプラスを活用してみてください。

月額料金：2980円
講師満足率：95%
挫折率：8%

侍エンジニアプラスは、お金をかけずに「教材」「質問環境」「仲間」「オンラインレッスン(1回5,478円相当)」を獲得することができます。

侍エンジニアプラス公式ページ

侍エンジニアプラスの評判

記事の内容

Bootstrapとは

Bootstrapとは、WEBサイトやWEBアプリケーションのフロント側を効率よく開発してくれるフレームワークです。

ツイッター社が開発者となっていることで有名な技術です。

エコおじい

Bootstrapが扱えると簡単にモダンなデザインを構築することが可能です。

Bootstrapのメリット

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

コーディングの量を減らせる
デザイン知識が必要ない
レスポンシブがサクサク作れる

エコおじい

実際に使ってみると、Bootstrapのメリットは実感できるはずです。

Bootstrapの使い方1：セットアップしてみよう

Bootstrapの使い方1は「セットアップ＝Bootstrapを扱える環境を整える」方法をご紹介させていただきます。

Bootstrapの使い方：セットアップ方法

ローカルにダウンロードする使い方
インターネット経由で読み込む使い方

エコおじい

本記事では、両方の使い方をご紹介しております。お好みの方を活用してみてください

Bootstrapファイルをローカルにダウンロードする使い方

まずは、Bootstrapの公式ページに行き、ファイルをダウンロードしましょう。

公式ページに行きましたら、【ダウンロード】をクリックしてください。

ダウンロードしたファイルを解凍すると下記のフォルダが表示されます。

フォルダの中身は「cssフォルダ」と「jsフォルダ」で構成されています。

上記2つのフォルダをご自身がBootstrapを活用したいフォルダに移動させましょう。

bootstrap_memoフォルダ

index.html
cssフォルダ←ダウンロードしたもの
jsフォルダ←ダウンロードしたもの

それでは、ダウンロードファイルで動作するか確認していきましょう。下記のコードをindex.htmlに貼り付けてみてください。

<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Bootstrap Sample</title>
   <!-- BootstrapのCSS読み込み -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <!-- BootstrapのJS読み込み -->
   <script src="js/bootstrap.min.js"></script>
 </head>
 <body>
   <button type="button" class="btn btn-primary mt-3">当サイトで学ぶBootstrapの使い方</button>
   <!-- jQueryの読み込み -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 </body>
</html>

エコおじい

下記のボタンが表示されれば問題なしです。

うまく行かない方は何かしらのミスを行っている可能性が高いです。そういった場合は次に紹介する方法を活用してみてください。

BootstrapCDNの使い方

現在はBootstrap5です。他のサイトで紹介されているCDNの使い方はBootstrap4のものが多いです。

続いて、インターネット経由(CDN)を活用してBootstrapを使えるような状態にしましょう。

 <!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.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 </head>
 <body>
   <button type="button" class="btn btn-primary mt-3">BootstrapCDNの使い方</button>
   <!-- Optional JavaScript; choose one of the two! -->
   <!-- Option 1: Bootstrap Bundle with Popper -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
   <!-- Option 2: Separate Popper and Bootstrap JS -->
   <!--
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
   -->
 </body>
</html>

エコおじい

上記のコード入力後、下記の画面が表示されれば問題なしです。

個人的な意見ですが、初心者の頃は簡単に導入できるCDNをおすすめします。

Bootstrapの使い方2【レイアウト編】

Bootstrapではレイアウトを高速で構築することが可能です。

Bootstrapの使い方：レイアウト編

ブレイクポイント
コンテナ
グリッド
カラム
ガター
ユーティリティ

エコおじい

本記事では、頻出のコンテナとグリッドの使い方を紹介させていただきます。他に関しては、使うときに覚えれば問題なしです。

【レイアウト編】コンテナの使い方

コンテナの使い方を実感するためにまずは下記のコードをindex.htmlに貼り付けてください。

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
 </head>
 <body>
   <div>当サイト</div>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 </body>
</html>

エコおじい

上記のコードを読み込むと下記のようになるはずです。

続いては、実際にコンテナの使い方を学んでいきましょう。

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
 </head>
 <body>
   <div class="container">当サイト</div>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 </body>
</html>

エコおじい

class名にcontainerを指定すると、コンテナが作成されるはずです。

Bootstrapの使い方：コンテナ仕様

コンテナを使用することで、次に紹介するグリッドレイアウト使ったレスポンシブデザインが可能になります。

【レイアウト編】グリッドの使い方

Bootstrapでグリッドが扱えるようになると、簡単にレスポンシブデザインを構築できるようになります。

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 </head>
 <body>
   <div class="container">
     <div class="row">
       <div class="col-sm">
         One of three columns
       </div>
       <div class="col-sm">
         One of three columns
       </div>
       <div class="col-sm">
         One of three columns
       </div>
     </div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 </body>
</html>

このように、Bootstrapの使い方を学ぶと簡単にレスポンシブデザインを構築することが可能です。

Bootstrapの使い方3【コンポーネント編】

Bootstrapではコンポーネントを簡単に使える仕組みも導入されています。

多すぎるので、今回は3つほど紹介させていただきます。

アコーディオン
カード

アコーディオンの使い方

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
 </head>
 <body>
   <div class="accordion" id="accordionExample">
     <div class="accordion-item">
       <h2 class="accordion-header" id="headingOne">
         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           Accordion Item #1
         </button>
       </h2>
       <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
         <div class="accordion-body">
           <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
         </div>
       </div>
     </div>
     <div class="accordion-item">
       <h2 class="accordion-header" id="headingTwo">
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
           Accordion Item #2
         </button>
       </h2>
       <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
         <div class="accordion-body">
           <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
         </div>
       </div>
     </div>
     <div class="accordion-item">
       <h2 class="accordion-header" id="headingThree">
         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
           Accordion Item #3
         </button>
       </h2>
       <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
         <div class="accordion-body">
           <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
         </div>
       </div>
     </div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 </body>
</html>

エコおじい

アコーディオンを作成するとなると、cssやjsをいじらなくてはいけないのですが、Bootstrapだとこんなにも簡単に作成可能です。

カードの使い方

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
 </head>
 <body>
   <div class="card" style="width: 18rem;">
     <img src="https://onityanzyuku.com/wp-content/uploads/2019/12/IMG_2910-2.jpg" 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>   
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 </body>
</html>

エコおじい

ブログ機能にも必要なカードも簡単に作成可能です。