【入門】Bootstrapの書き方  〜Bootstrapとは〜

【入門】Bootstrapの書き方  〜Bootstrapとは〜

みなさんこんにちは さくちゃん です。

本日から「Bootstrap」について学んでいきたいと思います。
初心者の方でもわかりやすく解説していきますので、頑張っていきましょう。
最終的には、簡単なレスポンシブサイトができるように解説していきます。

今回は、「Bootstrapの概要」について解説していきます。
では早速やっていきましょう!

Bootstrapの書き方  〜Bootstrapとは〜

Bootstrapとは?

まずはBootstrapについて解説していきます。
Wiki先生では、Bootstrapはこのように説明されています。

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。

https://ja.wikipedia.org/wiki/Bootstrap

本来、HTMLやCSS、JavaScriptを使って作成するフォームやナビゲーション(Menu)などが、
HTMLコードを書いただけで、簡単に作成できるというわけなんです。

あらかじめBootstrap側でデザインテンプレートが用意されており、決められたコードを入力すると、そのデザインテンプレートを読み込むことができます。

また、レスポンシブデザインにも簡単に対応することができます。
これがBootstrapです。

Bootstrapは、CSSをより使いやすくしたものなので、CSSの知識が必要となります。
CSSについては、こちらをご覧ください。

公式サイトの確認

Bootstrapの公式サイトはこちらになります。
公式サイトには、様々なデザインテンプレートが書いてあります。

Documentationタブをクリックすると、左サイドバーに様々なテンプレートがあります。
始めのうちはここから参照して、コードを書いていくといいと思います。

全て英語で書かれているため、読みにくいかと思いますが、Google翻訳などを使い、覚えていきましょう!

実際にコードを書いてみよう!

では実際にコードを書いてみましょう!

まずはindex.htmlファイルを作成します。
自分が好きなエディタで構いませんので、index.htmlファイルを作成して下さい。

※ここでは、Visual Studio Codeを使用します。

ファイルが作成できたら、実際にコードを書いていきます。

必要な要素を追加しよう

Bootstrapを使用するには、様々な要素<head>タグなどに書いていかなければなりません。
しかし公式サイトでは、あらかじめ「Starter template」というものが用意されています。
今回はそちらを使っていきましょう。

作成したindex.htmlファイルに「Starter template」を貼り付けます。
どうするのかというと

① HOMEの「Get started」をクリック
もしくは「Documentation」タブをクリック

「Get started」をクリックすると、「Documentation」に移動しますので、その中の


「Starter template」の赤で囲まれた部分をコピーしエディタに貼り付けます。

③ 貼り付けるとこのようになります。

④ 「Starter template」を貼り付けたら、<html lang=”en”> を <html lang=”ja”> に変更します。

変更できたら、一度ブラウザで確認してみます。
Visual Studio Codeの場合であれば
赤枠のindex.htmlタブをドラッグ&ドロップで、右のブラウザのタブまで持っていきます。

持ってきたら、そこで離します。
ここで「Hello,World!」と表示されたら、OKです!

Bootstrapを書いてみよう

では、実際にBootstrapを書いてみましょう。

今回は、今表示されている「Hello,World!」の文字色を変えてみましょう。
どう変えるかというと
<h1>タグに、class名で「text-primary」と書いてあげるだけです。

<!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 class="text-primary"> 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>

こうすると、「Hello,World!」が青色に変わるかと思います。

今回は青色にしましたが、青色以外の色も指定することができます。

「Documentationタブ」をクリック →  左サイドバーの「utilities」をクリック →左サイドバーの「colors」をクリック

で様々な色の指定ができます。詳しくはこちら

本来CSSの場合だと、HTML、CSSにコードを書いていき、色を変更するのですが、
Bootstrapを使用することで、簡単に効率よく色を変更することができます。

今回は以上になります。次回この続きをやっていきます!