Bootstrap4で利用できるディスプレイ(display)の使い方をご紹介します。displayを利用すると、ブレークポイントに応じて表示・非表示の切り替えのほか、色々なdisplay設定をすることができます。
Bootstrap3→4に変わってからの主な変更点
Bootstrap4では、CSSのdisplayプロパティに関する一通りのクラスが用意されました。
Bootstrap4で用意されているdisplayに関するクラス
- d-{prefix}-none
- d-{prefix}-inline
- d-{prefix}-inline-block
- d-{prefix}-block
- d-{prefix}-table
- d-{prefix}-table-cell
- d-{prefix}-table-row
- d-{prefix}-table-flex
- d-{prefix}-table-inline-flex
{prefix}には、{なし | sm | md | lg | xl}が入ります。
なお、Bootstrap4では、Bootstrap3で用意されたhidden-{prefix}やvisible-{prefix}は廃止され、代わりにd-{prefix}-noneやd-{prefix}-blockに変更されました。
displayで表示・非表示を設定
ここでは、displayクラスを使って、横幅サイズに応じて表示・非表示を設定する方法を説明します。
- .d-{prefix(sm/md/lg|xl)}-none：prefixの横幅以上のときに非表示(display:none)
- .d-{prefix(sm/md/lg|xl)}-block：prefixの横幅以上の時に表示(display:block)
| Screen Size | Class |
|---|---|
| XSサイズのみ表示 | d-block d-sm-none |
| SMサイズ以上で表示 | d-none d-sm-block |
| MDサイズ以上で表示 | d-none d-md-block |
| LGサイズ以上で表示 | .d-none .d-lg-block |
| XLサイズ以上で表示 | .d-none .d-xl-block |
たとえば、XSサイズのみ表示したい場合は、クラス名に「d-block(全て表示) d-sm-none(SMサイズ以上で表示)」を指定します。
■XSサイズのみ表示したい場合
■上記のソースコード
|
1 |
<h2 class="d-block d-sm-none">XSサイズ(575px)以下で表示</h2> |
■表示例
■上記のソースコード
|
1 2 3 4 |
<h2 class="d-none d-sm-block">SM(576px)サイズ以上で表示</h2> <h2 class="d-none d-md-block">MD(768px)サイズ以上で表示</h2> <h2 class="d-none d-lg-block">LG(992px)サイズ以上で表示</h2> <h2 class="d-none d-xl-block">XL(1200px)サイズ以上で表示</h2> |
そのほかにも、d-{prefix}-noneとd-{prefix}-blockの組み合わせで、任意のブレークポイントで表示・非表示を切り替えることができます。
| Screen Size | Class |
|---|---|
| 全てのサイズで非表示 | d-none |
| XSサイズのみ非表示 | d-none d-sm-block |
| SMサイズのみ非表示 | d-sm-none d-md-block |
| MDサイズのみ非表示 | .d-md-none .d-lg-block |
| LGサイズのみ非表示 | .d-lg-none .d-xl-block |
| XLサイズのみ非表示 | .d-xl-none |
| 全て表示(初期値) | .d-block |
| XSサイズのみ表示 | .d-block .d-sm-none |
| SMサイズのみ表示 | .d-none .d-sm-block .d-md-none |
| MDサイズのみ表示 | .d-none .d-md-block .d-lg-none |
| LGサイズのみ表示 | .d-none .d-lg-block .d-xl-none |
| XLサイズのみ表示 | .d-none .d-xl-block |
■visible/hiddenの表示例
■上記のソースコード
|
1 2 |
<h1 class="visible-xs" style="color:blue;">widthが767px以下で表示される</h1> <h1 class="hidden-xs" style="color:red;">widthが767px以下で消える</h1> |
色々なdisplay(ディスプレイ)にクラス
表示・非表示以外にも色々なdisplayクラスが用意されています。
displayに関するクラスは下記の通りです。
| クラス | CSS displayの値 |
|---|---|
| d-none | display:none |
| d-inline | display:inline |
| d-inline-block | display:inline-block |
| d-block | display:block |
| d-table | display:table |
| d-table-cell | display:table-cell |
| d-table-row | display:table-row |
| d-flex | display:flex |
| d-inline-flex | display:inline-flex |
■d-inlineの表示例
■上記のソースコード
|
1 2 |
<h2 class="d-inline bg-primary">d-inline</h2> <h2 class="d-inline bg-success">d-inline</h2> |
■d-blockの表示例
■上記のソースコード
|
1 2 |
<span class="d-block bg-primary">d-block</span> <span class="d-block bg-success">d-block</span> |
ブレークポイントを設定することもできます
| クラス | CSS displayの値 |
|---|---|
| d-{sm | md | lg | xl}-none | {sm | md | lg | xl}サイズ以上でdisplay:none |
| d-{sm | md | lg | xl}-inline | {sm | md | lg | xl}サイズ以上でdisplay:inline |
| d-{sm | md | lg | xl}-inline-block | {sm | md | lg | xl}サイズ以上でdisplay:inline-block |
| d-{sm | md | lg | xl}-block | {sm | md | lg | xl}サイズ以上でdisplay:block |
| d-{sm | md | lg | xl}-table | {sm | md | lg | xl}サイズ以上でdisplay:table |
| d-{sm | md | lg | xl}-table-cell | {sm | md | lg | xl}サイズ以上でdisplay:table-cell |
| d-{sm | md | lg | xl}-table-row | {sm | md | lg | xl}サイズ以上でdisplay:table-row |
| d-{sm | md | lg | xl}-flex | {sm | md | lg | xl}サイズ以上でdisplay:flex |
| d-{sm | md | lg | xl}-inline-flex | {sm | md | lg | xl}サイズ以上でdisplay:inline-flex |
また、Bootstrap4ではフレックスボックスが採用されて、d-flexやd-inline-flexが使えるようになりました。フレックスボックスに関する詳しい使い方は下記をご参照ください。
https://programming-shikiho.com/bootstrap4-flex/
Display Property | Bootstrap4
まとめ
いかがでしたでしょうか。
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のディスプレイ(display)の使い方の基本をご紹介しました。
公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
Display Property | Bootstrap4
合わせて読みたい記事
今回は、以上になります。最後までご覧いただきありがとうございました。