【誰でもわかる】Bootstrapのメリットと使い方・読み込み方法

こんにちは!侍エンジニア塾ブログ編集部です。

Webページのデザインをおしゃれにしたい!
コーディングに時間がかかってしまう!

HTML・CSSを使ってWebページの制作をしている方の中には、このような悩みを持っている方もいるでしょう。

そこで、今回はデザインの知識やスキルが無くても、簡単にWebページを作成できるBootstrapについて解説していきます。Bootstrapの特徴や使い方に関して、初心者の方が理解できるように、なるべく専門用語を少なく解説しているのでぜひ参考にしてください。

Bootstrapとは?

Bootstrapを調べる男性

Bootstrapを調べる男性

Bootstrapとは、Twitter社により開発されたWebフレームワークです。

Webフレームワークとは、Webサイトで頻繁に使用されるメニューやボタンなどの機能が予め用意されたものを指します。Bootstrapを使用すれば、デザインの知識が無い方でも簡単におしゃれなWebでサインを制作できることから、人気を博しています。

Bootstrapとは?最新版のBootstrap4の使い方についても徹底解説!
更新日 : 2019年5月6日

Bootstrapを使うメリットは?

Bootstrapのメリットとは?

Bootstrapのメリットとは?

それでは、ここからBootstrapを使う3つのメリットについて詳しく見ていきましょう。

コーディングの量を減らすことができる

1つ目のメリットは、「コーディング量を減らせる」点です。

通常、Webサイトを構成するボタンやメニューなどのコンポーネント(部品)を作るためには、HTMLとCSSの2つを使ってコーディングしていきます。

コンポーネントの数が増えると、その分必要なコードの量も増え、Webページ制作に時間がかかってしまいます。またWebページを後からカスタマイズしたいと思った時に、コードの量が多いと見にくくなりミスが起きやすくなります。

しかし、Bootstrapで予め用意されたクラスというものを、HTMLに書くだけでコンポーネントを簡単に作成することができます。つまりBootstrapを使えば、CSSでコンポーネントのデザインやレイアウトを整える必要が無く、効率的にWebページの制作が可能になるのです。

デザインの知識がなくても、おしゃれなWebサイトを制作できる

2つ目は、「簡単におしゃれなWebサイトを作ることができる」点です。

デザインの知識が無い方が、Webページのレイアウトやコンポーネントのデザインを一から考えて制作するのは難易度が高い作業です。

しかしBootstrapで予め用意されたクラスを使うことで、簡単におしゃれなWebサイトを制作することができます。またコンポーネントの色やデザインは、HTMLに書くクラス名を変えるだけで、簡単に変えることができます。

レスポンシブ対応のデザインを簡単に作れる

3つ目は、「レスポンシブ対応のデザインを簡単に作れる」点です。

レスポンシブ対応とは、PCやスマートフォン、タブレットなど様々なデバイスに適したWebページを制作することを言います。

一昔前までは、PC専用のWebページを作れば良かったのですが、スマートフォンやタブレット端末が普及によりレスポンシブ対応したWebページの需要が高まってきています。

実際に総務省のデータによれば、2017年の段階でモバイル端末(スマートフォンを含む)の世帯保有率は94.8%なのに対して、パソコンの保有率は72.5%となっています。

Bootstrapの「グリッドシステム」という機能を使えば、少ないコーディング量で簡単にレスポンシブ対応したWebページを制作することができます。

Bootstrapの読み込み方法

Bootstrapの読み込み方法

Bootstrapの読み込み方法

ここからは、Bootstrapを実際にHTMLで読み込む方法について解説していきます。Bootstrapを使うには、事前に用意されたCSS・jQuery・javascriptのライブラリを準備する必要があります。

ここでは、

  • インターネット経由で必要なファイルを読み込む
  • ファイルをダウンロードして使う

この2つを紹介していきます。

CDNを使い、Bootstrapを読み込む方法

まずは、CDN(コンテンツ・デリバリ・ネットワーク)を使ってBootstrapを読み込む方法について解説していきます。後述する必要なファイルをダウンロードする方法よりも簡単にBootstrapを使えるので、初心者の方にオススメの方法です。

ちなみにCDNを簡単に説明すると、必要なファイルをダウンロードしなくても、必要なサーバーから提供してくれる仕組みのことを言います。

CDNの特徴

  • 読み込みが速い
  • 必要なファイルをダウンロードしないので初心者でも簡単

まず、Bootstrapの公式ページにアクセスし、必要なコードをコピーしHTMLに貼り付けていきます。

CSSの読み込み

まずはBootstrapのcssを読み込んでいきましょう。以下のコードをタグに貼り付けてください。

Bootstrapの公式ページには予めHTMLのテンプレートが用意されているので、こちらをコピペして使うこともできます。

<!doctype html>
<html lang="ja">
 <head>
 
   <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>Hello, world!</title>
 </head>
 <body>
   <h1>Hello, world!</h1>
 
  <!-- jQuery読み込み -->
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 
  <!-- Propper.js読み込み -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 
  <!-- BootstrapのJavascript読み込み -->
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 </body>
</html>

皆さんが事前に書いてあるCSSの読み込みコードよりも、前に貼り付けるようにしてください。

<!-- BootstrapのCSS読み込み -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Javascript・jQueryの読み込み

以下のコードをこの順番での直前に貼り付けてください。

必ずjQuery,Propper.js,Bootstrap.jsの順番に読み込むのに注意してください。コードの順番が違うと、Bootstrapが正しく動作しない可能性があります。

<!-- jQuery読み込み -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 
<!-- Propper.js読み込み -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 
<!-- BootstrapのJavascript読み込み -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

ここまでできたらBootstrapを使う準備は完了です。余談ですが、皆さんはjavascriptとjQueryの違いを理解できていますか?

両者ともにWebページに動きをつける役割がありますが、jQueryはjavascriptのコードを少ない記述で書くために開発されたライブラリです。ライブラリとは、使用頻度が高い機能だけを取り出してまとめたものを言います。

jQueryを使うことで、コードの記述量が減り効率的に開発を進めたり、コードが見やすくなりメンテナンスがしやすいといったメリットがあります。

必要なファイルをダウンロードしてBootstrapを使う方法

次にBootstrapの公式ページから、必要なファイルをダウンロードする方法について解説していきます。CDNから読み込む方法よりは少し難しいですが、こちらの方法も慣れておきましょう!

ファイルのダウンロード

Bootstrapを使うには、css,javascript,jQueryの3種類のファイルが必要となります。まずは下の画像のようにhtmlファイル、css・jsフォルダを用意しておきます。

ダウンロードしたbootstrap

次にBootstrap公式ページにある「Download」ボタンを押すと、必要なファイルのダウンロードが始まります。

圧縮ファイルを開くと、なかにはCSSとJSフォルダが入っています。このフォルダに入っているファイルから必要なものを抜き出して使います。

CSSファイル

CSSフォルダの中にある「bootstrap.css」ファイルを使用します。このファイルをコピーして予め作成していたcssフォルダに移動させます。

min.cssファイル

「min.css」のファイルは、圧縮版のファイルです。通常版のコードの内容と差はありませんが、コードのスペースなどを省略しており、読み込みスピードをUPさせることができます。

.css.mapファイル

「.css.map」ファイルはsassを使用する際に必要なファイルとなります。sassとはcssを効率的に書くために開発された言語です。CSSと同じく、HTMLのレイアウトやデザインを変える役割があります。

JSファイル

JSフォルダの中にある「bootstrap-bundle.js」ファイルをコピーして、作成しておいたjsフォルダの中に入れます。

jQueryファイル

最後にjQueryファイルを公式ページからダウンロードします。ファイルの種類はいくつか存在しますが、「Download the compressed, production jQuery」を選べば問題ありません。

リンクの上で右クリック>リンク先を別名で保存>作成しておいたjsフォルダの中に移動の順番に行ってください。

ここまでできたら必要なファイルのダウンロードは完了です!あと一息です!もう少し頑張りましょう!

HTMLでファイルを読み込む

ファイルをダウンロードしただけでは、Bootstrapを使えません。必ずHTMLでファイルを読み込んであげる必要があります。
cssの読み込みコードはの中に、jQueryとjsのコードはの直前に貼り付けます。

<!doctype html>
<html lang="ja">
 <head>
   
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- BootstrapのCSS読み込み -->
   <link rel="stylesheet" href="css/bootstrap.css">
 
   <title>Hello, world!</title>
 </head>
 <body>
   <h1>Hello, world!</h1>
   <!-- jQuery読み込み -->
   <script src="js/jquery-3.5.1.min"></script>
  <!-- Bootstrapのjs読み込み -->
   <script src="js/bootstrap.bundle.js"></script>
 </body>
</html>

お疲れ様でした。これでBootstrapを使う準備は完了です。

まとめ

今回はBootstrapの特徴から読み込み方までを解説してきました。Bootstrapを使えば、デザインの知識が無い方でも簡単にWebページを作成できます。ぜひ積極的に使っていきましょう!

もしBootstrapの読み込み方に迷ったら、またこの記事を読んで復習して頂ければ幸いです。

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー