おにちゃん塾の商品一覧*準備中

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

【Bootstrap5の使い方】高速でモダンなイケてるサイト構築
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • Bootstrapってなに?
  • Bootstrapの使い方を詳しく知りたい

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

おにちゃん

執筆者:僕はサービスを開発する際にもBootstrapを活用しています。

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


本記事の概要

  1. Bootstrapとは
  2. Bootstrapの使う前に
  3. Bootstrap:レイアウトの使い方
  4. Bootstrap:コンポーネントの使い方

(スポンサーリンク)

目次

Bootstrapとは

Bootstrapとは
Bootstrapとは

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

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

おにちゃん

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


Bootstrapのメリット

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

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

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


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

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

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

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

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

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


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

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

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

Bootstrap5公式ページ

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

フォルダの中身は「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>
おにちゃん

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

Bootstrapの使い方:ローカル

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


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>
おにちゃん

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

Bootstrapの使い方:CDN

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


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

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>
おにちゃん

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

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>
   <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【コンポーネント編】

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>
Bootstrapの使い方:カード
おにちゃん

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


まとめ:Bootstrapの使い方は随時追加しています。

まとめ:Bootstrapの使い方は随時追加しています。

ここまでで『【Bootstrap5の使い方】高速でモダンなイケてるサイト構築』の解説は以上です。

本記事のまとめ
  • Bootstrapとはフロントエンドを簡単に開発できるフレームワークです。
  • Bootstrapでできることは多いので、暇なときに公式ページを御覧ください。
おにちゃん

本記事は以上です。最後までご覧下さりありがとうございました。


読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる