【Bootstrapの使い方】優しくて分かりやすい解説！

Bootstrapって聞いたことがあるけど、どうやって使うんだろう？

記事の内容

Bootstrap（ブートストラップ）の使い方の解説

Bootstrapの使い方をプログラミング初心者の人でも分かるように書きました！

こんにちは！Yutaです！

皆さんはBootstrap（ブートストラップ）をご存知ですか？Bootstrapを使えば、Webサイトのデザインが、とても簡単になります！少しのコードで、おしゃれなデザインのページを作れちゃうんです。

では早速、解説をしていきましょう！

Bootstrapとは？
Bootstrapの使い方
- BootstrapをCDNを用いて組み込む
【まとめ】

Bootstrapとは？

そもそもBootstrapとは何かを説明します。

簡単に説明をしてみると、

HTMLファイルに記述するだけで、用意されたカラーやデザインのヘッダーや、ボタンなどを配置することが出来るCSSのフレームワーク

です。

つまりBootstrapを使えば、

HTMLに記述をするだけで、用意されているオシャレなヘッダーやボタンを配置することができるのです。

＊他にも、グリッドシステムなど、短時間でレスポンシブ対応のページを作成できるという特徴があるのですが、それらの紹介は今回の記事では省略することにします。

Bootstrapの使い方

使い方は大きく２種類あります。

ソースファイルをダウンロードして組み込む方法
CDNを用いて組み込む方法

があります。

今回は、簡単な２番のCDNを用いて組み込む方法を紹介しようと思います。

BootstrapをCDNを用いて組み込む

下に貼ったリンクでは、BootstrapのCDNによる組み込み方を紹介しています。

＊BootstrapのCDNによる組み込み方の紹介ページ

上のリンク先には、下のようなテンプレートが用意されています。

<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.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>
  </body>
</html>

＊２行目の言語設定は元々、”en” つまり、Englishになっていましたが、”ja”つまり、Japaneseに変更をしておきました。主に日本語を使う場合は、日本語設定にしておきましょう。

上のコードを全て、HTMLファイルにコピーペーストしてみましょう。

これで、準備万端です。

あとは、Bootstrapで使える記述を<body>タグの中にしていけば、簡単にページデザインを作ることができます。

ボタンのデザインが集まったページをリンクで用意したので、リンク先から好きなボタンのコードを貼り付けてみて試してください。

＊ボタンのデザインの紹介ページ

例えば

<button type=”button” class=”btn btn-primary”>Primary</button>

こんな感じのコードを書いてみてください。すると、Bootsrapで用意されていたボタンが表示されるはずです。

他にも様々なデザインが用意されているので、試してみてくださいね