表示プロパティ

表示ユーティリティを使用して、コンポーネントなどの表示値を迅速かつレスポンシブに切り替えます。一般的な値の一部に加えて、印刷時の表示を制御するための追加の値もサポートしています。

このページの内容

動作原理

レスポンシブな表示ユーティリティクラスを使用して、displayプロパティの値を変更します。意図的に、displayのすべての可能な値のサブセットのみをサポートしています。必要に応じて、様々な効果を得るためにクラスを組み合わせることができます。

表記法

xsからxxlまでのすべてのブレークポイントに適用される表示ユーティリティクラスには、ブレークポイントの省略形が含まれていません。これは、これらのクラスが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クラスのいずれかを使用します。

特定の画面サイズの範囲でのみ要素を表示するには、1つの.d-*-noneクラスと.d-*-*クラスを組み合わせることができます。たとえば、.d-none .d-md-block .d-xl-none .d-xxl-noneは、中型および大型デバイスを除くすべての画面サイズで要素を非表示にします。

画面サイズ	クラス
すべてで非表示	`.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`

lg以上の画面で非表示

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

印刷クラスと表示クラスを組み合わせることができます。

画面のみ（印刷時のみ非表示）

印刷のみ（画面上では非表示）

画面上ではlargeまで非表示、印刷時は常に表示

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
),