7.BootStrapで今風のデザインを実現する

1.なぜ、新人エンジニア研修でBootStrapを学ぶのか、その理由

BootStrapは、ウェブサイトやWebアプリケーションを作成するWebアプリケーション・フレームワークです。フレームワークとは"枠組み"のことで、あらかじめ用意されたセットのことです。例えば、フォームやテーブル、ボタン、ナビゲーション、その他の部品が用意されていますので複雑なCSSを知らなくても簡単にグラフィカルなページが作れます。しかも、レスポンシブ対応といってパソコンだけでなく、タブレットやスマートフォンなど様々な画面の大きさに対応したサイトが比較的簡単に作成できます。BootStrapは米ツイッター社がオープンソースで提供しているため誰でも無償で利用可能です。

本来はサイトのデザインはデザイナーのお仕事であり、皆さんエンジニアのお仕事ではありません。（両方できる人もいますが）本物のデザイナースキルの習得には何年もかかります。当社の新人研修では最低限の努力で最大のデザイン効果を出すためにBootStrapを使います。

なお、BootStrap最新バージョンは5ですが、本研修では利用実績を鑑みて4を使います。

BootStrap4のサイトをブックマークしておいてください。

2.BootStrapの雛形作成

以下のtemplate.htmlのようなBootStrapの雛形を用意してください。

コメントに①のような番号を付けてソースコードの下の解説と紐づけてあります。

※なお、以下のソースコードは印刷時に見切れないように折り返している部分があります。

<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
        <!-- ① -->

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" 
              href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <!-- ② -->

        <title>template.html</title>
    </head>
    <body>
        <div class="container"> <!-- ③ -->
            <h1>Hello World</h1>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js">
        </script><!-- ④ -->
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">
        </script><!-- ⑤ -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" >
        </script><!-- ⑥ -->
    </body>
</html>

＜解説＞

①viewportは、レスポンシブデザインに対応するために必要な記述です。レスポンシブデザインとは、パソコンだけでなく、スマホやタブレットなどの画面の大きさに対応して画面のレイアウトを変更する技術です。「content="width=device-width initial-scale=1」と記述したことで、画面の大きさに対応したCSSが働くようになります。最後の「shrink-to-fit=no」は、ブラウザのSafariのための記述ですので、研修の環境では無視して大丈夫です。

②BootStrapのCSSをCDN経由で読み込んでいます。CDNとはコンテンツデリバリーネットワーク【Content Delivery Network】の略です。インターネット経由で様々なサービスを利用できるようにする技術です。したがって、この方法ではインターネット環境がないと動作しません。BootStrapを使う方法は他にもありますが、当社の新人エンジニア研修ではこの方法を使っていきます。ひとまず、決まり文句として書いてください。

③「class = "container"」は、コンテナの名の通り、他のBootStrapの部品の入れ物です。コンテナの中に様々な部品を配置していきます。このようにBootStrapでは、各HTML要素のclassに決められたクラス名を指定することで、CSSに詳しくなくても、簡単にデザインを適用することができます。

④⑤⑥の記述は、Bootstrapで必要なJavaScriptの読み込みです。bodyの閉じタグの直前に書きます。それぞれ、jQuery、Popper、Bootstrapになります。

3.テーブルを扱う

以下のtable_original.htmlのような単純なテーブルをBootStrapを使って装飾してみましょう。

<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">

        <title>table_original.html</title>
    </head>
    <body>
        <div class="container">
            <!-- Content here --> 
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First</th>
                        <th>Last</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th>2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th>3</th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

上記の単純なテーブルがBootStrapを適用すると以下のtable.htmlのように変化します。

<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

        <title>table.html</title>
    </head>
    <body>
        <div class="container">
            <!-- Content here -->
            <table class="table"><!-- ① -->
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First</th>
                        <th>Last</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th>2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th>3</th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
    </body>
</html>

＜解説＞

①「class="table"」とするだけでBootStrapのテーブルになります。この例のようにBootStrap特有のクラスを指定することで通常のHTMLの要素にBootStrapのデザインを適用することができます。他のテーブルのスタイルについてはリンクをご覧ください。

4.ナビゲーションバーを扱う

ナビゲーションバーとはメニューバーのことです。

<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

        <title>navbar.html</title>
    </head>
    <body>
        <div class="container"> 
            <!-- Content here -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light m-2">   <!-- ① -->
                <a class="navbar-brand" href="#">Navbar</a>  <!-- ② -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" 
                        data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 
                        aria-label="Toggle navigation">   <!-- ③ -->
                    <span class="navbar-toggler-icon"></span>  <!-- ④ -->
                </button>
                <div class="collapse navbar-collapse" id="navbarNav"> <!-- ⑤ -->
                    <ul class="navbar-nav">   <!-- ⑥ -->
                        <li class="nav-item active">   <!-- ⑦ -->
                            <a class="nav-link" href="#">Home <span class="sr-only">
                                (current)</span></a>  <!-- ⑧ -->
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>   <!-- ⑨ -->
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
    </body>
</html>

＜解説＞

①「class="navbar"」を指定することでナビバーになります。「navbar-expand」はどのサイズの時にレスポンシブデザインに変更するかという指定です。「lg」「md」「sm」の３種類があります。それぞれ、large,medium,smallの略です。今回指定した「lg」は、992px以上のときは通常のデザイン、0〜991pxのときはレスポンシブデザインになります（ハンバーガーメニューが出る）。講師からディベロッパーツールの使い方を学んでサイズ変更しながら試してみてください。

「navbar-light」「bg-light」は色の指定です。bgはバックグラウンドの略です。「m-2」のmはマージンの意味で、ナビバーの外側の余白の幅を指定しています。幅の大きさは0~5の数字で指定しますので変更してナビバーの変化を見てください。

②navbar-brandはブランド名を表示します。

③④⑤ハンバーガーメニューの指定です。

⑥ulがナビバーの部品であることを示しています。

⑦アクティブなメニュー項目の指定です。

⑧現在のメニュー項目の指定です。

⑨無効なメニュー項目の指定です。

他のナビゲーションバーの形式についてはリンクをご覧ください。

5.フォームを扱う

以下のform_original.htmlのような単純なフォームをBootStrapを使って装飾してみましょう。

<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <title>form_original.html</title>
    </head>
    <body>
        <div>
            <form>
                <div>
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" id="exampleInputEmail1"  placeholder="Enter email">
                    <small id="emailHelp" class="form-text text-muted">
                        We'll never share your email with anyone else.</small><!-- ③ -->
                </div>
                <div>
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" id="exampleInputPassword1" placeholder="Password">
                </div>
                <button type="submit">Submit</button>
            </form>
        </div>
    </body>
</html>

上記の単純なフォームがBootStrapを適用すると以下のform.htmlのように変化します。

<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

        <title>form.html</title>
    </head>
    <body>
        <div class="container">
            <form>
                <div class="form-group"><!-- ① -->
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                           placeholder="Enter email"><!-- ② -->
                    <small id="emailHelp" class="form-text text-muted">
                        We'll never share your email with anyone else.</small><!-- ③ -->
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1"
                           placeholder="Password"><!-- ④ -->
                </div>
                <button type="submit" class="btn btn-primary">Submit</button><!-- ⑤ -->
            </form>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
    </body>
</html>

＜解説＞

①フォームをグループにしています。

②③「aria-describedby」は、すぐ下のid属性「emailHelp」によって説明されるということを示しています。

④「form-control」は、フォーム部品に設定します。input、textarea、passwordなどのフォーム部品で利用します。大きさや色、レイアウトをいい感じに整えてくれます。

⑤ボタンをprimaryに指定しています。その他のボタンを使いたい場合には次の「6.ボタンを扱う」を参照して下さい。

他のフォームの形式についてはリンクをご覧ください。

6.ボタンを扱う

Bootstrapにはきれいにデザインされたボタンが用意されています。

<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

        <title>button.html</title>
    </head>
    <body>
        <div class="container">
            <button type="button" class="btn btn-primary">Primary</button><!-- ① -->
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>

            <button type="button" class="btn btn-link">Link</button><!-- ② -->
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
    </body>
</html>

＜解説＞

①「class="btn btn-xxxx"」と指定することでBootstrapのボタンになります。それぞれのボタンには色と意味があります。

②リンクも一種のボタンとして指定可能です。

BootStrapのボタンのソースコードのリンクです。

7.郵便番号から住所を自動入力する

BootStrapとは無関係ですが、郵便番号から住所を自動入力する方法をご紹介します。YubinBango.jsというオープンソースのJavaScriptライブラリです。

以下のようにして使います。

<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <title>form_yubinbango1.html</title>
    </head>
    <body>
        <div class="container">
            <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script><!-- ① -->
            <form action="#" class="h-adr"> <!-- ② -->
                <span class="p-country-name" style="display:none;">Japan</span><!-- ③ -->
                <div class="col-md-2">
                    <div class="form-group">
                        <p>〒：<input type="text" class="p-postal-code form-control" size="8" maxlength="8"></p><!-- ④ -->
                    </div>
                </div>
                <div class ="col-md-6">
                    <div class="form-group">
                        <p>住所：<input type ="text" class="p-region p-locality p-street-address p-extended-address form-control" size="30"></p><!--⑤ -->
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
    </body>
</html>

＜解説＞

ポイントは以下の５点です。上記ソースコードのコメント①～⑤に対応しています。

①YubinBango.jsを読み込む

②formタグで「class = "h-adr"」を指定する

③form内に<span class="p-country-name" style="display:none;">Japan</span>を指定する
なお、style="display:none;"は非表示という意味です。

④郵便番号の入力欄に「class=“p-postal-code”」を指定する
なお、郵便番号の3桁と5桁の間にハイフンはあってもなくても動作します。さらに、郵便番号は半角全角問わず機能します。

⑤住所の欄の４つのクラスの意味は以下の通り

都道府県：p-region
市区町村：p-locality
町域：p-street-address
以降の住所：p-extended-address

上記の例のように４つともまとめて書くことも、別々に書くこともできます。

以下に別々に書いた例を掲載します。

</html>
<!doctype html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <title>form_yubinbango2.html</title>
    </head>
    <body>
        <div class="container">
            <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script><!-- ① -->
            <form action="#" class="h-adr"> <!-- ② -->
                <span class="p-country-name" style="display:none;">Japan</span><!-- ③ -->
                <div class="col-md-2">
                    <div class="form-group">
                        <p>〒：<input type="text" class="p-postal-code form-control" size="8" maxlength="8"></p><!-- ④ -->
                    </div>
                </div>
                <div class ="col-md-2">
                    <div class="form-group">
                        <p>都道府県：<input type ="text" class="p-region form-control" size="30"></p><!--⑤ -->
                    </div>
                </div>
                <div class ="col-md-4">
                    <div class="form-group">
                        <p>市町村：<input type ="text" class="p-locality form-control" size="30"></p><!--⑤ -->
                    </div>
                </div>
                <div class ="col-md-4">
                    <div class="form-group">
                        <p>住所1：<input type ="text" class="p-street-address form-control" size="30"></p><!--⑤ -->
                    </div>
                </div>
                <div class ="col-md-4">
                    <div class="form-group">
                        <p>住所2：<input type ="text" class="p-extended-address form-control" size="30"></p><!--⑤ -->
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
    </body>
</html>

<まとめ：隣の人に正しく説明できたらチェックを付けましょう>

□ CDNでBootstrapのcssを読み込むことができる。

□ BootStrapを使うとレスポンシブ対応のサイトが作成できる

□ クラス指定するだけでHTMLの要素にBootStrapのデザインを適用できる

□ テーブル、ナビゲーションバー、フォーム、ボタンなどの部品がそろっている

□ 郵便番号を入力すると住所を自動で入力してくれるyubinbango.jsがユーザビリティを高める

今回は「BootStrapで今風のデザインを実現する」方法について学びました。また、郵便番号から住所を自動入力する方法も解説しました。

最後までお読みいただきありがとうございました。

新人エンジニア向けHTML講座の一覧に戻る

BootStrapで今風のデザインを実現する　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる

当社は研修講師を募集中です（サブ講師のため未経験者可）

1.なぜ、新人エンジニア研修でBootStrapを学ぶのか、その理由

2.BootStrapの雛形作成

3.テーブルを扱う

4.ナビゲーションバーを扱う

5.フォームを扱う

6.ボタンを扱う

7.郵便番号から住所を自動入力する

<まとめ：隣の人に正しく説明できたらチェックを付けましょう>

BootStrapで今風のデザインを実現する 最後までお読みいただきありがとうございます。

BootStrapで今風のデザインを実現する　最後までお読みいただきありがとうございます。