【意外と簡単】Bootstrapの使い方を紹介！

Bootstrapってどんな時に使えばいいの？
実務でもよく使うものは何なんだろう。

Bootstrapは知ってるけれど使いどころがよく分かっていない人はぜひ最後まで読んでみてください。

わたしもBootstrapを使い始めた頃、どこに何を使えばいいのか分からなくて本当に苦戦したので(^_^;)

note記事

Bootstrapに苦戦してる話

わざわざnoteのアカウントを作ってこんな記事を書くくらい分かっていませんでしたw

「まじでHTMLとCSSだけでよくね？」と思ってたし、「逆に使うとスピード下がるんだけど！」とも思ってました。

でも今ではBootstrapのおかげで楽にコーディングができるようになったので感謝しながら使っています。

それでも実務で使うものは限られているので、使いどころと併せてよく使うものも紹介しますね！

本記事の内容

Bootstrapを使うメリット
- レスポンシブ対応が楽！
- CSSの記述量が少なくなる
Bootstrapはこんな時に使うと便利！
Bootstrapを使うときのコツ
Bootstrapの勉強法
- 本
- Udemy

Bootstrapを使うメリット

レスポンシブ対応が楽！

画面幅に合わせて３カラム→１カラムに変更できます。

HTMLのclass名を書くところに「col-4」などと記述するだけで３カラムのものが作れます。

cssに細かく横幅を設定しなくていいので、作業時間をかなり短縮できます！

CSSの記述量が少なくなる

Bootstrapを読み込んでおけば、そのBootstrapに様々なcss要素が入っているので自分でわざわざCSSに記述する必要がないんです。

（例）PCでは３カラムのところを、スマホでは１カラムしたい時

作業時間は10秒
cssへの記述は０

これくらい楽にできちゃいます\(^o^)/

Bootstrapはこんな時に使うと便利！

カラムを画面幅にあわせて変更したい

よくあるデザインですよね。

こんな時こそ「Bootstrap」の出番です！

<div class="container">
  <div class="row">
    <div class="col-md-4">
      sample
    </div>
    <div class="col-md-4">
      sample
    </div>
    <div class="col-md-4">
      sample
    </div>
  </div>
</div>

container > row > col-md-4 (ここは自由)

この順番で書けばできますよ！

実際に自分のHTMLに書いてみてください。

分かりやすいように背景色を付けてみるのもいいですね！

私は<div>グループごとに色分けをして体験して覚えてました。

「col-md」とか「col」のくわしい使い方はグリッドシステムというものを勉強すれば分かります。

「Bootstrap　グリッドシステム」、「Bootstrap　col　使い方」

なんかで色々とググってみてください。

グリッドシステムの考え方

ここだけmargin・paddingを変更したい

実案件をやっていて分かったのですが、デザインによっては

この<p>のとこだけmarginを０にしたい！

この<div>のとこだけpaddingを０にしたい！

などのように「ここだけ変えたい！」って部分が出てくるんですよ。

「新しいクラス名付けるまでもないようなところ」にね。

そういう時に使えるのが「m-0」「p-0」です！

<div class="m-0">
  <p>ここだけmarginを０にしたい！</p>
</div>
<div class="p-0">
  <p>ここに要素が入っています</p>
  <p>この要素を囲んでいる<div>のpaddingを０にしたい！</p>
</div>

m-0 = margin: 0;
p-0 = padding: 0;

いちいち新たなクラス名を付けるまでもないところに使えます！

頭文字を書いているだけなので、

「margin-bottom: 0;にしたいならmb-0」、「padding-top: 0;にしたいならpt-0」でOKです。

詳しくは公式の記事をみてください！

Spacing-Bootstrap[公式]

ここだけ行揃えを変更したい

「この行だけ中央揃えにしたいなぁ〜」

「この見出しだけ左揃えにしたいなぁ〜」

って時、ありますよね？このコードを書いてみてください。

<p class="text-left">左揃えになるよ</p>
<p class="text-center">中央揃えになるよ</p>
<p class="text-right">右揃えになるよ</p>

text-left = text-align: left;
text-center = text-align: center;
text-right = text-align: right;

cssの書き方となんか似てるので覚えやすいですね！

こちらもBootstrapの公式ページを載せておきます。

Text-Bootstrap[公式]

Bootstrapを使うときのコツ

CDNで読みこむのが良い

ダウンロードしなくても、HTMLに決まったコードを書けばBootstrapが反映するようになります。

サンプル

<!doctype html>
<html lang="en">
  <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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

難しく見えますが、<head>内に１つ、</body>の直前に３つ書けばOKです。

Bootstrap始め方[公式]