.net column
.NET開発者のためのブログメディア

グリッド

Bootstrapのレスポンシブとは何か?使い方の流れもあわせて紹介

2020年04月09日
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を使うことができます。

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:メディアクエリを理解する

メディアクエリはレスポンシブデザインに対応させるための必須タグのことです。

メディアタイプやメディア特性によって対応するデバイスを指定したり、横幅のサイズなどを用いた分岐条件を指定したりすることで、ユーザーの使用端末に合わせてレイアウトを変更するのがメディアクエリです。

メディアタイプとは、どのメディアにCSSを適用させるのかを指定するためのもので、上記コードのscreenに当たります。このメディアにはall(すべてのデバイス)やscreen(モニターやディスプレイ)などが定義されています。

メディア特性とは、メディアの幅や高さなどによって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 分割された画面の何グリッド分を列として使用するのかを決めます。

上記のように記述すると画面幅がlarge(992px以上1200px未満)の場合、グリッドを4つ持つカラムを生成します。

1:コードを書いてグリッドシステムを使用する

これまでのルールを踏まえて実際にコードを書いてみます。「index.html」などの名前をつけた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”」を適用させる必要があります。

サンプルコードを使用する

公式サイトにbootstrapで作成できるボタンのサンプルコードが用意されているので、使用して実際にボタンをコーディングしてみます。

例えば、下記のサンプルコードはボタンのスタイルを指定するものです。

ブロックレベルボタンを指定してみる

ボタンをブロック要素の幅いっぱいの大きさになるようにしたい場合は、下記のようなコードを記述します。

bootstrapのv5.0では、displayの値をgridにすることでボタンを画面サイズいっぱいに表示できます。v4.2の場合はdisplayではなく、「btn-block」をボタンに指定することで同様のことが行えます。

ブロック要素の幅に合わせることで、レスポンシブデザインに対応できます。

ボタンのサイズ指定をしてみる

classに「btn-lg」や「btn-sm」を指定することでボタンサイズを変更できます。

サイズを指定しない場合はスモールより大きくてラージより小さいデフォルトの大きさになります。以下のサンプルコードで確認できます。

以前は「.btn-xs」というスモールサイズよりも小さいボタンの作成が可能でしたが、現在は指定することができません。

Bootstrapのテーブルの使用の流れ

bootstrapではテーブル要素にもあらかじめいくつかのスタイルが用意されていて、ルールに沿ってclassを指定することで使用できます。

ボタンと同じようにprimary、secondary、success、dangerなどを指定することで、テーブルのスタイルを変更できます。

ユーザーが見やすいようにテーブルにストライプを追加したり、ホバー状態にしたりすることも可能です。

また、bootstrapではclassを指定するだけでテーブルをレスポンシブ対応にすることもできます。

使用ルールを覚える

bootstrapではテーブルを使用する際にもグリッドシステムやボタンと同様に、テーブル要素にclass「table」を指定します。

「tabel」や「thead」、「tr」、「td」、「th」に対してそれぞれclassを指定することで、テーブル全体にスタイルを反映するのか、ヘッダー部分や行、列のみにスタイルを反映するのか決めることができます。

レスポンシブ対応のテーブルにする場合にも記述するルールがあります。

サンプルコードを使用する

bootstrapでテーブルを作成するためのコードも公式サイトにサンプルが用意されています。

以下は公式サイトに掲載されている基本的なテーブルのコードですが、テーブル全体の背景色を変更したコード、行や列、セル毎にスタイルを変更させるためのサンプルコードもあります。

テーブルをレスポンシブに対応させる

bootstrapではclass「table-responsive」をtableに指定することで、テーブルをレスポンシブに対応させられます。

ユーザーの使用端末によってはテーブルの横幅が画面サイズより大きくなってしまうこともあります。その対策としてテーブルをレスポンシブ対応することで、横スクロールによる閲覧が可能になります。

すべてのブレークポイントでレスポンシブ対応させるか、特定のブレークポイントでレスポンシブ対応させるかも指定することができます。

枠線を付けてみる

bootstrapではclass「table-bordered」を指定することで、テーブルに枠線を付けることができます。

枠線に色を付けたい場合は、「border-primary」や「border-secondary」をclassに指定します。

逆に、「table-borderless」を指定すると枠線をなくすことも可能です。

1行間隔での背景色変更してみる

tableのclassに「table-striped」を指定すれば、テーブルをより見やすくするために1行間隔で背景色を変えることもできます。

バリアントを追加したい場合には、primaryやsecondary、successなどでテーブル全体の背景色を指定します。

フォームの使用の流れ


bootstrapにはレスポンシブデザインに対応したフォームも簡単に作成することができます。

フォームを作成するためには、これまでと同じくルールに沿って要素にclassを指定していきます。

ここではbootstrapでフォームを使用する際のルールと、レスポンシブ対応のフォームを作成するためのサンプルコードなどについて紹介します。

使用ルールを覚える

bootstrapでは次のルールに基づいてフォームを使用しなくてはいけません。

まず、親要素としてフォーム要素であるformタグを記入します。次にフォーム項目のひとつひとつをdivもしくはfieldsetの要素を使って囲います。そして、inputの要素にはclass「form-control」を指定します。

サンプルコードを使用する

公式サイトのサンプルコードを使用して、bootstrapでレスポンシブ対応のフォームを作成します。なお、Bootstrapの公式サイトに掲載されているサンプルコードでは、div要素でフォームのinput要素を囲っています。

フォーム項目を水平に配置したい場合

フォーム項目を水平に配置したい場合には、グリッドを使用してフォームのレイアウトを決定します。

フォーム項目を囲うdiv等の要素にclass「row」を指定し、labelには「col-form-label」を指定します。また、input要素に対しては「col-○-○-○」を指定します。サンプルコードでは「col-sm-10」となっています。

インラインに並べたい場合

フォーム項目をインランに並べたい場合にはformにclass「col-auto」と「align-items-center」を指定します。

「col-auto」を指定することで横方向のレイアウトを作り、「align-items-center」で適切な配置位置にしています。こうすることでレスポンシブに対応できます。

Bootstrapのグリッドシステムを使ってレスポンシブデザインを実現


Bootstrapでは、様々なデバイスに対応するためのHTMLクラスがあらかじめ用意されています。

.col-区間名-列数
([区間名]以上の画面幅で[列数]幅にする)

「区間名」というのは、Bootstrapが定めているブレークポイント間のことを指します。詳細は下記のとおりです。

区間名 デバイス 画面幅(px)
xl デスクトップPC 1200px以上
lg ノートPC 992px以上
md タブレット 768px以上
sm ファブレット 576px以上
xs スマートフォン 576px未満

つまり、スマートフォンの画面幅を越えたらこのスタイルを適用するなど、それぞれの区間で任意のスタイルを指定することができるのです。レスポンシブデザインも簡単にできそうですね。

ブラウザではどのように表示されているかもチェックしていきましょう。

ノートPCやタブレットなどの大きな画面のときは半分の6ブロック、スマートフォンなどの小さな画面のときは12ブロックできちんと表示されています。

SE
なるほど。確かに何個もHTMLソースを用意する必要がなくなりますね。
PL
そうなんです。クラスを指定するだけなので1回書けば様々なデバイスに対応できますよ。

グリッドシステムの使い方をマスターしてレスポンシブデザインに対応しよう


この記事では、Bootstrapのグリッドシステムの概要からレスポンシブデザインを実現する方法までご紹介していきました。本来は複数のHTMLソースを用意する必要があるのですが、Bootstrapでは1つのソースでパソコン・スマホ・タブレットなどに対応することができます。ユーザーにとって使いやすいコンテンツにするためにも、ぜひこの記事を参考にレスポンシブデザインを実現してみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags