Bootstrap4でのレスポンシブデザインについて

レスポンシブデザインとは、画面の幅に応じてレイアウトが自動的に変わるデザインのことを指します。BootstrapはHTML、CSS、JavaScriptから構成されたWEBフレームワークで、Bootstrap4を利用すれば簡単にレスポンシブデザインのWebページを作成できます。

本記事ではBootstrap4でのレスポンシブデザインについてご紹介していきますので、ぜひ参考にしてみてはいかがでしょうか。

出典：Bootstrap5で高速に
参照：https://getbootstrap.jp/

Bootstrap4で知っておくべきこと3つ

Bootstrap4を利用する場合、基本的に押さえておかなければいけない基本知識があります。ここではBootstrap4で知っておくべきこと3つをご紹介しますので、ぜひ参考にしてみてください。

1：画面サイズと画面の名前

Bootstrap4には利用用途ごとに分けられた画面幅と名前があります。たとえば、デスクトップPCなどの画面で利用するWebコンテンツであれば、画面サイズは1200px以上、サイズの名前は「xl」となります。

2：ブレークポイントとは

ブレークポイントとは、レスポンシブなレイアウトを作成する際にどの画面幅でレイアウトを変えるのかという基準になるものです。

Bootstrap4の場合は「554px」「768px」「992px」「1200px」という4つのブレークポイントが存在し、さらにその間の区間として「xs」「sm」「md」「lg」「xl」が存在します。

3：スタイル定義はモバイルが優先

Bootstrap4はモバイル優先でスタイル定義されるようになっています。そのため、コードは「画面サイズA以上ならスタイルBになる」といった書き方でコーディングを行うことになります。

Bootstrap4におけるグリッドシステムの解説4つ

Bootstrap4には、Bootstrap3以前からグリッドシステムという概念が存在します。グリッドシステムを利用することで、より詳細なレイアウトコントロールが可能となります。

ここではBootstrap4におけるグリッドシステムについて解説していきますので、ぜひ参考にしてみてください。

出典：https://getbootstrap.com/docs/4.1/layout/grid/
参照：Grid system

1：グリッドシステムはガイドラインのこと

Bootstrap4のグリッドシステムでは一連のコンテナや行、列を使用して、コンテンツのレイアウトを行うことができます。

Bootstrapでは画面の幅を12本のグリッドに分割しており、スマートフォンでWebページを見た場合は上下分割、パソコンで見た場合はコンテンツを広めにするなど、グリッドシステムによって細かいレイアウト設定が可能です。

2：6つの幅があるコンテナクラス（.container）

「.container」は画面全体を示すコンテナクラスです。コンテナの最大幅は、「なし（auto）」「576px」「720px」「940px」「1140px」「container-fluid（画面幅全体）」の6種類から設定することができます。

画面サイズごとに設定を変更するにはメディアクエリを使う

メディアクエリ（CSS Media Query）とは、「指定した画面幅以上の時に適用するスタイル」を設定できるものです。メディアクエリは「@media (min-width: 544px)」のように指定します。

3：行のクラスであるロー（.row）

グリッドシステムでは、行のクラスである「.row」を使用してWebコンテンツのレイアウト設定や配置などを行います。たとえば、コンテナを構成する場合、rowはコンテナを構成する行を設定できます。

4：列のクラスであるカラム（.col）

グリッドシステムでは、列のクラスである「.col」を使用してWebコンテンツのレイアウト設定や配置などを行います。たとえば、コンテナを構成する場合、colは縦列であるカラムになります。

レスポンシブ化するにはカラムの書き方が重要

レスポンシブなレイアウトの作成には、それぞれの画面幅でいくつのカラムを使用したボックスにするかという設定を行うことになります。

必要に応じて異なるクラスを複数指定することで、スマホなら1カラム、デスクトップパソコンなら4カラムといったレイアウトの設定が可能です。

カラムを入れ子にする場合のコードの書き方

入れ子にする場合、以下のように記述します。

Bootstrap4におけるテーブルの作り方4つ

Bootstrap4でテーブルを作成する場合、どのような方法で作成すればよいのでしょうか。ここではBootstrap4におけるテーブルの作り方4つをご紹介しますので、ぜひ参考にしてみてください。

1：基本のテーブルクラスの作り方

基本のテーブルクラスは、「<table class=””table””></table>」のように「table」にtableクラスをつける形になります。

2：レスポンシブテーブルの作り方

レスポンシブテーブルを作成する場合、tableタグを「table-responsive」で囲みましょう。

3：テーブル内の文章を折り返さないレスポンシブテーブルの作り方

文章を折り返したくない場合は、セルの前に「text-nowrap」をつけることでその行を折り返さなくなります。

4：ブレークポイントを設けたレスポンシブテーブルの作り方

ブレークポイントを設けたレスポンシブテーブルを作成する場合は、tableタグを「table-responsive-{-sm|-md|-lg|-xl}で囲みましょう。

Bootstrap4におけるナビゲーションバーの作り方3つ

Bootstrap4でナビゲーションバーを作成する場合、どのような方法で作成すればよいのでしょうか。ここではBootstrap4におけるナビゲーションバーの作り方3つをご紹介しますので、ぜひ参考にしてみてください。

1：基本的のナビゲーションバーの作り方

基本的なナビゲーションバーを作成する場合、「Navbar」を使用します。Navbarはnav要素の中に「ボタン」と「メニュー」を入れた構成になります。

2：ロゴをつけたナビゲーションバーの作り方

ロゴをつけたナビゲーションバーを作成する場合、画像ソースを追加しましょう。

レスポンシブの無効化

Bootstrap4でのレスポンシブの無効化について紹介します。

style=””min-width: 1000px; max-width: 1000px;””をしていることで、レスポンシブを無効化できます。

Bootstrap4を使ってレスポンシブデザインのページを作ろう

レスポンシブとは、画面の幅に応じてレイアウトが動的に変わることです。

ぜひこの記事でご紹介したBootstrap4でのレスポンシブデザインやグリッドシステム、Bootstrap4におけるテーブルやナビゲーションバーの作り方などを参考に、Bootstrap4を使用してレスポンシブページを作成してみてはいかがでしょうか。

インフラエンジニア専門の転職サイト「FEnetインフラ」

FEnetインフラはサービス開始から10年以上『エンジニアの生涯価値の向上』をミッションに掲げ、多くのエンジニアの就業を支援してきました。

転職をお考えの方は気軽にご登録・ご相談ください。