HC-2. Bootstrap

Bootstrapを理解しておこう！

BootstrapはHTML／CSS／JavaScriptから構成される最も有名なWEBフレームワークです。https://getbootstrap.jp/

WEBページでよく使われるフォーム、ボタン、メニューなどの部品がテンプレートとして用意されています。

デザイン性も確保されているため、WEBページのスタイルも最低限の調整で済みます。

Bootstrapを使うかは、細かいデザインのカスタマイズと、開発効率のどちらを重視するかによってい使っていくかを決めていきましょう。

Bootstrapを使ってみよう！

スターターテンプレートのcopyボタンから以下のような内容を貼り付けます。

作成してどのように表示されるか確認してみてください。

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

<!doctype html>

<head>

<title>Hello, world!</title>

</head>

<body>

<h1>Hello, world!</h1>

<!--

-->

</body>

</html>

以下のように、必要な箇所を編集してください。

<!doctype html>
<html lang="ja"><!-- ⬅変更箇所 -->
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>tecUP サンプル</title><!-- ⬅適切に変更 -->
  </head>
  <body>


　　<!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

<!doctype html>

<head>

<title>tecUP サンプル</title>

</head>

<body>

</body>

</html>

containerを知っておこう！

コンテナとは画面内のコンテンツの収まる範囲を設定するブロックで、コンテンツを一定の範囲内で整列させる役割を持ちます。

container 参照

作成してどのように表示されるか確認してみてください。

  <body>
    <div class="container bg-primary">
      コンテナとは画面内のコンテンツの収まる範囲を設定するブロックで、 
      コンテンツを一定の範囲内で整列させる役割を持ちます。簡単に言うと、
      「表示エリア」を決めるものです。これを決めることで、
      -整った見やすいサイト
      -ルールがあることで追加要素に対応しやすい
      -管理しやすい コーディング
      に、することができます。
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>

<body>

コンテナとは画面内のコンテンツの収まる範囲を設定するブロックで、

コンテンツを一定の範囲内で整列させる役割を持ちます。簡単に言うと、

「表示エリア」を決めるものです。これを決めることで、

-整った見やすいサイト

-ルールがあることで追加要素に対応しやすい

-管理しやすいコーディング

に、することができます。

</div>

</body>

実行結果

上記表示結果：bootstarp

Grid systemを知っておこう！

グリッドシステムは、12分割したカラムのシステムと 5 （横に）段階のレスポンシブ、Sass と mixin、いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能です。Bootstrapグリッド参照

作成してどのように表示されるか確認してみてください。

    <div class="container">
      <!-- 2列　≥992px超えると5列にする .5remのグリッド　拡大時1rem-->
      <div class="row row-cols-2 row-cols-lg-5 g-1 g-lg-3">
　　　　<!--　col コンテンツ指定-->
        <div class="col">
          <!--padding 3rem枠ついた、ライト色 -->
          <div class="p-3 border bg-light">Row column</div>
        </div>
        <div class="col">
          <div class="p-3 border bg-light">Row column</div>
        </div>
        <div class="col">
          <div class="p-3 border bg-light">Row column</div>
        </div>
        <div class="col">
          <div class="p-3 border bg-light">Row column</div>
        </div>
        <div class="col">
          <div class="p-3 border bg-light">Row column</div>
        </div>
        <div class="col">
          <div class="p-3 border bg-light">Row column</div>
        </div>
        <div class="col">
          <div class="p-3 border bg-light">Row column</div>
        </div>
        <div class="col">
          <div class="p-3 border bg-light">Row column</div>
        </div>
        <div class="col">
          <div class="p-3 border bg-light">Row column</div>
        </div>
        <div class="col">
          <div class="p-3 border bg-light">Row column</div>
        </div>
      </div>
    </div>