Bootstrap によるレスポンシブ Web デザイン

ディスプレイプロパティを設定する

ここではブラウザの幅を変更したときに要素を表示したり，非表示にしたりする方法を確認します．これにはディスプレイプロパティというユーティリティクラスを使います．

まず，.d-none というクラスを設定すると，その要素を非表示にできます．

index.html（抜粋）コピー
<p class="d-none">
  ディスプレイプロパティを使ってみます
</p>

次に，.d-block というクラスを設定すると，その要素をブロックレベル要素として表示します．ただし，p 要素はそもそもブロックレベル要素なので，.d-block を指定しても標準と同じ表示になるはずです．

index.html（抜粋）コピー
<p class="d-block">
  ディスプレイプロパティを使ってみます
</p>

次に，画面の幅が狭いときには非表示にして，-md 以上になると表示します．このためには，.d-none でいったんすべて非表示にして，.d-md-block を指定して -md 以上で表示するようにします．

index.html（抜粋）コピー
<p class="d-none d-md-block">
  md以上で表示するようにディスプレイプロパティを使ってみます
</p>

今度は逆に画面の幅が狭いときには表示して，-md 以上になると非表示になるように設定します．

index.html（抜粋）コピー
<p class="d-block d-md-none">
  md未満で表示するようにディスプレイプロパティを使ってみます
</p>

さらに -lg の状態だけで表示する方法も示します．このためには，.d-none でいったんすべて非表示にし，.d-lg-block で -lg 以上で表示するようにします．さらに .d-xl-none で -xl 以上で再び非表示にすることで実現できます．

index.html（抜粋）コピー
<div>
  <p class="d-none d-lg-block d-xl-none">
    lgだけで表示するようにディスプレイプロパティを使ってみます
  </p>

上の方法を組み合わせて，-md までと -lg 以上で表示する文字列を切り替えます．

index.html（抜粋）コピー
<p class="d-block d-lg-none">
  この文字列はスマートフォンなど比較的幅の狭い画面でのみ表示されるメッセージです．
</p>
<p class="d-none d-lg-block">
  このメッセージは画面の幅が広いときだけ表示されます．
</p>

目次に戻る