Web制作のアレコレ

Bootstrapその①

Bootstrapとは

Bootstrapは、WEBサイトやWEBページを効率よく開発するためのWEBフレームワークです。
※「フレームワーク」という言葉には元来、「枠組み」という意味があります。開発を行う際に、頻繁に必要とされる基礎的な機能をまとめて提供してくれるものです。

そのため、枠組みを使って作業(プログラミング)をするのがフレームワークになります。
HTML・CSS・JavaScriptから構成される、最も有名なWEBフレームワークですね。WEBページでよく使われるフォーム・ボタン・メニューなどの部品がテンプレートとして用意されています。

また、レスポンシブ対応がされているため、Bootstrapを使うだけでパソコン、iPad、スマホなど画面サイズに自動対応した画面を作ることができます。

Bootstrapを使うための準備

Bootstrapを使用するためにはHTMLに必要なファイルを読み込む必要があります
これらを含んだひな型はあらかじめ用意されているものをコピペすると一番だと思います
公式サイトの「Documentation」をクリックすると使い方が英語で紹介されていますのでここを参考にするのが一番だと思います
ページの中ほどにある「starter template」の下に表示されているひな形を新しく作ったHTMLファイルにコピペして使います
lang属性などは適宜書き換えていただきたい
URL:https://getbootstrap.com/docs/4.3/getting-started/introduction/

一応コード

HTML


<!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>

これだけでBootstrapを使うための準備は完了です

グリッドレイアウト

グリッドレイアウトとは、レイアウトを格子状に分解して配置するデザイン手法
Bootstrapでは横幅を12分割したグリッドシステムを採用しています

基本原則

あくまでも原則であり、これとは違った形で指定することもありますが、大枠はこのようなルールに則って記述します。

class = “container”(固定枠)または”container-fluid”(流動枠)を大枠にするために指定
class = “row”は行を囲む場合につける
class = “col-{prefix}-{columns}”の形でコンテンツの幅などを指定
class = {columns}は.rowの中で合計が12になるようにする

例えばこんなコードを書いてみると

HTML


<div class="container-fluid">
  <div class="row">
    <div class="col-6">12分割の6個分</div>
    <div class="col-6">12分割の6個分</div>
  </div>
</div>

sampleサイト

sample 1
.rowの中のdiv要素が半分それぞれ12分割の6個分の幅を持ち横並びになります
このようにBootstrapではclass属性を使い、レイアウトをしていきます
もちろん自分のCSSファイルを作り上書きすることで細かい指定も可能になります

container系のclass属性

container クラスは、「幅に応じたデバイス判定」と連動しており、デバイスに応じて適切な枠の幅をつくり、左右にマージンを作り出します。

HTML


<div class="container">
  <div class="row">
    <div class="col-4">12分割の4個分</div>
    <div class="col-4">12分割の4個分</div>
    <div class="col-4">12分割の4個分</div>
  </div>
</div>

sample

sample 2
大枠にclass属性「container」を付けると両端に隙間が作られる

コンテナを画面幅全体に広げたい場合は .container-fluid を使用

HTML


<div class="container-fluid">
  <div class="row">
    <div class="col-4">12分割の4個分</div>
    <div class="col-4">12分割の4個分</div>
    <div class="col-4">12分割の4個分</div>
  </div>
</div>

sample

sample 3
大枠にclass属性「container-fluid」を付けると両端の隙間がなくなり画面幅いっぱいに広がる

class属性「row」

rowは単純に要素の中の行を指定するためのclass属性です
.rowの中にコンテンツを入れていきます
忘れやすそうですが忘れないようにしましょう
※tr要素と考え方は同じ

colから始まるコンテンツ用のclass属性

上でも紹介している通り、「col-{prefix}-{columns}」の形でコンテンツの大きさを指定していきます
最初に書いてある「col-」は固定
prefixは表示を切り替えるブレイクポイント的なもの(省略可能)
columsは12分割に分けられたカラムのうち何カラム分の領域を持つか
の指定になります

prefix

5種類の画面環境ごとにスタイルを切り替える設定になります。
あらかじめ用意さえたキーワードを使って指定します
prefixを指定したサイズより画面幅が小さい場合カラム数の指定が無効になります

prefix 切り替え画面サイズ
sm 576px以上の場合の指定
md 768px以上の場合の指定
lg 960px以上の場合の指定
xl 1140px以上の場合の指定
prefix無し どんな画面幅でもカラム数は変わらない
HTML


<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">12分割の4個分 576pxより画面幅が小さいときはいっぱいに広がる</div>
    <div class="col-sm-4">12分割の4個分 576pxより画面幅が小さいときはいっぱいに広がる</div>
    <div class="col-sm-4">12分割の4個分 576pxより画面幅が小さいときはいっぱいに広がる</div>
  </div>
</div>

sample

sample 4
上記のコードだと576px以上の画面幅の場合はコンテンツが3分割
576pxよりも狭い場合はコンテンツがいっぱいに広がりたて並びになる

「col-sm-4」576pxより画面幅が大きい場合は4個分の幅という指定になる

HTML


<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 col-6">12分割の4個分 576pxより画面幅が小さいときは6個分</div>
    <div class="col-sm-4 col-6">12分割の4個分 576pxより画面幅が小さいときは6個分</div>
    <div class="col-sm-4 col-12">12分割の4個分 576pxより画面幅が小さいときは12個分</div>
  </div>
</div>

sample

sample 5
このように二つ指定すると制御しやすい
「col-sm-4」576pxより画面幅が大きい場合は4個分の幅という指定
それ以外はそれぞれ6個分と12個分という指定になる

columns

prefixの指定に応じて表示が変わりますが、基本はカラムの合計は12になるように指定するのですが、12より多かったり少なかったりする場合も表示はできるので、その場合の挙動についても挙げておきます。

カラム数の合計が12の場合は問題なし

HTML


<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">col-sm-6</div>
    <div class="col-sm-6">col-sm-6</div>
  </div>
  <div class="row">
    <div class="col-sm-4">col-sm-4</div>
    <div class="col-sm-4">col-sm-4</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-3">col-sm-3</div>
  </div>
</div>

sample

sample 6
上記コードを使って表示するとこのように表示されます
行ごとの合計カラム数は12なので問題なく表示されます

カラム数の合計が12よりも少ない場合は単純に左詰めで表示されます

HTML


<div class="container-fluid">
  <div class="row">
    <div class="col-sm-5">col-sm-5</div>
    <div class="col-sm-3">col-sm-3</div>
  </div>
  <div class="row">
    <div class="col-sm-2">col-sm-2</div>
    <div class="col-sm-2">col-sm-2</div>
    <div class="col-sm-2">col-sm-2</div>
  </div>
  <div class="row">
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
  </div>
</div>

sample

sample 7
上記コードを使って表示するとこのように表示されます
行ごとの合計カラム数は12より小さいので左に寄った状態で表示されます

逆に合計カラム数が12より大きいと収まりきらなかったものがカラム落ちする形で表示されます
大幅なレイアウト崩壊には結び付きませんが、気を付けたいところ

HTML


<div class="container-fluid">
  <div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-7">col-sm-7</div>
  </div>
  <div class="row">
    <div class="col-sm-5">col-sm-5</div>
    <div class="col-sm-5">col-sm-5</div>
    <div class="col-sm-5">col-sm-5</div>
  </div>
  <div class="row">
    <div class="col-sm-5">col-sm-5</div>
    <div class="col-sm-5">col-sm-5</div>
    <div class="col-sm-5">col-sm-5</div>
    <div class="col-sm-5">col-sm-5</div>
  </div>
</div>

sample

sample 8
上記コードを使って表示するとこのように表示されます
行ごとの合計カラム数は12より大きいので入りきらない要素はカラム落ちした状態で出力されます

基本はこんなところ
Bootstrapを使って枠組みを作り好きなコンテンツを入れるもよし
用意されているパーツを使うもよしです
パーツは別ページで