• 更新日: 2022年05月31日

【初心者必見】Bootstrapのテンプレートの使い方を解説

【初心者必見】Bootstrapのテンプレートの使い方を解説

コーディングの時間を短縮したい

Bootstrapという言葉を知っているけど、使うのは難しそう

プログラミング初心者のなかには、このように感じている方も多いのではないでしょうか？ そこで今回はBootstrapのテンプレートを使ったコーディングの時短術について解説していきます。

テンプレートを使えば、1からコーディングをするよりも圧倒的に早くWebサイトを制作できるので非常に便利です。これからBootstrapの使い方に慣れたい方やポートフォリを作ってみたいと感じている方にオススメの記事なのでぜひ参考にしてみてください。

目次
  1. Bootstrapとは？
  2. Bootstrapのテンプレートを使う3つのメリットは？
  3. メリット①　コーディングにかかる時間を短縮できる
  4. メリット②　おしゃれなデザインのWebサイトを作れる
  5. メリット③　レスポンシブ対応が簡単
  6. Bootstrapのテンプレートはどこで入手できる？
  7. Bootstrapのテンプレートを使ってみよう
  8. コードエディタを用意しよう
  9. サイトからファイルをダウンロードしよう
  10. サイトをカスタマイズしよう
  11. まとめ

Bootstrapとは？

実際にBootstrapのテンプレートを使う前に、Bootstrapとは何かについて簡単に説明していきます。BootstrapとはTwitter社が開発したWebフレームワークです。

WebフレームワークとはWebサイトやWebアプリケーションを制作するのに必要な機能が予め揃った物を指します。Webフレームワークを使う主なメリットは下記の2点です。

①Webサイトやアプリ開発にかかる時間を短縮できる
②フレームワーク独自のルールがあり、共同開発に適している

まず①に関してですが、前述の通りフレームワークには必要な機能があらかじめ揃っているので1からコーディングするのに比べて圧倒的に時間短縮になります。

実際の開発現場ではいち早くWebサイトやアプリを市場に出すことが求められます。なぜなら開発速度が遅ければ、競合他社に市場を奪われたりしてしまう可能性があるからです。

次に②に関して説明します。フレームワークには独自のコードの書き方やファイルの命名ルールなどが存在しています。

コードの書き方や名称の付け方などは、プログラマーによって様々です。共同開発する際に、それぞれが自分にだけわかる独自の名称や関数を使ってコーディングしていくと、他の人が理解できない可能性が出てきますよね。

しかしWebフレームワークには命名ルールなど細かい規則があるため、それに従えば誰でもコードの内容を理解できます。

BootstrapはこのようなWebフレームワークの特徴を持っているため、多くの開発現場で支持されています。

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

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

Bootstrapのテンプレートを使う3つのメリットは？

メリット①　コーディングにかかる時間を短縮できる

１つ目のメリットはコーディングの時間を短縮できる点です。一からコーディングしてWebサイトを制作するとなると、ある程度の時間がかかります。

Bootstrapのテンプレートには必要なコードや設定が既に書かれた状態なので、コーディングにかける時間の大幅短縮が可能です。また通常はWebサイトのデザインを整えるためにCSSを使う必要がありますが、BootstrapはHTMLに事前に用意されたクラス名を加えるだけで、色やデザインを変えられます。

このようにCSSのコードの量を減らすことができる点もテンプレートをオススメする理由です。

メリット②　おしゃれなデザインのWebサイトを作れる

2つ目のメリットはおしゃれなデザインのWebサイトが簡単に制作できる点です。Webデザインの知識が無い方が1からWebサイトを制作するのは非常に大変な作業になります。

しかしBootstrapのテンプレートは既に整ったおしゃれなデザインが出来上がっているので、デザインに不安を覚える方におすすめです。

メリット③　レスポンシブ対応が簡単

3つ目のメリットはレスポンシブ対応させることが非常に簡単な点です。レスポンシブ対応とはパソコンやスマートフォンなどデバイスによってWebページの表示の仕方を変えることを指します。

パソコンでは問題なく見られても、スマートフォンでは文字が見切れていたりレイアウトが崩れていたりして見づらかった経験はありませんか？ 最近はスマートフォンで情報を得る方が多いので、Webサイトのレスポンシブ対応は必須条件です。

Bootstrapのテンプレートは既にレスポンシブ対応させる設定がされているので、コーディング量を圧倒的に減らせます。

Bootstrapのテンプレートはどこで入手できる？

続いてBootstrapのテンプレートを入手する方法について解説していきます。テンプレートはWebサイト上に公開されており、必要なファイルをダウンロードするだけでOKです。

特に「Start Bootstrap」というWebサイトがおすすめです。 image 出典：Start Bootstrap

オススメする理由として下記点が挙げられます。

・無料で入手可能なテンプレートが豊富
・デザインがおしゃれ
・テンプレートが既にレスポンシブ対応になっている

次の項目で実際にStart Bootstrapでファイルをダウンロードして、Webサイトをカスタマイズしていくまでの流れを解説していきます。

Bootstrapのテンプレートを使ってみよう

ここからBootstrapのテンプレートを使って簡単なWebサイトを作っていきましょう。制作したサイトはポートフォリオとしても使えるので、ぜひ参考にしてみてください。

###コードエディタを用意しよう まずはコードエディタを用意しましょう。既に普段から使っている方は読み飛ばして頂いても問題ありません。

一般的にコードエディタを使ってコードを書いていきます。オススメのエディタとしてVisual Studio Code（以下vscode）があるので紹介しておきます。

コードの見やすさやカスタマイズ性が良いので、世界中で使用されているコードエディタです。実際の開発現場でも使われているので、この機会に操作に慣れておくのも良いかもしれません。

サイトからファイルをダウンロードしよう

先程紹介したStart Bootstrapでテンプレートをダウンロードします。テンプレートの保存先はデスクトップなど好きな場所で構いません。

ダウンロードしたファイルをvscodeで読み込みます。読み込むと下の画像のようになっているかと思います。

image

サイトをカスタマイズしよう

[トップの背景画像を変えてみよう]

まずはvscodeでindex.htmlファイルを開いてみましょう。

そして2行目の言語設定のコードを英語から日本語に変えておきましょう。これはWebページを正しく表示させるために必要になります。

＜変更前＞

<html lang="en">

＜変更後＞

<html lang="ja">

次にトップの背景画像を変えてみたいたいと思います。まずは必要な画像をリンクからダウンロードしてください。ダウンロードできたらそのファイルを「assets/img」ファイルの直下に保存します。

image

そしてCSSフォルダの中の「style.css」を開き下記箇所を探します。このcssでトップ画面のデザインを整えています。

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 4.5rem);
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../assets/img/bg-masthead.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

コード量が多くなった時に探したい場所が見つかりにくい場合があります。 その際は「command + F」を押すと語句を検索することができるので、そこで「bg-masthead」と打ち込みましょう。

上記コードのurlの中身を先程ダウンロードした画像に変えてみます。下記画像のように変わればOKです。

（省略）
  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../assets/img/background.jpg");
（省略）

image

[文章を変えてみよう]

次に好きな文章に変えられるようになりましょう。index.htmlフォルダを開き、下記場所を探します。

＜変更前＞

       <!-- Masthead-->
        <header class="masthead">
            <div class="container h-100">
                <div class="row h-100 align-items-center justify-content-center text-center">
                    <div class="col-lg-10 align-self-end">
                        <h1 class="text-uppercase text-white font-weight-bold">Your Favorite Source of Free Bootstrap Themes</h1>
                        <hr class="divider my-4" />
                    </div>
                    <div class="col-lg-8 align-self-baseline">
                        <p class="text-white-75 font-weight-light mb-5">Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached!</p>
                        <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
                    </div>
                </div>
            </div>
        </header>

＜変更後＞

       <!-- Masthead-->
        <header class="masthead">
            <div class="container h-100">
                <div class="row h-100 align-items-center justify-content-center text-center">
                    <div class="col-lg-10 align-self-end">
                        <h1 class="text-uppercase text-white font-weight-bold">ポートフォリオ</h1>
                        <hr class="divider my-4" />
                    </div>
                    <div class="col-lg-8 align-self-baseline">
                        <p class="text-white-75 font-weight-light mb-5">これはポートフォリオです。これはポートフォリオです。これはポートフォリオです。
                            これはポートフォリオです。これはポートフォリオです。これはポートフォリオです。これはポートフォリオです。これはポートフォリオです。これはポートフォリオです。</p>
                        <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">詳しく見る</a>
                    </div>
                </div>
            </div>
        </header>

h1やpタグの文章を以下のように変えてWebページを確認してみましょう。下記画像のようになればOKです。

image このように文字を変えたい場所を探し、好きな文章に変えるだけなので非常に操作が簡単です。余裕がある方は、他の部分も好きな文章に変えてBootstrapの操作になれていきましょう。

[ボタンの色を変えてみよう]

文字の変え方を理解できたら、次はボタンの色を変えていきましょう。Bootstrapには色を定義するクラス名が用意されています。

image 参照：Bootstrap公式ページ

トップ画像の部分にある「詳しく見る」ボタンの色を下記のように変えてみてください。 ボタンの色が下図のように変わればOKです。

＜変更前＞

<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">詳しく見る</a>

＜変更後＞

<a class="btn btn-success btn-xl js-scroll-trigger" href="#about">詳しく見る</a>

image

[アイコンを変えてみよう]

今回はFontAwesomeを使ってアイコンを変えてみましょう。

FontAwesomeとは無料で様々なアイコンを提供しているWebサイトです。HTMLでFontAwesomeのリンクを読み込むことですぐに使えることが良い点です。

image 出典：FontAwesome

今回使用するBootstrapのテンプレートでは、既にFontAwesomeが読み込まれているので設定は必要ありません。

       <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>

ではFont AwesomeのWebサイトで好きなアイコンを見つけてみましょう。 index.htmlにある「Services」の箇所の下記コードを編集していきます。変更後のコードに変えてWebページを確認してみましょう。

＜変更前＞

               <div class="row">
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-gem text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Sturdy Themes</h3>
                            <p class="text-muted mb-0">Our themes are updated regularly to keep them bug free!</p>
                        </div>
                    </div>


＜変更後＞

               <div class="row">
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fab fa-4x fa-angellist text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Sturdy Themes</h3>
                            <p class="text-muted mb-0">Our themes are updated regularly to keep them bug free!</p>
                        </div>
                    </div>

下記画像のようになっていればOKです。

image

もう少しコードの内容を見ておきましょう。 アイコンを表示させる部分は下記部分です。

 <i class="fab fa-4x fa-angellist text-primary mb-4"></i>

fab fa-angelist：ピースアイコンの表示
fa-4x：アイコンの大きさを元の4倍で表示

FontAwesomeでアイコンを選択すると下のようにコードが表示されます。このコードに変えるだけでOKです。

image

ここまでで基本的なBootstrapの使い方の説明は以上です。他にもBootstrapの公式ページにはサンプルコードが多数掲載されているので、それらを使ってカスタマイズしてみるのも良いかもしれません。

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

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

まとめ

ここまでBootstrapのテンプレートの使い方を解説してきました。テンプレートを使えば簡単におしゃれなWebサイトを制作できるので非常におすすめです。

最後に本記事の概要をまとめましたので、ぜひ参考にしてみてください。

[1] Bootstrapのテンプレートを使うとコーディングの時間を短縮できる
[2] Bootstrapを使えばレスポンシブ対応が簡単
[3] デザインの知識がなくてもテンプレートを使うだけでおしゃれになる

関連記事

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

人気記事

  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
プログラミング講座を無料で試す