Bootstrapの特徴？使用するメリットとは？
実際にBootstrapを少し使用してみた感想としては、（前提条件：ある程度HTML、CSSの知識がある前提で）
・WordPress並みに便利
・記述の仕方によっては、メンテナンス性と可読性が良くなり、CSSの記述量が減る
とにかく便利！使える部分は使い倒していきたいなと思いました。
学習用に参考にさせて頂きます。
たにぐち先生（やはり動画、めっちゃわかりやすいのでオススメです）
https://www.youtube.com/playlist?list=PLh6V6_7fbbo9sHm8E3F7lZuDDxDJkheKD
Bootstrap公式
https://getbootstrap.com/docs/4.4/getting-started/introduction/
fontawesome（アイコン用）
https://fontawesome.com/
学習の目的
・Bootstrapの使い方を知りたい
・Bootstrapの使いどころを学習したい
・Bootstrapを使用するにあたってメンテナンス性を重要視した場合どうコーディングしていくか
・Bootstrapをメインに使用した場合に、どのような発見があるのか
Bootstrapを使用する方法
複数あるんですが、手っ取り早いやり方があります。
BootstrapCDN（Bootstrapコンテンツデリバリーネットワーク）を使用することです。
具体的には、
https://getbootstrap.com/docs/4.4/getting-started/introduction/
に載ってるCSSと書かれた箇所の下にある
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
をheadの中にコピペするだけです。これで、Bootstrapが使えるようになります。
（上記をそのままコピってもOKです）
それと、HTML&CSSだけだと、ダサいのでJavascriptさんの力を少し借りておしゃれにしていきます。
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
っと、あとfontawesomeという、アイコンが使用できるものがあるので、そちらも載せておきます。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
これで準備OKです。
WEBサイトの構造を考える
共通項目
・スマホサイズの際は、構造を変えてスマホ最適化表示させる。いわゆるモバイルフレンドリーにする。
→ここにこだわりたい。これがグリッドシステムの醍醐味だと思っている。
ヘッダー
・サイトアイコン
・横並びで項目を並べる
カルーセルスライド
・写真を挿入してカルーセル表示
→ちょっとおしゃれにしたいだけ・・・・
https://getbootstrap.com/docs/4.4/components/carousel/
ここからもってきました。
headにBootstrapのCDN設置しないと動きません（上記に記載しています）
メインコンテンツ
・写真とコメントを並べる
・3項目並んだら、改行されるようにする
WEBサイト構築、コーディングしていきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<style>
.container{
padding-right: 0px;
padding-left:0px;
margin: 0px;
}
.row{
margin-right: 0px;
margin-left: 0px;
}
.fa-bitcoin{
font-size: xx-large;
}
.d-block{
height: 50vh;
}
li{
list-style: none;
}
ol{
padding: 0;
}
a:hover
{text-decoration:none;}
</style>
</head>
<body>
<div class="container col-12 border-bottom">
<div class = "row p-4 text-center border-bottom" style = "background-color:#eee;">
<div class = "row col-12">
<div class = "col-1-md offset-1 justify-content-center d-flex align-items-center text-nowrap">
<a href="#" class = "p-2"><i class="fab fa-bitcoin"></i></a></div>
<div class = "col-5 offset-1 justify-content-center d-flex align-items-center" style = "font-size: 1.85rem;">
Bootstrap</div>
<button type="button" class="col-1-md p-1 m-1 btn btn-primary text-nowrap">新規登録</button>
<button type="button" class="col-1-md p-1 m-1 btn btn-secondary text-nowrap">ログイン</button>
</div>
<div class = "row col-12 justify-content-center col-12 mt-2 ">
<div class = "col-md p-2 border"><a href="#">基本編</a></div>
<div class = "col-md p-2 border"><a href="#">応用編</a></div>
<div class = "col-md p-2 border"><a href="#">番外編</a></div>
<div class = "col-md p-2 border text-nowrap"><a href="#">グリッドシステム編</a></div>
<div class = "col-md p-2 border"><a href="#">質問コーナー</a></div>
<div class = "col-md p-2 border"><a href="#">お問い合わせ</a></div>
</div>
</div>
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="/Users/rontarou/Desktop/画像/gladiolus-sword-flower.jpg" class="d-block w-100" alt="花の画像1">
</div>
<div class="carousel-item" data-interval="2000">
<img src="/Users/rontarou/Desktop/画像/crocus-flowers.jpg" class="d-block w-100" alt="花の画像2">
</div>
<div class="carousel-item">
<img src="/Users/rontarou/Desktop/画像/crocus-spring-flowers.jpg" class="d-block w-100" alt="花の画像3">
</div>
</div>
<a class="carousel-control-prev" href="#" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class = "row col-12 text-center justify-content-center mt-3 background-color:grey">
<div class = "col-sm-4 p-1 main-image">
<img src="/Users/rontarou/Desktop/画像/baby194983745.jpeg" alt="赤ちゃん画像" class="col-12 rounded-circle">
<div class = "col">赤ちゃんの画像①</div>
</div>
<div class = "col-sm-4 p-1 main-image">
<img src="/Users/rontarou/Desktop/画像/baby194983745.jpeg" alt="赤ちゃん画像" class="col-12 rounded-circle">
<div class = "col">赤ちゃんの画像②</div>
</div>
<div class = "col-sm-4 p-1 main-image">
<img src="/Users/rontarou/Desktop/画像/baby194983745.jpeg" alt="赤ちゃん画像" class="col-12 rounded-circle">
<div class = "col">赤ちゃんの画像③</div>
</div>
<div class = "col-sm-4 p-1 main-image">
<img src="/Users/rontarou/Desktop/画像/baby194983745.jpeg" alt="赤ちゃん画像" class="col-12 rounded-circle">
<div class = "col">赤ちゃんの画像④</div>
</div>
<div class = "col-sm-4 p-1 main-image">
<img src="/Users/rontarou/Desktop/画像/baby194983745.jpeg" alt="赤ちゃん画像" class="col-12 rounded-circle">
<div class = "col">赤ちゃんの画像⑤</div>
</div>
<div class = "col-sm-4 p-1 main-image">
<img src="/Users/rontarou/Desktop/画像/baby194983745.jpeg" alt="赤ちゃん画像" class="col-12 rounded-circle">
<div class = "color">赤ちゃんの画像⑥</div>
</div>
</div>
<div class = "footer row col-12 mt-3 pb-4 justify-content-center" style = "background-color:rgb(69,75,86);">
<div class = "left-footer col-sm-3 p-2 m-1" style = "color:white;">
<ol class = "company justify-content-right" style = "font-size: 25px;"><a href="#" class = "" style = "color:white">会社概要</a></ol>
<li class = "company_text">代表挨拶</li>
<li class = "company_text">社員紹介</li>
<li class = "company_text">お知らせ</li>
<li class = "company_text">IR情報</li>
</div>
<div class = "center-footer col-sm-3 p-2 m-1" style = "color:white;">
<ol class = "work justify-content-left" style = "font-size: 25px;"><a href="#" class = "" style = "color:white">事業内容</a></ol>
<li class = "work_text">取り組み</li>
<li class = "work_text">数字でみる◯◯</li>
<li class = "work_text">今後の取り組み</li>
</div>
<div class = "right-footer col-sm-3 p-2 m-1" style = "color:white;">
<ol class = "service" style = "font-size: 25px;"><a href="#" class = "" style = "color:white">サービス・コンテンツ</a></ol>
<li>メインコンテンツ</li>
<li>リリース済みサービス一覧</li>
<li>アップデート情報</li>
<li>最新情報</li>
</div>
</div>
</div>
</div>
</body>
</html>
出来ました。
（※もし、コピペでローカル環境でお試しされる場合、<img src・・・・・の先にある画像ファイルだけ差し替えてください。）
画像で完成したWEBサイトをみるとこんな感じ
（画像は著作権フリーをもってきました）
PC表示の場合
スマホ表示に切り替えるとこんな感じ
Bootstrapを使用した感想
・細かいところ調整出来るのでwordPressより便利かも
・モバイルフレンドリー（スマホ最適化）が簡単にできるのでなんといっても便利
・モバイルフレンドリーを勉強するならBootstraから入ると理解が速いかもしれないと思った
・row使うと今まで面倒だった、横並びが簡単にできる（rowとcolの合わせ技でモバイルフレンドリーができる）
・大きなサイトになった場合、メンテナンス性を重要視するとなると、共通項目はCSSで書いたほうがいいと思った
・モダンなサイトを作るのにめっちゃ良いと思った（Javascriptも極めたら最強）。もっと学習しよう。
疑問点
・果たしてBootstrapを最適に使えてただろうか？
・他の人からみた際はおかしい点はなかっただろうか？
・クラス名にw-100といれると、width = 100% になるが、importantがついてるので使用するのは注意が必要？！
→知識不足なので使用する際は要注意かもしれないと思いました（追記.2020/02/01↓）
※たにぐち先生より助言いただき、rowが記載された部分のw-100を削除しました。問題なく動きます。
rowが記載されている部分はwidthが100%になるみたいですね。あわせて、コードも書き直しました。
・Bootstrapって重くならないのかな？ 大量にCSSを読み込むため重くなるという記事をみかけたことがあったため
以上となります。
ここは違う、ここはこうしたほうがセンス良い等々ございましたら、ご指摘いただけますと幸いです。
最後までみていただき、ありがとうございました。