html,css

【CSS】Bootstrapによるレスポンシブ設定

更新日:

そもそもBootstrapとは

BootstrapとはWebフレームワークである。
予めデザインのテンプレートを外部に用意しておくことで、Webページを作成する際、それを読み込むだけで既存のデザインテンプレートを利用することができる。

Bootstrapの導入

1.ソースのhead内にmetaタグでViewportを記載し、実機の画面幅を取得する。
2.head内にBootstrapのリンクを貼り、cssを読み込む。
3.body内の最下段にBootstrapを使用するためのスクリプトを記載する。

具体的には下記のようになる。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>タイトル</title>
  </head>
  <body>
  <!--本文を記載する-->
    <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>

Bootstrapによるレスポンシブ設定

Bootstrapにおいては、画面はグリッドと呼ばれる単位で区切られているものとされる。
方眼紙のマス目のようなものを想像すると良い。
マス目が横に12マスあるものとし、同じ行内のdivはその12マスを分け合う形で横並びに表示できる。
これによって、画面幅が変わってもそれぞれのdivの表示幅の割合を一定に保つことができる。
(最低限の幅がなくなれば縦に積まれるようになる)
それぞれのdivがいくつ分のグリッドを占めるかは、class="col-sm-2"などで下記のように指定する。

<div class="col-sm-2" style="border: solid; margin: 2px">
  <h2>グリッド2マス占拠</h2>
</div>
<div class="col-sm-4" style="border: solid; margin: 2px">
  <h2>グリッド4マス占拠</h2>
</div>
<div class="col-sm-5" style="border: solid; margin: 2px">
  <h2>グリッド5マス占拠</h2>
</div>

表示画面は下図のようになる。

(12マスの内合計11マスを占めているので、右端に1マス分隙間がある。)

このようにして、Bootstrapのグリッドを利用すれば簡単にレスポンシブを設定できる。

-html,css

Copyright© Code Custom , 2022 All Rights Reserved.