デバイス毎に表示・非表示を切り替え「d-*-block」「d-*-none」

この記事ではBootstrapを使用して画面サイズに応じて要素の表示、非表示を切り替える方法を解説しています。「d-*block」「d-*-none」というクラスを使用して、デバイスごとに表示を切り替えるページを作成できるようになります!

コンテンツ [表示]

  1. 1Bootstrapの「d-*-block」と「d-*-none」
  2. 2Bootstrapの「d-*-block」と「d-*-none」の使い方

Bootstrapの「d-*-block」と「d-*-none」

Bootstrapには、「d-*-block」と「d-*-none」というクラスがあります。

このクラスを使うと、ある特定の画面サイズのときに表示するもしくは表示しない、ということを指定できます。
(要素を表示するクラスはインライン要素の場合は「d-*-inline」インラインブロック要素の場合は「d-*-inline-block」になるなど、様々な種類があります。今回は「d-*-block」を使用して説明します)

以下に、クラスを指定したときに画面サイズによって表示がどのように変わるかを表でまとめてみました。

d-*-block

d-*-blockを使うと、指定した画面サイズ以上のときに要素を表示するようになります。
d-blockとして、画面サイズに関係なく表示することもできます。

 

要素を表示するクラス(×…非表示)
画面サイズ 0px~ 576px~ 768px~ 992px~ 1200px~
d-block 表示 表示 表示 表示 表示
d-sm-block × 表示 表示 表示 表示
d-md-block × × 表示 表示 表示
d-lg-block × × × 表示 表示
d-xl-block × × × × 表示

d-*-none

d-*-noneを使うと、指定した画面サイズ以上のときに要素を非表示にできます。
d-noneとして、画面サイズに関係なく非表示にすることもできます。

 

要素を非表示にするクラス(○…表示)
画面サイズ 0px~ 576px~ 768px~ 992px~ 1200px~
d-none 非表示 非表示 非表示 非表示 非表示
d-sm-none 非表示 非表示 非表示 非表示
d-md-none 非表示 非表示 非表示
d-lg-none 非表示 非表示
d-xl-none 非表示

ちなみに、どの画面サイズがざっくりどのデバイスに対応しているかは以下のようになります。

  サイズ 用途
sm 576px~ スマートフォンなど
md 768px~ タブレットなど
lg 992px~ ノートパソコンなど
xl 1200px~ テレビ、デスクトップPCなど

Bootstrapの「d-*-block」と「d-*-none」の使い方

一般的には、画面サイズによって要素を非表示にするd-*noneを単体で使用するか、画面サイズによって要素を表示するd-*blockとすべて非表示にするd-noneを組み合わせて使うのが一般的です。

なぜなら、要素は基本的に表示されるようになっているので、d-*block単体で使用する必要はないためです。

このクラスの使い方は簡単で、表示非表示を切り替えたい要素のクラスに指定するだけです。

d-md-noneを指定したdiv要素の例

<div class="col d-md-none" style="height: 50px;">スマホ広告</div>  

上記の例だと、d-md-noneを指定しているため画面サイズが768px以上の場合は表示されなくなり、スマートフォンなどの小さい画面を使用している場合にのみ表示される要素を作ることができます。
これを利用して、スマートフォンにのみ表示される広告を作っているのです。

d-noneとd-md-blockを指定したdiv要素の例

<div class="col-md-4 d-none d-md-block" style="height: 100px;">PC広告</div> 

逆に、このようにd-noned-md-blockを組み合わせて指定すると、画面サイズが768px以上の場合は表示されるがそれより小さい場合は非表示になる要素を作ることができます。

上記2つの要素を組み合わせると、画面サイズが768pxの時点でスマホ広告とPC広告の表示非表示が入れ替わり、画面サイズによって違う広告を表示することができます。

以下に上記の要素を使用したサンプルコードを用意してみました。画面サイズを切り替えて要素の表示がどのように変わるか確かめてみてください。

GeekHive採用サイト

関連記事