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/
一応コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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になるようにする
例えばこんなコードを書いてみると
|
1 2 3 4 5 6 |
<div class="container-fluid"> <div class="row"> <div class="col-6">12分割の6個分</div> <div class="col-6">12分割の6個分</div> </div> </div> |
このようにBootstrapではclass属性を使い、レイアウトをしていきます
もちろん自分のCSSファイルを作り上書きすることで細かい指定も可能になります
container系のclass属性
container クラスは、「幅に応じたデバイス判定」と連動しており、デバイスに応じて適切な枠の幅をつくり、左右にマージンを作り出します。
|
1 2 3 4 5 6 7 |
<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> |
コンテナを画面幅全体に広げたい場合は .container-fluid を使用
|
1 2 3 4 5 6 7 |
<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> |
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無し | どんな画面幅でもカラム数は変わらない |
|
1 2 3 4 5 6 7 |
<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> |
上記のコードだと576px以上の画面幅の場合はコンテンツが3分割
576pxよりも狭い場合はコンテンツがいっぱいに広がりたて並びになる
「col-sm-4」576pxより画面幅が大きい場合は4個分の幅という指定になる
|
1 2 3 4 5 6 7 |
<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> |
columns
prefixの指定に応じて表示が変わりますが、基本はカラムの合計は12になるように指定するのですが、12より多かったり少なかったりする場合も表示はできるので、その場合の挙動についても挙げておきます。
カラム数の合計が12の場合は問題なし
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
行ごとの合計カラム数は12なので問題なく表示されます
カラム数の合計が12よりも少ない場合は単純に左詰めで表示されます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
行ごとの合計カラム数は12より小さいので左に寄った状態で表示されます
逆に合計カラム数が12より大きいと収まりきらなかったものがカラム落ちする形で表示されます
大幅なレイアウト崩壊には結び付きませんが、気を付けたいところ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
上記コードを使って表示するとこのように表示されます
行ごとの合計カラム数は12より大きいので入りきらない要素はカラム落ちした状態で出力されます
基本はこんなところ
Bootstrapを使って枠組みを作り好きなコンテンツを入れるもよし
用意されているパーツを使うもよしです
パーツは別ページで
