• 更新日: 2022年05月31日

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

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

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

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

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

Bootstrapとは

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

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

image 出典：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サイトを作成していきます。下図が完成形です。

image

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

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

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

image

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

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

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

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

image 出典：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>

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

image

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

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

   <!-- スライダー -->
   <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を使うとこのような機能を簡単に作ることができます。

image

好きな画像に切り替えたい際は、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>

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

image

ナビゲーションメニューと同様にバーの色も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です。ここでもレスポンシブデザインになっていることをブラウザの幅を変えて確認してみましょう。

image

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

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

   <!-- 問合せフォーム -->
    <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です。

image

これでレスポンシブ対応されたWebサイトを作ることができました。

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

まとめ

ここまでBootstrapのサンプルコードを使って簡単なWebサイトを作成してきました。Bootstrapを使えば簡単にレスポンシブデザインを作ることができるので、一からコードを書くよりも圧倒的に早くWebページを作成できます。

ぜひサンプルコードを積極的に使ってコーディングにかける時間を省略していきましょう。

関連記事

ヤマモト
この記事を書いた人
ヤマモト

人気記事

  1. 【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
    プログラミング学習
    プログラミングスクール・サービス
  2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    受講生インタビュー
  3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    講師インタビュー
  4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    Python
    プログラミング書籍・参考書
  5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
    【PHP入門徹底ガイド】初心者のための学習ロードマップ
    PHP
    プログラミング入門
  6. コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
    Python
    HTML
    CSS
    お役立ち情報
    アプリ学習入門
  7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
    【Twitter×Python】自分専用のエゴサーチボットを作る方法
    Python
  8. Webデザインから見たSEO
    Webデザインから見たSEO
    Webデザイン入門
    Webデザインお役立ち情報
  9. 未経験からのWebデザイナー転職を有利にする資格４選
    未経験からのWebデザイナー転職を有利にする資格４選
    Webデザインお役立ち情報
    転職
まずは7日間お試し！人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp
プログラミング講座を無料で試す