【初心者でも素敵なWEBページが作れる？！】Bootstrapの活用方法

こんにちは、こがたです。

ぼくは商品・サービスをURLベースで紹介できるサービス「Goorec」を開発・運営しています。

ブログ運営者・WEBアプリ開発者はまとまったデザインやパーツ作りに苦戦したことがある人は多いでしょう。

この記事では初心者でも簡単に、かつ無料で利用できるデザインのフレームワーク「Bootstrap」について説明します。

対象読者

WEBアプリを開発したい
ブログをカスタマイズしたい
WEBデザインを勉強したい
初心者だけど、綺麗なWEBページを作りたい

はじめにBootstrapがどのようなものなのか説明します。
メリット・デメリットがあるので自分に合っているのか確認してください。

次にBootstrapを利用するまでの手順を解説します。
すぐに使うことができるので、実際に手元で試してみてください。

また、実際にBootstapを使ったサンプルをコードをみながら説明します。
どのように使うのかイメージできるようになります。

最後にフロントサイド(HTML/CSS/JavaScript)全体の学習方法を紹介します。

こがた

「プログラミングとかわからない」という方でも利用できるように説明していきます！

WEBサイトの仕組みについては↓↓↓をご覧ください！
サイト開発はもちろん、ブログ運営にも役立つ内容になっています。

【ネットワークとは】サーバ・システムの仕組みがわかる｜アプリ開発したい方必見

WEB・スマホアプリを開発する方はもちろん、技術者以外でもネットワークの知識が必要な時代です！この記事ではインターネットの仕組みやWEBアプリ、スマホアプリがどのように動いているのか説明しています。システウの動く仕組みを理解することができたら、開発はもちろんブログなど多くのことに活用することができます。

この記事ではBootstrap5について解説していきます。

Bootstrapとは？
1. 使用例
  1. サンプル１
2. サンプル２
Bootstrapの反映方法
1. ＋α：トグルやナビバーを使用したい場合
2. WordPressでの利用方法
Bootstrapを使ってみる
Bootstrap学習方法
フロントエンドの学習方法
最後に

Bootstrapとは？

「Bootstrap」はデザインのフレームワークのようなものです。

簡単に言うと、綺麗なWEBページを作成するために、用意されたWEBパーツの集まりのようなものです！

こがた

まだ具体的なイメージができないと思うので、後ほど具体的な書き方を確認しながら理解を深めていきましょう！

まずBootstrapを利用するメリット/デメリットを解説します。

メリット

統一感のあるWEBページが作れる
レスポンシブ対応
初心者でも簡単
中級者でも応用できる汎用性

デメリット

カスタマイズしないとオリジナリティが出ない
用意されていないコンテンツを作成するのが大変

Bootstrapには数多くのパーツが用意されています。
それらは全て統一感があり、利用することで統一されたデザインのWEBサイトを作ることができます！

こがた

自分でHTML/CSSを書いて作ると見た目がバラバラなページになりやすいんですよね。。。

「レスポンシブ対応」はPCとスマホで表示した際に、それぞれに合わせてデザインが変わる構成のことです。。
(詳しくは、画面のサイズによって自動的に表示が切り替わります)

【パソコン・タブレット】

【スマホ】

またHTMLにBootstrapで用意されているclass属性を指定するだけなので、初心者でも簡単に活用できます。

中級者になると、自分でCSSを書いて、パーツをカスタマイズすることもできるでしょう！

ただし、Bootstrapはいいことだけではありません。。。
使いやすく、整ったパーツを表示させれるため、利用者も多くオリジナリティがでにくいことがあります。

こがた

カスタマイズして利用すれば、オリジナリティも出せるから慣れながら応用させていきましょう！

ここからは実際に使用されている例をお見せしますね。

使用例

実際にBootstrapを活用したらどのようなページが作れるのか見ていきましょう。
サンプルページはこちらになります。

ここでは複数の同じページをPC/スマホそれぞれで表示したらどのようになるのか確認していきます。

サンプル１

【PC】

【スマホ】

サンプル２

【PC】

【スマホ】

Bootstrapの反映方法

ここからはBootstrapを使うための準備になります。

結論から言うと、３行コピペするだけでOKです！

Bootstrapを利用するテンプレート(完成版)はこちらになります。

<!doctype html>
<html lang="ja">
  <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">
    
    <!-- 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>

    <title>Bootstrap使用テンプレート</title>
  </head>
  <body>
  
  </body>
</html>

HTMLの構造については↓↓↓をご覧ください。

【初心者向け】HTMLの基本を理解して応用させていこう｜フロントサイドの知識

WEBアプリ・サイトの開発、ブログの運営にはクライアント(ユーザ)側で表示するフロントサイドの知識が欠かせません。この記事ではWEBページの内容であるHTMLについて初心者向けに説明しています。最後まで読むと自分で応用させることができるようになるので、是非読んでみてください。

６行目の↓↓↓でレスポンシブ対応が可能になります。
<head>タグ内に記載するようにしましょう。

<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">

CSSについてはこちらをご覧ください。

【初心者向け】CSSの役割と書き方を学び応用力を身につけよう｜学習のやり方が重要

この記事ではCSSの学習方法と書き方を説明します。「CSSとは何か」というところから解説していくので、WEBアプリを開発したい方、ブログ運営されている方は最後までご覧ください。どのように学習すれば効率的に身につけられるのか紹介しているので、是非試してみてください。

最後に１２行目の↓↓↓でBootstrapのパーツが動くようにするJavaScriptを読み込みます。

<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>

こがた

この３行を記載するだけで、簡単にBootstrapが使えるようになります！

＋α：トグルやナビバーを使用したい場合

以下のパーツを使いたい場合は追加で２行読み込む必要があります。

利用パーツ

アラート
トグルボタン/ラジオボタン/チェックボックス
カルーセル
ドロップダウン
モーダル
ナビバー

詳細は公式サイトをご確認ください。

これらで使いたいものがある場合は以下の２行を追加で記載してください。

<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>

WordPressでの利用方法

WordPressを利用してブログを運営している人が多いです。

これからWordPressでBootstrapを利用する方法を説明します。

WordPress管理画面の「外観 -> テーマエディター」をクリックしてください。
するとこのような画面が表示されます。

画面右側のテーマファイルにある「header.php」をクリックしてください。

「header.php」がない場合は画面右上の「編集するテーマを選択」より利用しているテーマに変更して確認してください。

※Cocoonを使用している場合は「Cocoon Child」ではなく「Cocoon」テーマで変更する必要があります。

「header.php」が表示できたら、<head>タグ内に上記の３行(もしくは５行)を記載して保存すれば完了です！

めっちゃ簡単！！！

Bootstrapを使ってみる

ここからは実際にBootstrapで用意されているパーツを利用していきます。

どんなものがあり、どういうことができるのかイメージをつけてください。

最終的には「Bootstrap 〇〇」で検索して自分の求めているパーツを探せるようになるとよいでしょう。

紹介するパーツ

テキスト
ボタン/リンク
横並び
モーダル

Boostrapはclass属性を指定することで適用することができます！

class属性については↓↓↓をご覧ください。

【初心者向け】CSSの役割と書き方を学び応用力を身につけよう｜学習のやり方が重要

テキスト

ここでは文字の表示を変更していきます。

  <p>利用してないテキスト</p>

  <!-- 文字色 -->
  <p class="text-primary">青文字</p>
  <p class="text-danger">赤文字</p>
  <p class="text-success">緑文字</p>
  
  <!-- 背景色 -->
  <p class="bg-primary">背景を青にする</p>
  <p class="bg-danger">背景を赤にする</p>
  <p class="bg-success">背景を緑にする</p>
  
  <!-- 太字・細字 -->
  <p class="fw-bold">太字にする</p>
  <p class="fw-light">細字にする</p>
  
   <!-- 太字・細字 -->
  <p class="text-decoration-underline">下線</p>
  <p class="text-decoration-line-through">取り消し線</p>

  <!-- 文字サイズ -->
  <p class="fs-1">大きさ１</p>
  <p class="fs-2">大きさ２</p>
  <p class="fs-3">大きさ３</p>

  <!-- 太字・細字 -->
  <p class="text-center">中央寄せ</p>
  <p class="text-end">右寄せ</p>

表示するとこのようになります。

こがた

このようにBoostrapを使えば自分でCSSを書かなくてもデザインを変更することができます！

めっちゃ便利！！！

テキストの表示詳細についてはこちらをご確認ください。

ボタン/リンク

ここではボタンリンクの作り方を紹介します。

<div class="mb-2">
  <a href="#">普通のリンク</a>
</div>

<div class="mb-2">
  <!-- ボタンリンク1 -->
  <a href="#" class="btn btn-primary">青ボタン</a>
  <a href="#" class="btn btn-secondary">灰色ボタン</a>
  <a href="#" class="btn btn-success">緑ボタン</a>
  <a href="#" class="btn btn-danger">赤ボタン</a>
  <a href="#" class="btn btn-warning">オレンジボタン</a>
  <a href="#" class="btn btn-info">水色ボタン</a>
  <a href="#" class="btn btn-light">薄灰色ボタン</a>
  <a href="#" class="btn btn-dark">黒ボタン</a>
</div>

<div class="mb-2">
  <!-- ボタンリンク2 -->
  <a href="#" class="btn btn-outline-primary">青ボタン2</a>
  <a href="#" class="btn btn-outline-secondary">灰色ボタン2</a>
  <a href="#" class="btn btn-outline-success">緑ボタン2</a>
  <a href="#" class="btn btn-outline-danger">赤ボタン2</a>
  <a href="#" class="btn btn-outline-warning">オレンジボタン2</a>
  <a href="#" class="btn btn-outline-info">水色ボタン2</a>
  <a href="#" class="btn btn-outline-light">薄灰色ボタン2</a>
  <a href="#" class="btn btn-outline-dark">黒ボタン2</a>
</div>

こがた

このように簡単にボタンリンクを作ることができます！

マウスオーバーも動作してくれるのでユーザーもわかりやすいでしょう。

Bootstrapのボタンはaタグ以外にも、button/inputタグで利用することができます。
詳細についてはこちらをご確認ください。

マージン(余白の設定)

上記のdiv要素のclassに「mb-2」が設定されています。
これより下部に少し余白を作っています。

マージンの設定

m-● : 上下左右に余白
mt-● : 上に余白
mb-● : 下に余白
ml-● : 左に余白
mr-● : 右に余白

●のは０〜５まで設定することができ、数字が大きくなるほど余白が大きくなります

マージン(m)は要素の外側に余白を作ります。

要素の内側に余白を作りたい場合は「m」の箇所を「p」に変えて利用してください。
(パディングの略)

横並び

Bootstrapで要素を横並びにしたい場合、グリッドシステムを利用します。

グリッドシステムとは画面を縦12個に分割して、個数を指定して利用する方法です。

なんだかよくわからいよぉ〜

こがた

実際にコードを見たらイメージできるので見ていきましょう！

<div class="row mb-2">
  <div class="col-6 bg-primary">
    <p class="text-center">要素1</p>
  </div>
  <div class="col-6 bg-secondary">
    <p class="text-center">要素2</p>
  </div>
</div>

<div class="row mb-2">
  <div class="col-md-6 bg-success">
    <p class="text-center">要素3</p>
  </div>
  <div class="col-md-6 bg-danger">
    <p class="text-center">要素4</p>
  </div>
</div>

<div class="row mb-2">
  <div class="col-md-3 bg-warning">
    <p class="text-center">要素5</p>
  </div>
  <div class="col-md-6 bg-info">
    <p class="text-center">要素6</p>
  </div>
</div>

大きい画面(PCなど)で表示した場合はこのようになります。

まず横並びで表示する行ごとに「rowクラス」の要素を作ります。
その要素内に、横並びで表示したい要素を追加していくのです。

１行目(要素１、要素２)には、それぞれ「col-6」を設定しています。
画面を12分割した6ずつになるので、画面半分ずつの表示となるのです。

３行目(要素５、要素６)には「col-３」と「col-6」を指定しているため、他の行と比べて横幅が狭くなります。

そういうことか！
画面を１２分割して指定した数の大きさで表示されるんだね！

あれ？
上に書いてある画面サイズは？

画面サイズはレスポンシブ対応に関係してきます。
では小さい画面サイズ(スマホなど)で表示した場合を見てみましょう。

「要素１/要素２」は画面半分ずつのままだけど、「要素３〜要素６」は縦並びになった！

このように「col-画面サイズ-グリッド数」の画面サイズを指定しなければ、どのような画面でも横並びとなります。

では設定できる画面サイズを確認していきましょう。

画面サイズ一覧

sm : 576～767px
md : 768～991px
lg : 992～1199px
xl : 1200px～

この画面サイズ以下になると自動的に縦並びとなり、スマホの場合小さくて見にくい状態を防ぐことができます！

こがた

少しムズカしくなりましたが、実際に手元で画面サイズ、数字を変えて試してみるとすぐに理解できます！

モーダル

モーダルとは画面内に小さい画面が浮き出てくるような表示の仕方のことです。

Boostrapを利用すれば簡単にモーダル表示することができます。

こがた

実際に動いているところを見てみましょう。

「×ボタン」「閉じるボタン」「周りの暗いところ」をクリックすれば、モーダルを閉じることができます。
(閉じれなくしたり、他にも閉じるための要素を作ることもできます)

こがた

実際に動いているところを見てみましょう。

<!-- モーダルボタン-->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">モーダルを表示するボタン</button>

<!-- モーダル -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        モーダル内の表示
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">次へ</button>
      </div>
    </div>
  </div>
</div>

モーダルを表示するためのボタン要素の「data-bs-target」属性でモーダル要素を指定するようにしてください。
(ここでは「exampleModal」というid属性を付けています)