プログラミング初心者の方は簡単なwebページを作る際に「HTMLでサイトの枠組みを作り→CSSで配置や見た目を綺麗に整える」かと思いますが、なかなか思う様なカッコいいサイトができなかったり、もっとコーディングを早くしたいと思いませんか？
僕も0からコーディングしてみたけど、カッコいいサイトが作れず3日もかかっちゃったよ〜！
そんな時はBootstrapを使って爆速でカッコいいサイトを作りましょう！
Bootstrapって何！？早く教えて！！
今回ご紹介するBootstrapというCSSのフレームワークを使うと、早くコーディングができて、カッコいいサイトが直ぐにできる、さらにレスポンシブデザインも一気にできてしまうという、プログラミングには欠かせないものです！
✔︎こんな方にオススメ
- Bootstrapとは何か知らない方
- Bootstrapの使い方を知りたい方
- 効率よく、カッコいい、レスポンシブなサイトを作りたい方
- HTML,CSSの学習をある程度している方
Bootstrapとはそもそも何なのか、初心者でも分かるようにダウンロードから使い方、よく使う便利なテンプレートまで、この記事でBootstrapの基礎が分かる様になります！
（※HTML,CSSの基礎学習を終えた人向けの内容となっています）
そもそもBootstrapとは？
Bootstrap（読み方：ブートストラップ）はTwitter社が開発したCSSのフレームワークです。フレームワークとは簡単にいうとその言語をより使いやすく便利にしたものです。
フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
ferret（https://ferret-plus.com/996）
Bootstrapを使うと効率よくCSSがコーディングできるってことだね！
Bootstrapを使って作られた有名なサイトを一つあげるとAirbnbがあげられます。
Bootstrapを使うメリット・デメリット
- HTMLタグにBootstrap（CSS）を書くことができる
- 効率よくコーディングができる
- 簡単にカッコいいページができる
- レスポンシブデザインに対応している
- ネット上にテンプレートが沢山ある（コピペでOK）
メリットをざっくりと上げるとこんな感じです、HTML,CSSでサイトを作る際は良いことしかないので、ぜひマスターして使いこなせる様になることをオススメします！
良いことしかありませんが、一つデメリットを上げるとすると、便利すぎてBootstrapを使っているユーザーがかなり多いのでデザインが被ってしまい独自性の高いサイトは作りにくいと言った点です。
このことを業界では「Bootstrap臭のするサイト」と言います。
Bootstrapの使い方【準備編】
フレームワークって使うのなんだかファイルインストールしたりなんだか難しそう。。。
以下のコードを自分のエディタにコピーするだけで直ぐに使えます！
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>このコードを<head>ここにコピペ</head>の中にコピペして下さい。
たったのこれだけで Bootstrapが使える様になります！
Bootstrap公式サイトの使い方
もう少し使い方の手順を詳しく知りたい方のために、公式サイトの使い方を解説します。
Bootstrap公式サイトにアクセスします。
公式サイトにアクセスするとこの画面になるので、Get startedを選択。
するとこの画面に飛ぶので、CSSのコードとJSのコードをコピーして、自分のエディタの<head>タグの間に貼り付けます。
下にスクロールすると、Starter templateがあるのでこれを丸々エディタにコピーすると、<head>や<body>タグを書く手間が省けます。
Bootstrapの書き方
Bootstrapの書き方はとてもシンプルで、
<a class="btn btn-primary" href="https://www.hikopro.com">HOME</a>この様にclassの中に基本的に書きます。すると、、、
HOMEこの様にカッコいいボタンが直ぐにできてしまいます！
このclassの中に書いてあるbtn btn-primaryなどがBootstrap独自のコードとなります。
他にも沢山テンプレートコードがあり全てBootstrap公式サイトから見ることができます。
左のナビゲーションバーにComponentsという項目があるのでクリックします。
すると下にAlert,Badge,Buttons,Navbar…など様々な項目があるので、実装したい機能をクリックします。
すると完成形とそのソースコードがあるので、そのままコピーすればそのまま使えます！
CSSで書くとかなり手間のかかるCard型や、Jsの知識がないと実装できないToastsやドロップダウンメニューもコピペで簡単に実装できちゃいます！
こんな簡単に複雑な機能が実装できちゃうんだ！もっと早く知りたかった。。
Bootstrapで作られたサイト例
沢山あるBootstrapのコードをうまく組み合わせるとCSSを使わずとも簡単にこんなカッコいいお問い合わせフォームが作れてしまいます！
このページCSS使うと結構大変だよ〜！
Bootstrapを使うとたったのこれだけで実装できます！
<body class="text-center">
<form class="form-signin">
<img class="mb-4" src="/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2019</p>
</form>
</body>入門 Bootstrap 使い方まとめ
いかがでしたでしょうか！
Bootstrapを使えば早くコーディングできるだけでなく、シンプルでカッコいいサイトも簡単に作れてしまいます！
初めの内は公式サイトや紹介ブログを見ながら実装していますが、慣れてくると覚えてきて直感的にコーディングできる様になるのでさらに効率よくサイトを作ることができます！
ぜひこの記事を参考に脱Bootstrap初心者になってください！
最後までご覧いただきありがとうございました！
