Bootstrapとは?最新版のBootstrap4の使い方についても徹底解説!

こんにちは、フリーランスエンジニア兼ライターのワキザカ サンシロウです。皆さんは、Bootstrapを知っていますか?

WEBアプリ・WEBサービスなどの画面を作るときに、Bootstrapの使い方を知っているととても便利です。

そこで今回は、

  • Bootstrapとは
  • Bootstrap4とは
  • Bootstrapを使うメリット
  • Bootstrap4の使い方
  • おすすめの使い方:テンプレートを活用する方法

といったように、基礎的なことから応用的な方法まで、徹底的に解説します!

Bootstrapとは

まず、Bootstrapについて簡単に解説します。Bootstrapは、WEBサイトやWEBページを効率よく開発するためのWEBフレームワークです。(WEBフレームワークって何?という方は、先にこちらの記事をご覧ください。)

HTML・CSS・JavaScriptから構成される、最も有名なWEBフレームワークですね。WEBページでよく使われるフォーム・ボタン・メニューなどの部品がテンプレートとして用意されています。

また、レスポンシブ対応がされているため、Bootstrapを使うだけでパソコン、iPad、スマホなど画面サイズに自動対応した画面を作ることができます。

Bootstrapを使うメリットとは?

次に、Bootstrapを使うメリットについて解説します。

Bootstrapを使うメリットは、デザインにかける時間を大幅に短縮できることです。その理由について、詳しく解説しますね。

理由1:フォーム・ボタン・メニューなどのデザイン部品が使える

Bootstrapを使うと、画面に使うおしゃれな部品が簡単に使えます。たとえば、次のようなボタン・メニューを簡単に使うことができます。

デザインサンプル:

このように、おしゃれな部品を簡単に使うことができます。

Bootstrapをつかわなかった場合は、自分でCSSやJavascriptを書いてデザインを作っていく必要があるので、おしゃれなデザインがお手軽に使えるのは便利ですよね。

理由2:画面のレイアウトがササっと作れる

Bootstrapを使うと、画面のレイアウトを作るのが簡単になります。

デザインを考えるうえで、レイアウトを作っていくのは意外に時間がかかります。CSSになれている人は別かもしれませんが、そうでない場合は作っていくので時間がかかってしまいますよね。

Bootstrapにはレイアウトを作るために便利な「グリッドシステム」があり、画面を12分割した数字を入れるだけで、簡単に要素を指定することができます。

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

グリッドシステムをつかってすぐに画面レイアウトを作ることができるので、レイアウトの調整に時間をかけずに画面を作ることができます。

理由3:Bootstrapの使い方がとても簡単

画面の部品やレイアウトの設定は、どれもHTMLのタグにクラス名を指定するだけで簡単に設定することができます。

「何のクラスでどんな設定ができるか?」についても、解説している公式ページがあるので基本的にコピペで使えます。HTML・CSS初心者でも簡単に使うことができるので、お手軽におしゃれなデザインの画面作ることができます。

また、Bootstrapで大枠のデザインを設定した後、CSSでデザインを追加していくことで、オリジナリティのある画面も速く作ることができます。基礎体力としてBootstrapの使い方を覚えておけば、画面を作るのがとても速くなるのでおすすめです。

Bootstrapについてさらに詳しく知りたい方は以下で解説しているので、気になる方は見てみてくださいね!

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

Bootstrap4とは

次に、Bootstrap4について解説します。Bootstrap4は、2018年2月にリリースされた最新バージョンのBootstrapです。最新のデザインを取り入れたバージョンになっているので、今から使う方はBootstrap4で問題ありません。

画面の部品が追加されたこと以外の大きな違いは、デザインレイアウトにFlexboxを使えるようになったことです。Flexboxは、CSS3で追加された新機能で、今までよりも自由かつ簡単に横並びのレイアウトを作ることができます。

Bootstrapのグリッドシステムでも十分画面が作れるのですが、12分割で画面のサイズを指定して作っていくので、「少し小さくしたい or 少し大きくしたい」といった微調整が難しかったりします。

Flexboxはとても自由にレイアウトを作っていくことができるので、横並びにするレイアウトを作る場合にとても便利です。最新のCSSの機能を使えるようになったのは、とても便利ですよね。

ちなみに、Flexboxについては以下でも詳しく解説しているので、気になる方は見てみてくださいね!

CSSのFlexboxとは?横並びレイアウトの新定番になるかも!
更新日 : 2019年7月31日

Bootstrap4の使い方

次に、Bootstrap4の具体的な使い方について解説します。

Bootstrap4を使ったHTMLファイルの作成

まずは、Bootstrap4を使ったHTMLファイルを作ります。作り方は次のとおりです。

1. Bootstrap 4 ドキュメントのGetting startedにアクセスし、「Starter template」をコピー

URL:https://getbootstrap.com/docs/4.1/getting-started/introduction/

2. テキストエディタに貼り付けて2行目の <html lang="en"> を<html lang="ja"> に変更

3. 「.html」の拡張子でファイル保存

これでBootstrap4を使ったHTMLファイルができました。

Bootstrapの部品をHTMLに置く

次に、Bootstrapの部品を置く方法を解説します。

1. 部品のコード解説ページからHTMLをコピー
URL:https://getbootstrap.com/docs/4.1/components/

2. HTMLファイルのコードにコピペ
「右クリック → プログラムから開く」からテキストエディタを選択しコードを開き、コードのbodyタグ内にコピペします。

コードを開く方法:

コピー後の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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
   
   <!-- BootstrapからコピーしたボタンのHTML -->
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>

    <!-- 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>

4. 画面確認
ファイルをダブルクリックして画面を開き、確認します。

ファイルをダブルクリック:

開いた画面:

このように、簡単にBootstrapを使うことができます。

Bootstrapのテンプレートを活用する方法

ただ、これからruby、php、pythonなどのサーバーサイドの言語を勉強していきたいと思っている方で、以下のように思った方もいるのではないでしょうか。

あまり画面を作るのに時間をかけたくない
機能を作ることに重点を置きたい

CSSやJavascriptを時間をかけて覚えていけば、自分でもおしゃれなデザインの画面が作れるようになります。

ただ、サーバーサイドの言語をメインにしていきたい方は、あまり時間をかけたくないですよね。

そんな方におすすめなのが、Bootstrapできたテンプレートを使う方法です。たとえば、次のようなテンプレートを使って文字や色を修正していくような流れで、画面を作ることができます。

・テンプレートサンプル:Clean Blog
bts-cleanblog

ダウンロードページ / デモページ

こちらはブログ向けのテンプレートですが、コーポレートサイト向けのテンプレートや、アプリ向けのテンプレートなど他にも便利なテンプレートがたくさんあります。

Bootstrapでできたテンプレートについて以下で詳しく解説しているので、興味がある方はぜひ見てみてくださいね!

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

まとめ

今回は、Bootstrapの概要・Bootstrap4の使い方について解説しました。Bootstrapを使えば、お手軽におしゃれな画面を手早く作ることができます。アプリ開発の現場で使うケースも多いので、覚えておくと便利です。

使い方も簡単なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。
Webアプリ、業務アプリ開発において、要件定義、設計、インフラ、製造、テスト、運用保守など、様々な経験あり。
また、侍ブログ編集部として、これまでに200記事以上の記事を執筆。
現在はフリーランスエンジニア兼テックライターとして活動中。