Bootstrap入門知識まとめ! 使い方もやさしく解説

誰しもキレイなWebデザインでサイトを作りたいもの。でも、キレイなデザインであればあるほど、作成には技量が必要とされてしてしまいがちです。

そういうときの強い味方になり得るのがWebフレームワーク「Bootstrap」です。

歴史のあるWebフレームワークで、多くの美しいテンプレートがあることはもちろんのこと、HTMLコードを用いることで誰でも簡単にキレイなWebサイトを作成することができます

本記事を最後までお読みいただけば、これからBootstrapを学ぼうとしているあなたにとって、最適な入門書となることでしょう!

【超入門】Bootstrapで知っておくべき3つの知識

アプリ開発

アプリ開発の様子

Bootstrapにはたくさんの特徴がありますが、

  • Bootstrapとはどういうものか
  • Bootstrapでできることは何か
  • Bootstrapの特徴グリッドシステムとは何か

これらの3つの特徴を理解することで、Bootstrapをよりスムーズに学ぶことができます。それぞれ詳しく解説します。

入門知識1:Bootstrapとは?

BootstrapはTwitter社が開発したもので、初期のころはTwitter Bootstrapと呼ばれていました。2012年9月末にTwitterから独立してオープンソースとなったので、「Bootstrap」に名称が変更されました。

Bootstrapは、同じ1つのページでPCにもスマートフォンにも対応することができるWebフレームワークです。そのため、開発の効率が非常にいいです。

また、端末に合わせて操作しやすいようにデザインも工夫されているため、初心者のユーザーでも簡単に使いやすいサイトをつくることができます。

Bootstrapは最も有名で、人気のWebフレームワークなのです。もっと詳しくBootstrapの基礎を知りたい!という方は、こちらの記事をご覧ください。

Bootstrapとは?意味や特徴、種類を徹底解説
更新日 : 2020年8月18日

入門知識2:Bootstrapは何ができるの?

表示される画面の幅によって、レイアウトをパソコン、タブレット、スマホなどさまざまなデバイスに合わせて切り替えられるWebサイトを、ワンソースで作ることができます。

つまり、パソコンとスマホでURLを分ける必要が無いWebサイトを作ることができます。

また、オシャレなデザインのウェブサイトを簡単に作成することができます。画像は、作成可能なボタン例で、サイズ変更可能、マウスカーソルを乗せた時の動きを付けることも可能です。

もっと詳しくBootstrapで何ができるかを知りたい!という方は、こちらの記事をご覧ください。

Bootstrapはなにができる?今すぐ使いたくなる魅力4選
更新日 : 2019年9月20日

入門知識3:Bootstrapのグリッドシステムとは?

格子状のレイアウトとすることで、PCとスマホでのレイアウトをそれぞれ最適に自動で表示させることができるシステムです。画面を12分割したそれぞれのエリア内に数字を入力するだけで、そのエリアの幅を簡単に指定することができます。

グリッドシステム分割イメージ:

Bootstrapのインストール方法

プログラミング

アプリ開発の様子

Bootstrapのインストール方法は2つあります。ひとつは、Bootstrapのファイル一式をダウンロードして行う方法で、次のような作業になります。

1. Bootstrapのファイル一式をダウンロード
2. ファイル一式をフォルダに配置
2. 配置したCSS・JavascriptをHTMLで読み込むコードを書く

もうひとつは、Bootstrap CDNを使う方法です。

Bootstrap CDNとは、Bootstrapを使えるようにするための仕組みのことで、Bootstrapを使うために必要なファイル一式のダウンロードを必要とせず、HTMLにコードを埋め込むだけでBootstrapが使用可能になります。

Bootstrapを初めて使う人には、「HTMLにBootstrap用のCSS・javascriptを読み込むコードを書くだけ」で使える、Bootstrap CDNを使うインストール方法をおすすめします。

もっと詳しくBootstrapの導入方法を知りたい!という方は、こちらの記事をご覧ください。

最速でBootstrapを導入するためのBootstrap CDNの使い方を徹底解説!!
更新日 : 2020年6月19日

【サンプルコード付き】Bootstrapの使い方

アプリ開発の様子

Bootstrap CDNを使えば、別途ファイルをダウンロードせず、下記のようなコードをHTML内に書くだけで、簡単にBootstrapを使う準備ができます。

Bootstrapを導入するためのHTMLコード:

<!-- Bootstrap CSS -->

<<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Bootstrap Javascript(jQuery含む) -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Web画面を作るときの画面の上部に表示するメニューのことであるナビゲーションバーも、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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   
    <title>Hello, world!</title>
</head>

<body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3">
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">新規登録</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">データ一覧</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">エクスポート</a>
                </li>
            </ul>
        </div>
    </nav>    
   
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

実行結果:

他にも入力フォームやボタンも、HTMLコードを使って簡単に作成できます。

もっと詳しくBootstrapの詳しい使い方を知りたい!という方は、こちらの記事をご覧ください。

Bootstrapの使い方とは?初心者でもわかる使い方をまとめて解説!!
更新日 : 2020年6月19日

Bootstrapで手っ取り早くおしゃれなサイトを作る方法

アプリ開発の様子

HTMLコードをゼロから作る必要はなく、既にBootstrapで作られたおしゃれなテンプレートを利用できます。具体的には、テンプレートをダウンロードして画像や文字などを一部修正する、といった使い方です。

例えば、テンプレート「TITAN」

参考:Bootstrap テンプレ-ト https://getbootstrap.jp/

多くのレイアウトを含み、その数なんと100以上!多目的に使うことができる強力な無料テンプレートです。

上記の画像は、ダウンロードしたテンプレートのファイルを編集したものです。わかりにくいですが「SAMURAIENGNEERJUKU(侍エンジニア塾)」と書いています。

他にも、テンプレート「megakit」

参考:Bootstrap テンプレ-ト https://getbootstrap.jp/

最新のWeb技術を使用して設計されたテンプレートです。シングルページですが多目的に使えます。企業サイトや、アプリのランディングページ、ポートフォリオ、弁護士や病院向けのWebサイトにも適しています。

テンプレート「agronomy」

参考:Bootstrap テンプレ-ト https://getbootstrap.jp/

農業ビジネス向けに作成されたテンプレートです。おいしそうな作物の写真を載せるのに適しています。

このように、テンプレートをダウンロードして編集することで、簡単におしゃれなデザインのサイトを作ることができます。

もっと詳しくBootstrapのテンプレートを知りたい!という方は、こちらの記事をご覧ください。

2018年最新!Bootstrap良質テンプレート19選【無料/有料/日本語別】
更新日 : 2019年4月25日

【入門者向け】Bootstrapが学べる本・サイト・動画

アプリ開発の様子

動画

一通り使い方を手を動かしながら学べるので便利です。

  • ドットインストール :無料登録することで3分の学習動画を視聴可能
    https://dotinstall.com/
  • Udemy :有料ですが、学習動画をスマホにダウンロードして視聴可能
    https://www.udemy.com/ja/

サイト

わからないことがあったときに、動画とは違いピンポイントに調べやすいです。

  • 侍エンジニア塾 :本サイトであり、初心者向けにわかりやすく解説
    https://www.sejuku.net/blog
  • とほほのWWW入門 他のコードについても解説はあるが、特にBootstrapについての解説が詳しい
    http://www.tohoho-web.com/

1冊の本になっているので、体系的な知識を身に着けられます。手元に1冊は置いておくほうが、安心してプログラミング学習ができるでしょう。

  • Bootstrapファーストガイド―CSS設計の手間を大幅に削減!:まったく知識のない初心者の方に最初に読んでもらいたい一冊
  • これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装〈Bootstrap・コンテンツファースト・コンポーネント設計〉:ウェブサイト制作が初めてという人にもおすすめの一冊

もっと詳しくBootstrapおすすめ学習本を知りたい!という方は、こちらの記事をご覧ください。

【入門者必見】Bootstrapおすすめ学習本5選
更新日 : 2020年7月29日

まとめ

Bootstrapは簡単におしゃれなサイトが作ることができるフレームワークです。また、Bootstrap CDNを使えば、ファイルのダウンロードも不要でBootstarpを使うことができます。

テンプレートも種類が豊富にあり、無料のものでも洗練されたデザインのものが多いため、Webサイトへの導入にはうってつけのWebフレームワークです。

ぜひ、プログラミング学習で使い方を学び、Webサイト作成に生かしてください。

LINEで送る
Pocket

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

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

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

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

cta_under_bnr

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

書いた人

侍エンジニア塾ブログ編集部

侍エンジニア塾ブログ編集部

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

おすすめコンテンツ

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

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