Bootstrapを極める！ Bootstrap4の基本(1) 〜準備編〜【入門・初心者向け】

2020年5月21日 19:37

みなさんはWEBデザインのコーディングでBootstrapは使っていますか？BootstrapとはWeb部品の集まりを提供するCSSフレームワークで、誰でも比較的簡単にレスポンシブでデザイン性の高いWebページを作成できます。
このnoteでは『Bootstrapの基本的な使い方』を徹底解説します！

◆Bootstrapとは？

BootstrapはもともとTwitter社が開発した「CSSフレームワーク」です。
Bootstrapにはすでにいい感じの『ひな形』が用意されていて、それを利用することにより「簡単に」「早く」「レスポンシブ対応の」Webサイトが制作できます。
BootstrapはいくつかのCSSファイルとJavaScriptファイルから成り立っています。
それでは、Bootstrapを使う準備をしましょう！

◆Bootstrapを使うための準備

Bootstrapを使用するためにはBootstrapのファイルを読み込む必要があります。
ファイルの読み込み方法は、
　１．ソースをダウンロードして使用する方法
　２．サーバにアップロードされているソースを読み込んで使う方法
の２つがありますので、それぞれ説明します。

１．Bootstrapをダウンロードして使う

①Bootstrapのサイト（https://getbootstrap.com/）にアクセスします。
ダウンロードボタンをクリックしてダウンロードのページへ行きます。

Bootstrap説明1

②ダウンロードページの「Compiled CSS and JS」のところにあるダウンロードボタンをクリック。
bootstrap-4.5.X-dist.zipがダウンロードされます。

Bootstrap説明2

③ファイル解凍
bootstrap-4.5.0-dist.zipを解凍します。
bootstrap-4.5.0-distフォルダにcssとjsフォルダができています。

スクリーンショット 2020-05-19 16.05.43

スクリーンショット 2020-05-19 15.24.12

ダウンロードしたファイルで最低限必要になるのは下記２つのファイルになります。
　bootstrap-4.5.x-dist>css>bootstrap.min.css（またはbootstrap.css）
　bootstrap-4.5.x-dist>js>bootstrap.min.js（またはbootstrap.js）
　＊「min」がついているファイルは圧縮版で、通常版より読み込みが早くなっています。

③JQueryファイルをダウンロード
bootstrap.jsはjqueryを利用しているため、jqueryファイルもダウンロードします。
JQuery公式サイトのダウンロードページ（https://jquery.com/download/）から、jQueryのソースコードをダウンロードします。
「Download the compressed, production jQuery 3.5.x」のリンクを右クリックして、「名前をつけてリンク先を保存」を選択すると、
「jquery-3.5.x.min.js」がダウンロードできます。

Bootstrap説明3_JQuery

④ファイル構成
ダウンロードしたファイルとhtmlファイルで下記のファイル構成にします。

Bootstrap説明_フォルダ構成

⑤ファイル読み込みの記述
■index.htmlファイルのhead内とbody内（の閉じタグの前）に、cssとjsファイルを読み込む記載をします。
<head>内
　<link rel="stylesheet" href="css/bootstrap.min.css">

</body>の直前
　<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
　<script src="js/popper.min.js"></script>
　<script type="text/javascript" src="js/bootstrap.min.js"></script>

■レスポンシブデザインに必要なviewportのmetaタグもあわせて記載します。
　<meta name="viewport" content="width=device-width, initial-scale=1">

<!DOCTYPE html>
<html lang="ja">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">  
 <title>Bootstrap4の基本</title>

 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/style.css">

</head>

<body>

   <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
   <script src="js/popper.min.js"></script> 
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

２．BootstrapをCDNで使う

次にサーバにアップロードされているソースを読み込んで使う方法です。
①index.htmlファイルののhead内とbody内（の閉じタグの前）に下記コードを記載します。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
　<meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Bootstrap4の基本</title>

　<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">

 </head>
<body>

　<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

。。CDNを利用する場合は以上になります。簡単ですね！

３．動作確認

さて、うまくBootstrapが使えるか動作確認をしてみたいと思います。
ためしにボタンを表示させてみます。
<body>に下記コードを入力して、ブラウザに青いボタンが表示されればOKです。
お疲れ様でした！

 <body>
		<button type="button" class="btn btn-primary">Bootstrapの準備ができました！</button>

スクリーンショット 2020-05-21 19.20.26

■Bootstrapを使用する準備は以上になります。