Bootstrapのレスポンシブとは何か？使い方の流れもあわせて紹介
- SE
- 確かに、レスポンシブデザインに対応していないWebサイトはスマホで閲覧したとき、少し見にくいですよね。
- PL
- 見にくいサイトはそれだけでお客さんが離れていくこともあるので、ぜひレスポンシブデザインへの対応を行ってくださいね。
この記事でわかること
Bootstrapとは何か？
bootstrapとはプログラミングの手助けをしてくれるフレームワークの1つです。
通常はCSSを使用してすべてのスタイルを自分で作成していきますが、bootstrapにはWEBページでよく使われる部品がテンプレートとして用意してあるため、知識がなくてもスタイルを調整することができます。
さらに、bootstrapはユーザーの使用端末に合わせて自動で表示を最適化してくれるレスポンシブデザインに対応しているため、端末ごとにスタイルを作る手間も省けます。
そして、このユーザーがWEBページを見るために使用している端末に合わせてレイアウトを変化させることをレスポンシブデザインといいます。
Bootstrapの中身について
bootstrapはブレークポイントとグリッドシステムによって画面サイズに合わせてレイアウトを変更し、コンテンツを配置することでレスポンシブデザインに対応しています。
ブレークポイントでユーザーの使用端末がどれくらいの大きさなのかを判定し、その大きさに合わせて表示されるレイアウトを変えます。
グリッドシステムはコンテンツを配置するための仕組みで、端末の画面を12分割したグリッドに沿ってデザインを整えます。
ブレークポイント
ブレークポイントとは、「レイアウトをユーザーの使用端末や閲覧画面のサイズに合わせてレスポンシブに変化させるための基準」のことです。
bootstrapにはデフォルトで6つのブレークポイントがあり、サイズは12の倍数になります。ブレークポイントを指定することで、その基準を超えた、または小さくなった場合にレイアウトを自動で変えることができます。
グリッドシステムでは、このブレークポイントを指定してコンテンツを配置していきます。
グリッドシステム
グリッドシステムとは、「ブロックごとにテキストや画像を配置しスッキリとした画面を作る手法」のことです。bootstrapでは、横幅を12分割にしたグリッドシステムを採用しています。
このように、「何をいくつ分のブロック（グリッド）で表示するか」をコントロールすることで、デザイン性・自由度共に高いコンテンツを作成することができるのです。そしてbootstrapでは、グリッドシステムを上手く使うことで簡単にレスポンシブデザインを実現することができます。
Bootstrapを使用するための準備をする
レスポンシブ対応したWEBページ作成のためにbootstrapを使用するには、CDNやダウンロードなどいくつかの方法でbootstrapを使う準備をする必要があります。
ダウンロードして自分のパソコンにbootstrapのコードを入れて使う方法では、公式サイトにアクセスして「Download」からDownloadページに移動します。
続いて「Compiled CSS and JS」の項目にある「Download」をクリックします。
ダウンロードしたzipファイルを解凍して、ファイルを読み込むため「html」ファイルを作成します。
ダウンロードせずにbootstrapを使用するには、jsDelivr経由のCDNを利用します。この方法はhtmlファイルにコードを以下のコードを記入するだけでbootstrapを使うことができます。
|
1 2 3 4 5 6 7 8 |
<!-- head内に記述する --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <!-- </body>の前に記述する --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <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.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> |
Bootstrapのレイアウトを簡単に行うCSSの使用の流れ
bootstrapにおいて次のルールに沿ってCSSでスタイルをつけると、レスポンシブWEBデザインに対応したレイアウトを作成できます。
親要素にclass「container」もしくは「container-fluid」を使用します。次の階層でclass「row」を使い、行を定義します。その次の階層ではclass「col」を使ってrowで定義した行を何分割するか決めます。
bootstrapにはWEBページの画面を横に12分割する「グリッド」が存在しており、このグリッドに沿ってコンテンツを配置することでユーザーの使用端末に合わせてレスポンシブにレイアウトを変更することができるのです。
そして、グリッド何個分を使用するのかを定義するのが「row」や「col」です。
1：CONTAINERを使用する
bootstrapのレイアウトを決める際、デフォルトのグリッドシステムを使用するなら「container」が必須です。containerを省いてrowやcolだけでコードを記述してもレスポンシブデザインが正しく動作しません。
containerは内部にコンテンツを入れたり、余白を与えたりするのに使用する箱のことで、グリッドシステムを適用させる範囲を決めます。
containerには決められた幅があり、ブレークポイントでmax-widthを設定します。bootstrapではユーザー側の画面幅に合わせてcontainerの幅も段階に分けて用意されています。
1：メディアクエリを理解する
メディアクエリはレスポンシブデザインに対応させるための必須タグのことです。
メディアタイプやメディア特性によって対応するデバイスを指定したり、横幅のサイズなどを用いた分岐条件を指定したりすることで、ユーザーの使用端末に合わせてレイアウトを変更するのがメディアクエリです。
|
1 |
media=“screen and (min-width:768px) |
メディア特性とは、メディアの幅や高さなどによってCSSを適用させるのかを指定するためのものです。上記コードのmin-width:768pxの部分です。
1：CONTAINER-FLUID
class「container-fluid」を使用すると、配置されたコンテンツがユーザーが閲覧しているブラウザのウィンドウ幅いっぱいに広がります。
そのため、ウィンドウのサイズを狭くしたり広くしたりすると、container-fluidの幅もそれに合わせてレスポンシブに変化します。
1：rowクラスで行の設定をする
containerやcontainer-fluidで外側の大きな入れ物を作成したら、次にその入れ物に入れる横長の入れ物をrowで作ります。
rowには行を定義する役割があり、containerを水平に分割して上から下へと並べます。
1：col
colは列を指定します。rowで水平方向に分割したcontainerをcolはrowの中で縦に分割していきます。
そうして12 分割された画面の何グリッド分を列として使用するのかを決めます。
|
1 |
<div class=“col-lg-4”></div> |
1：コードを書いてグリッドシステムを使用する
これまでのルールを踏まえて実際にコードを書いてみます。「index.html」などの名前をつけたhtmlファイルを作成して下記のコードを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <div class="container"> <div class="row"> <div class="col-sm" style="background-color:lightblue;"> One of three columns </div> <div class="col-sm" style="background-color:lightgreen;"> One of three columns </div> <div class="col-sm" style="background-color:lightblue;"> One of three columns </div> </div><br> <div class="row"> <div class="col" style="background-color:lightgreen;">col</div> <div class="col" style="background-color:lightblue;">col</div> <div class="col" style="background-color:lightgreen;">col</div> <div class="col" style="background-color:lightblue;">col</div> </div><br> <div class="row"> <div class="col-8" style="background-color:lightblue;">col-8</div> <div class="col-4" style="background-color:lightgreen;">col-4</div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <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.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html> |
1：ブラウザで表示させるか確かめる
「Index.html」などのhtmlファイルに上記のような記述ができたら、作成したhtmlファイルを実際にブラウザで表示します。
bootstrapのグリッドシステムが適応されたレスポンシブデザインになっているか、画面のサイズを狭くしたり、広くしたりして確認してください。その際、colによるレイアウトの違いも確認してみてください。
ブラウザに「レスポンシブデザインモード」という機能がありますので、その機能を使うとスマートフォンで表示した場合のレイアウトも確認できます。
Bootstrapのボタンの使用の流れ
bootstrapを使うことで、ユーザーの使用するデバイスに合わせてレスポンシブで変化するボタンも作成できます。
bootstrapのデザインをボタンに適用させるためには、buttonにclassを指定します。
ボタンのバリエーションもdefault、primary、secondary、success、danger、warning、info、light、dark、linkが用意されています。使用するWEBサイトのデザインに合わせたボタンを作ることが可能です。
その他にもボタンの表示を押された状態のままにしたり、無効化状態にしたりすることもできます。
使用ルールを覚える
bootstrapでボタンを作成する際はグリッドシステムを使用するのと同様、要素にボタンのclass「btn」を指定します。
classを指定する要素はbuttonだけでなく、aやinputにも利用できます。ただし、アンカー要素aに「btn」を指定してボタンとして使用する場合は、「role=“button”」を適用させる必要があります。
|
1 2 3 4 5 6 7 |
<a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="submit" value="Submit"> <input class="btn btn-primary" type="reset" value="Reset"> |
サンプルコードを使用する
公式サイトにbootstrapで作成できるボタンのサンプルコードが用意されているので、使用して実際にボタンをコーディングしてみます。
例えば、下記のサンプルコードはボタンのスタイルを指定するものです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> |
ブロックレベルボタンを指定してみる
ボタンをブロック要素の幅いっぱいの大きさになるようにしたい場合は、下記のようなコードを記述します。
bootstrapのv5.0では、displayの値をgridにすることでボタンを画面サイズいっぱいに表示できます。v4.2の場合はdisplayではなく、「btn-block」をボタンに指定することで同様のことが行えます。
ブロック要素の幅に合わせることで、レスポンシブデザインに対応できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="d-grid"> <button class="btn btn-primary" type="button">Button</button> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <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.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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> <button class="btn btn-primary btn-block“ type=“button">Button</button> <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> |
ボタンのサイズ指定をしてみる
classに「btn-lg」や「btn-sm」を指定することでボタンサイズを変更できます。
サイズを指定しない場合はスモールより大きくてラージより小さいデフォルトの大きさになります。以下のサンプルコードで確認できます。
以前は「.btn-xs」というスモールサイズよりも小さいボタンの作成が可能でしたが、現在は指定することができません。
|
1 2 3 4 5 |
<button class="btn btn-primary btn-sm" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary btn-lg" type="button">Button</button> |
Bootstrapのテーブルの使用の流れ
bootstrapではテーブル要素にもあらかじめいくつかのスタイルが用意されていて、ルールに沿ってclassを指定することで使用できます。
ボタンと同じようにprimary、secondary、success、dangerなどを指定することで、テーブルのスタイルを変更できます。
ユーザーが見やすいようにテーブルにストライプを追加したり、ホバー状態にしたりすることも可能です。
また、bootstrapではclassを指定するだけでテーブルをレスポンシブ対応にすることもできます。
使用ルールを覚える
bootstrapではテーブルを使用する際にもグリッドシステムやボタンと同様に、テーブル要素にclass「table」を指定します。
「tabel」や「thead」、「tr」、「td」、「th」に対してそれぞれclassを指定することで、テーブル全体にスタイルを反映するのか、ヘッダー部分や行、列のみにスタイルを反映するのか決めることができます。
レスポンシブ対応のテーブルにする場合にも記述するルールがあります。
サンプルコードを使用する
bootstrapでテーブルを作成するためのコードも公式サイトにサンプルが用意されています。
以下は公式サイトに掲載されている基本的なテーブルのコードですが、テーブル全体の背景色を変更したコード、行や列、セル毎にスタイルを変更させるためのサンプルコードもあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> |
テーブルをレスポンシブに対応させる
bootstrapではclass「table-responsive」をtableに指定することで、テーブルをレスポンシブに対応させられます。
ユーザーの使用端末によってはテーブルの横幅が画面サイズより大きくなってしまうこともあります。その対策としてテーブルをレスポンシブ対応することで、横スクロールによる閲覧が可能になります。
すべてのブレークポイントでレスポンシブ対応させるか、特定のブレークポイントでレスポンシブ対応させるかも指定することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope=“col">Handle</th> <th scope=“col">Handle</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Jacob</td> <td>Jacob</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td>Jacob</td> <td>Jacob</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> <td>Jacob</td> <td>Jacob</td> </tr> </tbody> </table> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <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.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html> |
枠線を付けてみる
bootstrapではclass「table-bordered」を指定することで、テーブルに枠線を付けることができます。
枠線に色を付けたい場合は、「border-primary」や「border-secondary」をclassに指定します。
逆に、「table-borderless」を指定すると枠線をなくすことも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<table class="table table-bordered border-warning"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> |
1行間隔での背景色変更してみる
tableのclassに「table-striped」を指定すれば、テーブルをより見やすくするために1行間隔で背景色を変えることもできます。
バリアントを追加したい場合には、primaryやsecondary、successなどでテーブル全体の背景色を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<table class="table table-dark table-striped”> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> |
フォームの使用の流れ
bootstrapにはレスポンシブデザインに対応したフォームも簡単に作成することができます。
フォームを作成するためには、これまでと同じくルールに沿って要素にclassを指定していきます。
ここではbootstrapでフォームを使用する際のルールと、レスポンシブ対応のフォームを作成するためのサンプルコードなどについて紹介します。
使用ルールを覚える
bootstrapでは次のルールに基づいてフォームを使用しなくてはいけません。
まず、親要素としてフォーム要素であるformタグを記入します。次にフォーム項目のひとつひとつをdivもしくはfieldsetの要素を使って囲います。そして、inputの要素にはclass「form-control」を指定します。
サンプルコードを使用する
公式サイトのサンプルコードを使用して、bootstrapでレスポンシブ対応のフォームを作成します。なお、Bootstrapの公式サイトに掲載されているサンプルコードでは、div要素でフォームのinput要素を囲っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<form> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> |
フォーム項目を水平に配置したい場合
フォーム項目を水平に配置したい場合には、グリッドを使用してフォームのレイアウトを決定します。
フォーム項目を囲うdiv等の要素にclass「row」を指定し、labelには「col-form-label」を指定します。また、input要素に対しては「col-○-○-○」を指定します。サンプルコードでは「col-sm-10」となっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form> <div class="row mb-3"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3"> </div> </div> <div class="row mb-3"> <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3"> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> |
インラインに並べたい場合
フォーム項目をインランに並べたい場合にはformにclass「col-auto」と「align-items-center」を指定します。
「col-auto」を指定することで横方向のレイアウトを作り、「align-items-center」で適切な配置位置にしています。こうすることでレスポンシブに対応できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<form class="row row-cols-lg-auto g-3 align-items-center"> <div class="col-12"> <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label> <div class="input-group"> <div class="input-group-text">@</div> <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> </div> </div> <div class="col-12"> <label class="visually-hidden" for="inlineFormSelectPref">Preference</label> <select class="form-select" id="inlineFormSelectPref"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="inlineFormCheck"> <label class="form-check-label" for="inlineFormCheck"> Remember me </label> </div> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> |
Bootstrapのグリッドシステムを使ってレスポンシブデザインを実現
Bootstrapでは、様々なデバイスに対応するためのHTMLクラスがあらかじめ用意されています。
.col-区間名-列数
（[区間名]以上の画面幅で[列数]幅にする）
「区間名」というのは、Bootstrapが定めているブレークポイント間のことを指します。詳細は下記のとおりです。
| 区間名 | デバイス | 画面幅（px） |
|---|---|---|
| xl | デスクトップPC | 1200px以上 |
| lg | ノートPC | 992px以上 |
| md | タブレット | 768px以上 |
| sm | ファブレット | 576px以上 |
| xs | スマートフォン | 576px未満 |
つまり、スマートフォンの画面幅を越えたらこのスタイルを適用するなど、それぞれの区間で任意のスタイルを指定することができるのです。レスポンシブデザインも簡単にできそうですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Form Sample</title> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.min.js"></script> <style> h2 { color: white; background-color: #00b7ce; text-align: center; } </style> </head> <body> <br/><br/> <div class="container-fluid"> <div class="row"> <!-- xs(スマートフォン)のときは12ブロック・md(タブレット)のときは6ブロック --> <div class="col-xs-12 col-md-6"> <h2>レスポンシブデザイン</h2> </div> </div> </div> </body> </html> |
ノートPCやタブレットなどの大きな画面のときは半分の6ブロック、スマートフォンなどの小さな画面のときは12ブロックできちんと表示されています。
- SE
- なるほど。確かに何個もHTMLソースを用意する必要がなくなりますね。
- PL
- そうなんです。クラスを指定するだけなので1回書けば様々なデバイスに対応できますよ。
グリッドシステムの使い方をマスターしてレスポンシブデザインに対応しよう
この記事では、Bootstrapのグリッドシステムの概要からレスポンシブデザインを実現する方法までご紹介していきました。本来は複数のHTMLソースを用意する必要があるのですが、Bootstrapでは1つのソースでパソコン・スマホ・タブレットなどに対応することができます。ユーザーにとって使いやすいコンテンツにするためにも、ぜひこの記事を参考にレスポンシブデザインを実現してみてはいかがでしょうか。
