Bootstrap入門 - 1. Bootstrapのインストール

1. Bootstrapのインストール

それではBootstrapのインストールについて学習してきましょう。ここではまずはじめに、次のようなHTMLファイル sample.html を用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Sample</title>
</head>
<body>
    <h3>User List</h3>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Edit</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Alex</td>
            <td>20</td>
            <td><a href="#">EDIT</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Hiro</td>
            <td>21</td>
            <td><a href="#">EDIT</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Noel</td>
            <td>22</td>
            <td><a href="#">EDIT</a></td>
        </tr>
    </table>
    <button>CREATE</button>
</body>
</html>

HTMLの講座ではないのでコピペしてもOKです。

上記のHTMLファイルは <h3> タグ、<table> タグなどを使ったシンプルなWebページです。ブラウザで表示すると次のようになります。

このWebページにBootstrapをインストールして画面の表示をカスタマイズしていこうと思います。

<link>タグによるBootstrapのインストール

それではBootstrapのインストールをはじめましょう。以下のリンク（BootstrapのIntroductionページ）にアクセスしてCSSの読み込み設定（linkタグ）をコピーします。


サイト上のCopyボタンをクリックすると、表示されているコードがクリップボードにコピーされます。

コピーした内容をさきほどの sample.html ファイルの<head>タグの中に追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Bootstrap Sample</title>
</head>
<body>
    <h3>User List</h3>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Edit</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Alex</td>
            <td>20</td>
            <td><a href="#">EDIT</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Hiro</td>
            <td>21</td>
            <td><a href="#">EDIT</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Noel</td>
            <td>22</td>
            <td><a href="#">EDIT</a></td>
        </tr>
    </table>
    <button>CREATE</button>        
</body>
</html>

Bootsrapのインストールはたったこれだけです。linkタグを使ってCDN（Contents Delivery Network）上のCSSファイルを参照しています。厳密にはBootstrapの一部の機能を使うにはJavaScriptの読み込みも必要ですが、ここで紹介する範囲においてはCSSの読み込み設定だけで大丈夫です。

Bootstrapは今回のように直接参照する以外にもzipファイルでダウンロードして使うこともできます。

動作確認

それではブラウザで sample.html ファイルを開いてみましょう。次のように表示されればOKです。

Bootstrapのインストール前後で画面の表示に少し変化があるのにお気づきでしょうか。Bootstrapをインストール（linkタグで参照）すると、ブラウザのデフォルトCSS（余白などの設定）がノーマライズされるので少し表示が変わります。

以降は画面のコンポーネントやレイアウトを調整していきます。