更新日: 2022年5月31日
公開日: 2020年9月13日

コピペするだけ！BootstrapでおしゃれなWebサイトを作る方法を解説

プログラミング初心者の中にはWebページやポートフォリオを作りたいけど、コーディングが苦手で中々始められないという方もいらっしゃるのではないでしょうか？

そこで今回はBootstrapを使って簡単にWebページを作成する方法を紹介していきます。サンプルコードを貼り付けるだけで簡単におしゃれなページが完成するのでぜひ参考にしてみてください。

Bootstrapとは
Bootstrapを使うメリット
①レスポンシブデザインを作るのが簡単
②コーディングの時間を短縮できる
③整ったデザインになる
Webサイトを作る準備をしよう
完成形を確認しよう
必要なフォルダ＆ファイルを作る
index.htmlにテンプレートコードを貼り付ける
ナビゲーションメニューを作ろう
スライダーを作ろう
スキルバーを作ろう
カードを作ろう
問合せフォーム&フッターを作ろう
まとめ

Bootstrapとは

まずはBootstrapについて簡単に理解しておきましょう。

Bootstrapとは、Twitter社が開発したWebフレームワークです。 Webフレームワークとは、Webサイトで頻繁に使用されるメニューやボタンなどの機能があらかじめ用意されたものを指します。

出典：Bootstrap公式ページ

Bootstrapを使うメリット

この項ではBootstrapを使うメリットについて解説していきます。

①レスポンシブデザインを作るのが簡単

1つ目のメリットは、Bootstrapを使うことで簡単にレスポンシブデザインのWebページを作成できる点です。

レスポンシブ対応とは、スマートフォンやパソコンなど様々なデバイスに適したレイアウトにすることです。レスポンシブ対応されていないWebページだとPCで見たときは問題ないのに、スマートフォンで見ると文字や画像が見切れてしまうことがあります。

このようなことを防ぐためにコーディングする際にレスポンシブ対応させる必要があります。しかしBootstrapでは予めレスポンシブデザインになるような設定がされているため、サンプルコードを貼り付けるだけでOKです。

②コーディングの時間を短縮できる

2つ目のメリットは、コーディングの時間を短縮できる点です。一からコーディングをおこなってWebページを作成しようとすると、非常に時間がかかりますよね。

しかしBootstrapにはサンプルコードが用意されており、それらを貼り付けるだけで簡単にWebサイトの構成部品が完成します。できる限りコスト削減や時間削減を実現したい場合にBootstrapが使われることが多いです。

③整ったデザインになる

3つ目のメリットは、デザインの知識が無くてもWebページを作成できる点です。Webデザインの知識がなければWebページの配色やレイアウトを考えるのは非常に大変な作業です。

しかしBootstrapには既に整ったデザインの構成部品のコードが用意されています。それらのコードを貼り付けるだけで簡単におしゃれなWebページを完成させられます。

以上のようにBootstrapには多くのメリットがあるため現在も多くのユーザーに支持されているフレームワークです。

現役エンジニアからデザインツールの使い方やWeb制作を学ぶならCodeCampのWebデザインマスターコースがおすすめ！

➡️未経験からWebデザインをオンラインプログラミングスクールで習得

Webサイトを作る準備をしよう

完成形を確認しよう

今回はBootstrapのサンプルコードを使用してレスポンシブデザインのWebサイトを作成していきます。下図が完成形です。

必要なフォルダ＆ファイルを作る

Webサイトを作成していく前に前準備をしていきましょう。まずはPC上に「Bootstrap sample」というフォルダ名を作成します。なおフォルダを作成する場所はPCのデスクトップなど好きな場所で構いません。

次にBootstrap sampleの中に「index.html」ファイルと「img」フォルダを作ります。index.htmlはWebサイトのコードを各場所で、imgフォルダは画像を保管する場所です。

下記リンクから画像をダウンロードしてimgフォルダの中に保存してください。 sample1.jpg| sample2.jpg | sample3.jpg | sample4.jpg

index.htmlにテンプレートコードを貼り付ける

index.htmlをテキストエディタで開きます。本記事ではVisual Studio Codeというテキストエディタを使用して解説していきます。

Bootstrapにはすぐに始められるように数のようなテンプレートコードが用意されています。このコードを貼り付けるだけでBootstrapを使い始められるので非常に便利です。

出典：Bootstrap公式ページ

今回は皆さんが分かりやすいようにコメントが入ったコードを使っていきます。下記コードをindex.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.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Bootstrap Practice</title>
  </head>
  <body>

    <!-- Optional JavaScript -->
    <!-- jQuery first, Popper.js, Bootstrap JSの順番に読み込む -->
    <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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

ここまでできたら前準備は完了です。次の項目で実際にWebサイトの構成部品を作成していきます。

ナビゲーションメニューを作ろう

まずはWebサイトの一番上にあるナビゲーションメニューを作成していきます。タグの下に下記コードを貼り付けてください。

   <!-- ナビゲーションメニュー -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand text-dark" href="#">Portfolio</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ">
                <a class="nav-link text-dark" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-link text-dark" href="#skill">Skill</a>
                <a class="nav-link text-dark" href="#works">Works</a>
                <a class="nav-link text-dark" href="#contact">Contact</a>
            </div>
        </div>
    </nav>

コードを貼り付けると下図のようになっていることを確認してください。

ナビゲーションメニューの色を変更したい場合は、コードの中にある

タグのクラス名を変更するだけでOKです。Bootstrapには、主要な色のクラスが用意されています。

Bootstrap公式ページを確認してみましょう。背景色を変えたい場合は、bg-primaryなどとhtmlのクラスで指定するだけで良いので、CSSでコードを書く必要がありません。

またナビゲーションメニューがレスポンシブデザインになっていることをブラウザの幅を狭めたり広げたりして確認してみましょう。

*画像：スマートフォン画面

そうするとメニューの表示のされ方が変わるのを確認できます。このようにデバイスの幅によって表示のされ方が変わるのがレスポンシブデザインです。

Bootstrapのサンプルコードを貼り付けるだけで簡単にレスポンシブ対応させることが可能なのが大きな特徴です。

スライダーを作ろう

ナビゲーションメニューができたら、次は画像が自動で変わるスライダーを作っていきましょう。下記コードを

の後に貼り付けてみます。

   <!-- スライダー -->
   <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="img/sample1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/sample2.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/sample3.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>

そうすると下図のように画像が表示されるかと思います。一からスライダーを作ろうと思うと時間がかかりますが、Bootstrapを使うとこのような機能を簡単に作ることができます。

好きな画像に切り替えたい際は、imgフォルダに画像を保存した後にタグのurl部分を変更するだけでOKです。

スキルバーを作ろう

次にプログレスバーを使って自分のプログラミングスキルのレベルを表現してみましょう。スライダーのコードの下に下記コードを貼り付けてください。

   <div class="container py-4" id="skill">
        <h2>Skill</h2>
        <p>This is sample description.This is sample description.This is sample description.This is sample description.This is sample description.This is sample description.</p>
        <div class="progress">
            <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">HTML&CSS</div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">PHP</div>
        </div>
    </div>

コードを貼り付けると下図のようになっていることを確認しましょう。

ナビゲーションメニューと同様にバーの色もBootstrapのクラス名によって変えることができます。例えば下記コードを見ると「bg-dark」となっていますが、これを「bg-primary」と変えてバーの色の変化を確認してみましょう。

<div class="progress">
            <div class="progress-bar bg-dark"...(以下省略）

カードを作ろう

スキルバーができたらカードを作成していきます。カードとは画像と文字が組み合わさったものでランディングページやWebサイトで頻繁に見かける構成部品です。

先程のスキルバーのコードの下に下記コードを貼り付けてみましょう。

   <!-- カード -->
    <div class="container py-4" id="works">
        <h2>Works</h2>
        <p>This is sample description.This is sample description.This is sample description.This is sample description.This is sample description.This is sample description.</p>
        <div class="card-deck">
            <div class="card">
              <img src="img/sample4.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Work1</h5>
                <p class="card-text">This is sample description.This is sample description.This is sample description.This is sample description.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
            <div class="card">
              <img src="img/sample4.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Work2</h5>
                <p class="card-text">This is sample description.This is sample description.This is sample description.This is sample description.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
            <div class="card">
              <img src="img/sample4.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Work3</h5>
                <p class="card-text">This is sample description.This is sample description.This is sample description.This is sample description.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>
        </div>
    </div>

下図のように表示されればOKです。ここでもレスポンシブデザインになっていることをブラウザの幅を変えて確認してみましょう。

問合せフォーム&フッターを作ろう

最後に問合せフォームとフッターを作成していきます。下記コードをカードのコードの下に貼り付けてください。

   <!-- 問合せフォーム -->
    <div class="container py-4" id="contact">
        <h2>Contact</h2>
        <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1">
            </div>
            <button type="submit" class="btn btn-success">Submit</button>
          </form>
    </div>

   <!-- フッター -->
    <footer class="text-center bg-dark text-white">
        <p class="py-3">Portfolio</p>
    </footer>

下図のように表示されていればOKです。