Bootstrapの使い方とは?初心者でもわかる使い方をまとめて解説!!

皆さんは、Bootstrapを使ったことがありますか?WEBアプリ・WEBサービスなどの画面を作るときに、Bootstrapの使い方を知っているととても便利です。そこで今回は、

  • Bootstrapとは?
  • Bootstrapを導入する方法
  • Bootstrapの使い方【レイアウト編】
  • Bootstrapの使い方【コンポーネント編】
  • Bootstrapの画面を高速に作る方法

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

Bootstrapとは?

はじめに、Bootstrapの概要について簡単に解説します。BootstrapとはWEB画面を作るときに便利なCSSフレームワークの一つです。Bootstrapを使うと、簡単におしゃれでスマホ対応済み(レスポンシブ)の画面を作ることができます。

オリジナルデザインを取り入れる前段階の、画面の大枠を作るときにもとても便利なので、使い方を覚えておくと便利です!

※この記事では、「Bootstrapの使い方」に特化して解説していくため、Bootstrapの基礎的な機能・詳細について知りたい方は、以下がおすすめです!

【超シンプル】Bootstrapを導入する方法

次に、Bootstrapを導入する方法について解説します。HTMLファイル内に以下コードを入れるだけで、簡単にBootstrapを使うことができます。

css・javascript・jQuery等を使っているのですが、別途ファイルをダウンロードしなくてもCDNという仕組みを使い、上記のようなコードをHTML内に書くだけで、簡単にBootstrapを使う準備ができます。

HTMLファイルのコードサンプルは以下のとおりです。

HTMLファイルのコードサンプル:

以降の説明は、上のHTMLファイルを使って説明していきますね。ちなみに、Bootstrap CDNについては以下で詳しく解説しているので、興味がある方は見てみてくださいね!

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

Bootstrapの使い方【レイアウト編】

次に、Bootstarpの具体的な使い方について解説します。まずは、画面レイアウトに関連する使い方についてです。

グリッドシステムの使い方

まずは、Bootstrapの機能の核となるグリッドシステムについて解説します。グリッドシステムとは、画面を12分割した数字を入れるだけで、簡単に画面の幅を指定することができる仕組みです。

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

col-2、col-sm-7、col-md-12のように、数字を直接指定して横幅のサイズを指定できます「col-XX」「col-sm-XX」等の違いは以下のとおりです。

  • col-XX  :Auto
  • col-sm-XX :最大幅540px
  • col-md-XX :最大幅720px
  • col-lg-XX :最大幅960px
  • col-xl-XX :最大幅1140px

グリッドシステムを使った、簡単なサンプルを用意しました。

サンプルコード:

実行結果:



サンプルは簡単なテキストボックスを表示している画面ですが、「<div class="border col-5">」でcol-5を指定しているため、画面幅が5/12の幅のみ使って表示しています。

このように、各コントロールの横幅を指定できるので覚えておくと便利です!

margin・paddigの使い方

次に、画面の余白を制御するためのmargin・paddingの使い方について解説します。

※margin・paddingと聞いてぴんと来ない方は、さきに以下を見るのがおすすめです!

Bootstrapでは、marginまたはpaddingの先頭文字 + 上下左右の指定位置 + 余白の大きさ」を指定することで、余白を設定することができます。少しわかりづらいので、図にしてみました。

・Marginの場合:

・Paddingの場合:

たとえばmarginの場合は、「mt-〇」で上に余白、「mr-〇」で右に余白、「mb-〇」で下に余白、「ml-〇」で左に余白のように、指定した位置に余白を作ることができます。

これだけだとわかりづらいので、簡単なサンプルを用意しました。marginを設定したパターン・設定しないパターンの2つを比較できるサンプルです。

サンプルコード:

実行結果:

このように、余白を付けて見やすく整えることができます。この例では、marginのみでしたが、paddingも同様に使えるので、余白を設定する方法として覚えておくと便利です!

Bootstrapの使い方【コンポーネント編】

次に、画面に使える部品(コンポーネント)について解説します。

※使い方の詳細をいきなりするのではなく、コンポーネントの種類をメインに解説しています。サンプルコードと実行画面を確認し、興味があるコンポーネントが見つかった場合は、詳細記事を覗いてみてくださいね!

ナビゲーションバー

まず、ナビゲーションバーについてです。WEB画面を作るときの画面の上部に表示するメニューのことです。WEBサービス・WEBアプリを作るときは使うケースがほとんどなので、使い方を覚えておくと便利です!

サンプルコード:

実行結果:

詳しい使い方は以下で解説しているので、ぜひ見てみてくださいね!

【Bootstrap】Navbarの使い方・カスタマイズ方法を徹底解説
更新日 : 2019年5月9日

フォーム

次は、フォームについてです。フォームは、データ登録・更新・検索などの機能を作るときに使います。

サンプルコード:

実行結果:

詳しい使い方は以下で解説しているので、ぜひ見てみてくださいね!

【Bootstrap超入門】フォームの種類・使い方について徹底解説!
更新日 : 2019年5月28日

ボタン

次は、ボタンについてです。ボタンは登録・更新・削除・検索…など、処理を動かすときに必ず使います。

サンプルコード:

実行結果:

詳しい使い方は以下で解説しているので、ぜひ見てみてくださいね!

【Bootstrap超入門】ボタンの種類・使い方について徹底解説!
更新日 : 2019年7月7日

テーブル

次は、テーブルについてです。データ一覧を表示するときに、よく使います。

サンプルコード:

実行結果:

詳しい使い方は以下で解説しているので、ぜひ見てみてくださいね!

BootstrapでTableを作る方法とは?オプションの使い方も徹底解説!!
更新日 : 2019年6月24日

アイコン

次は、アイコンについてです。画面の見やすさ・使いやすさを向上させるために、アイコンを使うと便利です。

サンプルコード:

実行結果:

Bootstrap4.X系だとそのままアイコンが使えないため、このサンプルでは「Font Awesome」という外部のアイコンを使っています。Bootstarp3.X系、Bootstrap4.X系でアイコンを使う方法については、以下で詳しく解説しています!

【Bootstrap入門】おしゃれな画面を作るためのアイコンの使い方とは?
更新日 : 2019年6月26日

モーダルウィンドウ

次は、モーダルウィンドウについてです。削除ボタンクリック時の確認メッセージ、画像のポップアップ表示などで使います。

サンプルコード:

実行結果:

このように、簡単にモーダルウィンドウを表示することができます。詳しい使い方は以下で解説しているので、ぜひ見てみてくださいね!

Bootstrapを使って簡単にモーダルウィンドウを作る方法とは?
更新日 : 2019年6月27日

Bootstrapの学習をさらに深めたい方へ

今までおすすめの記事をメインに紹介してきましたが・・・体系的な知識を学びたいときは、本で学習するのもおすすめです!Bootstrapの学習を加速させるためのおすすめ本を以下で徹底的にまとめているので、気になる方はみてみてくださいね!

【入門者必見】Bootstrapおすすめ学習本5選
更新日 : 2018年10月26日

【補足】Bootstrapで高速に画面を作る方法

ここまでBootstrapの概要・導入方法・使い方・おすすめの本などについて解説してきました。ただ、Bootstrapをもっと活用する方法が1つあります。それは、Bootstrapでできたテンプレートを使うことです。

テンプレートを使って画面を修正して完成形に近づけることで、ゼロから画面を作る手間をかけずにおしゃれな画面を作ることができます。Bootstrapの使い方が慣れてきたときに、使ってみるのがおすすめです!

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

CSSだけでは好条件の案件獲得が難しい..?

ここまではCSSのデザインテンプレートを紹介してきましたが、この記事をご覧の方の中には、CSSのスキルを身につけた先にフリーランスとして仕事を獲得したいと考えている人もいるのではないでしょうか?

WEBサイトの見栄えを決めるCSSですが、それ単体だけを習得するよりも、他の言語もセットで習得した方が圧倒的に好条件の案件を獲得しやすくなります。

CSSだけの案件は価格帯が低い事が多い

CSSを学ぶことで、もちろん出来ることは広がるのですが、実は仕事獲得という面で考えるとCSS単体だとなかなか厳しい面があります。なぜならCSSの案件自体は多いのですが、3〜5万ほどの低単価帯が多いのです。

また、大手アウトソーシングサイトのクラウドワークスでCSS案件を調べてみると…

XHTMLやCSS2.1だけでなく最新技術を学んでおく必要があります。
JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。
HTML・CSSコーディングを基本としながら、Webに関連する様々なプログラミング言語を習得しておく姿勢が重要になるでしょう。

引用元:クラウドワークス(一部抜粋)

といった記述もあります。つまりCSS単体の案件は意外と少なかったりするんですね。なのでやはり、JavaScriptなど他の言語にも触れておくと、仕事獲得のしやすさはもちろん、案件単価もグッと上がります。

だからこそ今CSSを学んでいる方で、更にその先に仕事獲得まで考えているのであれば、是非合わせてスキルを身に付けることをオススメ致します。

もちろん、一緒に学ぶオススメ言語はJavaScript以外にもたくさんあり、どの言語を学ぶといいか?はあなたの作りたい物によって変わります。

詳しく知りたい人は、是非プログラミング言語診断を利用してみてください。あなたにぴったりの言語を1分ほどで無料診断致します。

挫折せずにスキルを身につけたいなら

セットでスキルを身に付けることをオススメしましたが、

CSSだけでも大変なのに他の言語なんて..

と思ってしまう方もいることでしょう。確かに、CSSも極めようと思ったら非常に奥が深いので、まずそれを習得するだけでも大変です。そこに加えて他の言語を身に付けると考えると、かなり難しそうですよね。

そんなあなたは弊社「侍エンジニア塾」を利用してみてはいかがでしょうか?弊社では、

  • 現役エンジニアによるマンツーマンレッスン
  • 目的に合わせたあなた専用のオーダーメイドカリキュラム
  • 転職支援、フリーランスとしての独立支援

を徹底しているので、つまずく事なく学習を進める事ができます。もちろん、いきなり入会する必要はありません。まずは無料体験レッスンを利用して頂ければ、効率的な学習方法や今後のキャリアプランなどをご提案致します。

下記ボタンより1分ほどで予約が可能となっているので、まずはお気軽にご相談ください。無料体験はオンラインでも受け付けております。

無料体験レッスンの
予約はこちら

まとめ

今回は、Bootstrapの概要・導入方法・使い方などについて徹底的にまとめました。Bootstrapを使えば、スマホ対応(レスポンシブ)済みのおしゃれな画面を簡単に作ることができます。

Bootstrapだけでも綺麗な画面は作れますし、機能を作る前段階のモック画面や、オリジナルデザインをつくる前の画面の基盤としても使えます。Web開発の基礎体力の1つとしてとても大事な技術なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

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

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

おすすめコンテンツ

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

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