表示ユーティリティ（Display property） v5.3.0クラス追加

使い方（How it works）

レスポンシブな表示ユーティリティクラスを使用して、displayプロパティの値を変更。Bootstrapでは意図的に表示可能なすべての値のサブセットのみをサポート。クラスは、必要に応じてさまざまなエフェクトが組み合わせられる。

記法について（Notation）

xs から xxl までのすべてのブレークポイントに適用されるユーティリティクラスを表示するには、その中にブレークポイントの省略形は存在しない。これは、これらのクラスが min-width: 0 から適用されるため。それゆえ、メディアクエリによって束縛されない。ただし、残りのブレークポイントにはブレークポイントの省略形が含まれる。

したがって、クラス名は次の形式で指定：

• .d-{value} は、xs
• .d-{breakpoint}-{value} は、sm, md, lg, xl, xxl

valueは次のいずれか：

• none：非表示（display: none）
• inline：インライン表示（display: inline）
• inline-block：インライン・ブロック表示（display: inline-block）
• block：ブロック表示（display: block）
• gridv5.0.0-alpha3追加：グリッド表示（display: grid）
• inline-gridv5.3.0追加：インライン・グリッド表示（display: inline-grid）
• table：テーブル表示（display: table）
• table-row：テーブル行表示（display: table-row）
• table-cell：テーブルセル表示（display: table-cell）
• flex：flexコンテナ表示（display: flex）
• inline-flex：flexインラインコンテナ表示（display: inline-flex）

表示のvalueは、scss/_utilities.scss 内の $utilities で定義された display 値を変更してSCSSを再コンパイルすれば変更できる。

メディアクエリは、指定されたブレークポイント以上での画面の幅に影響する。例えば、.d-lg-none は、lg（大）、xl（特大）、xxl（超特大）の画面で display: none を設定。

実例（Examples）

見本 見やすいように色と空白をつけています

設定例

インライン表示<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

インライン・ブロック表示<div class="d-inline-block p-2 text-bg-primary">
  <h3>d-inline-block</h3>
  ブロック1
</div>
<div class="d-inline-block p-2 text-bg-dark">
  <h3>d-inline-block</h3>
  ブロック2
</div>

ブロック表示<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

グリッド表示<span class="d-grid p-2 text-bg-primary">d-grid</span>
<span class="d-grid p-2 text-bg-dark">d-grid</span>

インライン・グリッド表示<span class="d-inline-grid p-2 text-bg-primary">
  <h5>d-inline-grid</h5>
  グリッド1
</span>
<span class="d-inline-grid p-2 text-bg-dark">
  <h5>d-inline-grid</h5>
  グリッド2
</span>

テーブル表示<div class="d-table">
  <div class="d-table-row">
    <p class="d-table-cell p-2 text-bg-primary">d-table</p>
    <p class="d-table-cell p-2 text-bg-dark">d-table</p>
  </div>
  <div class="d-table-row">
    <p class="d-table-cell p-2 text-bg-primary">d-table</p>
    <p class="d-table-cell p-2 text-bg-dark">d-table</p>
  </div>
</div>

上述した1つのユーティリティごとにもレスポンシブのバリエーションがある。

定義済クラスの種類

要素の表示/非表示（Hiding elements）

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

要素を非表示にするには、.d-none クラスか .d-{sm|md|lg|xl|xxl}-none クラスのいずれかを使用。

指定された画面サイズの間隔でのみ要素を表示するには、.d-*-none クラスを .d-*-* クラスと組み合わせられる（.d-none.d-md-block.d-xl-none は、中規模と大規模のデバイスを除くすべての画面サイズの要素を非表示にするなど）。

見本

設定例

<div class="d-lg-none">lgより広い画面では非表示</div>
<div class="d-none d-lg-block">lgより狭い画面では非表示</div>

主な定義済クラスの組み合わせ

{display} は、inline, inline-block, block, grid, inline-grid, table, table-cell, table-row, flex, inline-flex のいずれかを入れる。

印刷時の表示/非表示（Display in print）

印刷表示ユーティリティクラスで印刷する場合、要素の表示値を変更する。レスポンシブの .d-* ユーティリティと同じ display 値のサポートを含む。

• .d-print-none（印刷時の要素：display: none（非表示））
• .d-print-inline（印刷時の要素：display: inline）
• .d-print-inline-block（印刷時の要素：display: inline-block）
• .d-print-block（印刷時の要素：display: block）
• .d-print-gridv5.0.0-alpha3追加（印刷時の要素：display: grid）
• .d-print-inline-gridv5.3.0追加（印刷時の要素：display: inline-grid）
• .d-print-table（印刷時の要素：display: table）
• .d-print-table-row（印刷時の要素：display: table-row）
• .d-print-table-cell（印刷時の要素：display: table-cell）
• .d-print-flex（印刷時の要素：display: flex）
• .d-print-inline-flex（印刷時の要素：display: inline-flex）

CSS

SassユーティリティAPI（Sass utilities API）v5.0.0-beta2追加、v5.3.0ユーティリティAPIより名称変更

表示ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定

scss/_utilities.scss 内 utils-display の設定"display": (
  responsive: true,
  print: true,
  property: display,
  class: d,
  values: inline inline-block block grid table table-row table-cell flex inline-flex none
),