Bootstrap

Bootstrapでよく見るmd、lgは何のために使うの?

Bootstrapでよくmd、lgなどの文字が書かれていることがあります。ナビゲーションバーやグリッドシステムなどで使われています。書かなくても問題なく表示ができているように見えますが、これはいったい何のために使うのでしょうか。

Bootstrapのmd、lgが何のために使うのかを解説します。

Bootstrapでmd、lgは何のために使うの?

Bootstrapを使用しようとして公式サイトのドキュメントを見ると、多くの場面でsm、md、lg、xlといった文字がつけられているのを見かけます。ですがこの文字をつけていないものも見かけます。

グリッド(grid) col-3、col-md-4など
グローバルナビ(navbar) navbar-expand、navbar-expand-lg

公式サイトのドキュメントには、smなどの文字が書かれている例、書かれていない例がどちらも書かれています。結局これは書くべきか書かなくてもいいのかということがわかりにくいですね。

これらはBootstrapでレスポンシブ対応をするために用意されているクラスです。Bootstrapではクラスを追加するだけで、レスポンシブデザインに対応したウェブサイトを作るができます。

レスポンシブデザインとは

レスポンシブデザインとは、画面の幅に応じてデザインを切り替えるウェブデザインのことを指します。

スマートフォンが普及し、小さい画面でウェブサイトを見る機会が増えました。スマホの画面でサイドバーを横に大きく表示すると、それだけで面積を取ってしまい、本来見せたいコンテンツを効果的に見せることができなくなってしまいます。

これを解決するのがレスポンシブデザインです。

画面幅にあわせて表示するデザインを変えることで、どんな画面でも見やすいウェブサイトができます。

グローバルメニューではスマホでよく見かける、普段は非表示だけどタッチすることで表示されるようなメニューが使われることが多いです。

レスポンシブメニューの例

Bootstrapではレスポンシブデザインが実現できる

Bootstrapではレスポンシブデザインのウェブサイトを作成することができます。

試しにパソコンでBootstrapの公式サイトのドキュメントを開き、例を見てみましょう。lgなどの指定がされている部分は、画面の幅を縮めていくと表示のされ方が変わります。

Bootstrapではクラスの名前の付け方が規則的

Bootstrapではクラスを追加するだけでかんたんにきれいなウェブサイトを作ることができます。そしてクラスの名前は規則的に設定されています。

Bootstrapでレスポンシブデザインを実現するためのクラスも、どれも規則的に設定されています。ルールを覚えれば、gridでもnavbarでも自在にレスポンシブデザインが作れるようになります。

Bootstrapのレスポンシブデザインのためのクラスの規則

xs、md、lgなどの指定はBootstrapでレスポンシブデザインを実現するために用意されており、それぞれ画面幅の広さに応じて、どのような表示をさせるかを指定できます。ブレークポイントとも言います。

col-3などのxs、md、lgなどの指定が入っていないものは、以下の表で指定なしとします。

指定なし 基本の表示の設定。gridでは基本的に記載する。
xs 画面サイズに応じた表示の設定。
sm 576px以上768px未満の画面の時に表示を切り替える設定。
md 768px以上992 px未満の画面の時に表示を切り替える設定。
lg 992 px以上1200 px未満の画面の時に表示を切り替える設定。
xl 1200 px以上の画面の時に表示を切り替える設定。

なお表示の切り替えの基準となる画面幅はBootstrap4のデフォルトのブレークポイントの数値です。

Bootstrapのgridクラスでのレスポンシブデザインの使い方

gridのクラスは「スマホ」「タブレット」「パソコン」で見た場合など、複数の画面幅での表示のされ方を設定するのが基本です。

使用例

<div class=”col-12 col-md-4 col-lg-3″></div>

この例の場合は、col-12は768px未満の画面のとき、md-4は768px以上992px未満の画面のとき、lg-3は992px以上の画面のときに表示が適用されます。

sm、lgは特に指定がないですが、特に問題ありません。

gridでは表示方法を切りかえたい画面幅でクラスを指定すればOK。

Bootstrapのnavbarクラスでのレスポンシブデザインの使い方

navbarのクラスは「小さい画面」「大きな画面」で見た場合など、2種類の画面幅での表示のされ方を設定するのが基本です。

使用例

<nav class=”navbar navbar-expand-lg navbar-light bg-light”>

この例の場合は、expand-lgが設定されているので、992px以上の画面のときにパソコン用の、992px未満の画面のときにスマホ用のグローバルメニューの表示が適用されます。

グローバルメニューではスマホ用の表示に転換するポイントのみを設定するので、複数の画面幅での表示のされ方を設定する必要はありません。

Bootstrapでレスポンシブなサイトをつくろう

Bootstrapではレスポンシブデザインのサイトをかんたんに作ることができます。

レスポンシブデザインを実現するためのクラスはmd、lgなどのクラスにまとまっており、Bootstrapではその名前のつけ方の規則が共通して作られています。

一度理解すれば、多くのBootstrapのクラスを理解することができます。ぜひ覚えてみてください。