スライドショー

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をつかわなかった場合は、自分でCSSJavascriptを書いてデザインを作っていく必要があるので、おしゃれなデザインがお手軽に使えるのは便利ですよね。

理由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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説