ディスプレイ

Display property

ディスプレイを使用して、コンポーネントの表示を素早くレスポンシブに切り替えられます。よく使う値のサポートと、印刷用スタイルの制御が含まれています。

項目

基礎知識

ディスプレイクラスを使用して、コンポーネントのdisplayプロパティをレスポンシブに切り替えられます。 displayのすべての可能な値のサブセットのみを意図的にサポートします。クラスは、必要に応じてさまざまな効果のために組み合わせることができます。

表記方法

xsからxxlまでのすべてのブレイクポイントに適用されるdisplayクラスには、ブレイクポイントの略語がありません。これらのクラスはmin-width: 0;以降で適用されるため、メディアクエリに縛られないからです。しかし、残りのブレイクポイントにはブレイクポイントの略語が含まれています。

クラス名の形式は以下の通りです。

xsの場合は.d-{value}というクラス名が付けられます。
sm、md、lg、xl、xxlに対して.d-{breakpoint}-{value}があります。

valueの種類は以下の通りです。

none
inline
inline-block
block
grid
inline-grid
table
table-cell
table-row
flex
inline-flex

表示値は$utilitiesで定義されているdisplayの値を変更し、SCSSを再コンパイルすることで変更できます。

メディアクエリは、与えられたブレイクポイント以上の画面幅に影響します。例えば、.d-lg-noneはlg、xl、xxlの画面に対してdisplay: none;を設定します。

例

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

要素の非表示

モバイルフレンドリーな開発を迅速に行うには、レスポンシブ表示クラスを使用して、デバイスごとに要素を表示・非表示にします。同じサイトの完全に異なるバージョンを作成するのを避け、代わりに各スクリーンサイズに応じて要素をレスポンシブに非表示にします。

要素を非表示にするには、.d-noneまたは.d-{sm,md,lg,xl,xxl}-noneをターゲットの画面サイズに合わせて使用します。

指定された画面サイズ間隔でのみ要素を表示するには、.d-*-noneクラスと..d-*-*クラスを組み合わせます。例えば、.d-none .d-md-block .d-xl-none .d-xxl-noneは、中型および大型デバイスを除くすべての画面サイズに対して要素を非表示にします。

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-xxl-block`
xxlのみ非表示	`.d-xxl-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 .d-xxl-none`
xxlのみ表示	`.d-none .d-xxl-block`

hide on lg and wider screens

hide on screens smaller than lg

html

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

印刷のディスプレイ

印刷の場合は、印刷クラスを使って要素のdisplayの値を変更します。レスポンシブな.d-*ユーティリティと同じdisplay値をサポートしています。

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-inline-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

印刷クラスとディスプレイクラスは組み合わせ可能です。

Screen Only (Hide on print only)

Print Only (Hide on screen only)

Hide up to large on screen, but always show on print

html

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

CSS

SassユーティリティAPI

ディスプレイユーティリティはユーティリティAPIのscss/_utilities.scssで宣言されています。ユーティリティAPIの使い方はこちら

scss/_utilities.scss

"display": (
  responsive: true,
  print: true,
  property: display,
  class: d,
  values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),