メインコンテンツへスキップ

表示ユーティリティ(Display property) v5.0.0-alpha3クラス追加

表示ユーティリティを使用して、コンポーネントの display の値をすばやくレスポンシブに切り替えることが可能。より一般的な値の一部と、印刷時の display を制御するための追加機能を含む。

目次

使い方(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;
  • grid v5.0.0-alpha3追加:グリッド表示(display: 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/_variables.scss 内の $displays 変数を変更してSCSSを再コンパイルすることで変更可能。

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

 

実例(Examples)

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

●インライン表示 .d-inline

d-inline
d-inline

●ブロック表示 .d-block

d-block d-block

●グリッド表示 .d-grid

d-grid d-grid

●インライン・ブロック表示 .d-inline-block

d-inline-block

ブロック1

d-inline-block

ブロック2

●テーブル表示 .d-table, .d-table-cell, .d-table-row

d-table

d-table

d-table

d-table

※flexコンテナ表示とflexインラインコンテナ表示の見本は、Flex動作を有効にするに記載。

設定例
インライン表示<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
ブロック表示<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
グリッド表示<span class="d-grid p-2 bg-primary text-white">d-grid</span>
<span class="d-grid p-2 bg-dark text-white">d-grid</span>
インライン・ブロック表示<div class="d-inline-block p-2 bg-primary text-white">
	<h3>d-inline-block</h3>
	ブロック1
</div>
<div class="d-inline-block p-2 bg-dark text-white">
	<h3>d-inline-block</h3>
	ブロック2
</div>
テーブル表示<div class="d-table">
	<div class="d-table-row">
		<p class="d-table-cell p-2 bg-primary text-white">d-table</p>
		<p class="d-table-cell p-2 bg-dark text-white">d-table</p>
	</div>
	<div class="d-table-row">
		<p class="d-table-cell p-2 bg-primary text-white">d-table</p>
		<p class="d-table-cell p-2 bg-dark text-white">d-table</p>
	</div>
</div>

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

定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
非表示 .d-none .d-sm-none .d-md-none .d-lg-none .d-xl-none .d-xxl-none
インライン表示 .d-inline .d-sm-inline .d-md-inline .d-lg-inline .d-xl-inline .d-xxl-inline
インライン・ブロック表示 .d-inline-block .d-sm-inline-block .d-md-inline-block .d-lg-inline-block .d-xl-inline-block .d-xxl-inline-block
ブロック表示 .d-block .d-sm-block .d-md-block .d-lg-block .d-xl-block .d-xxl-block
グリッド表示
v5.0.0-alpha3追加
.d-grid .d-sm-grid .d-md-grid .d-lg-grid .d-xl-grid .d-xxl-grid
テーブル表示 .d-table .d-sm-table .d-md-table .d-lg-table .d-xl-table .d-xxl-table
テーブル行表示 .d-table-row .d-sm-table-row .d-md-table-row .d-lg-table-row .d-xl-table-row .d-xxl-table-row
テーブルセル表示 .d-table-cell .d-sm-table-cell .d-md-table-cell .d-lg-table-cell .d-xl-table-cell .d-xxl-table-cell
flexコンテナ表示 .d-flex .d-sm-flex .d-md-flex .d-lg-flex .d-xl-flex .d-xxl-flex
flexインラインコンテナ表示 .d-inline-flex .d-sm-inline-flex .d-md-inline-flex .d-lg-inline-flex .d-xl-inline-flex .d-xxl-inline-flex
【設定】
  • 非表示(要素自体を隠す):.d(-{breakpoint})-none
  • インライン(横並び)表示:.d(-{breakpoint})-inline
  • インライン・ブロック(横並びで幅や高さも持たせる)表示:.d(-{breakpoint})-inline-block
  • ブロック(縦積み)表示:.d(-{breakpoint})-block
  • グリッド表示:.d(-{breakpoint})-grid
  • テーブル表示(<table> のような表示):.d(-{breakpoint})-table
  • テーブル行表示(<tr> のような表示):.d(-{breakpoint})-table-row
  • テーブルセル表示(<td> のような表示):.d(-{breakpoint})-table-cell
  • flexコンテナ表示(Flexboxレイアウトによる表示):.d(-{breakpoint})-flex
  • flexインラインコンテナ表示(Flexboxレイアウトによる表示):.d(-{breakpoint})-inline-flex
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .d-xxl-{value} が追加
  • 【v5.0.0-alpha3】
    • .d(-{breakpoint})-grid が追加

 

要素の表示/非表示(Hiding elements)

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

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

指定された画面サイズの間隔でのみ要素を表示するには、.d-*-none クラスを .d-*-* クラスと組み合わせ可能(.d-none.d-md-block.d-xl-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より狭い画面では非表示
設定例
<div class="d-lg-none">lgより広い画面では非表示</div>
<div class="d-none d-lg-block">lgより狭い画面では非表示</div>

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

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

クラス/ビューポートの幅 極小
<576px

576px - 767.98px

768px - 991.98px

992px - 1199.98px
特大
1200px - 1399.98px
超特大
≥1400px
.d-{display} [表示] [表示] [表示] [表示] [表示] [表示]
.d-none [非表示] [非表示] [非表示] [非表示] [非表示] [非表示]
.d-{display}.d-sm-none [表示] [非表示] [非表示] [非表示] [非表示] [非表示]
.d-{display}.d-md-none [表示] [表示] [非表示] [非表示] [非表示] [非表示]
.d-{display}.d-lg-none [表示] [表示] [表示] [非表示] [非表示] [非表示]
.d-{display}.d-xl-none [表示] [表示] [表示] [表示] [非表示] [非表示]
.d-{display}.d-xxl-none [表示] [表示] [表示] [表示] [表示] [非表示]
.d-none.d-sm-{display} [非表示] [表示] [表示] [表示] [表示] [表示]
.d-none.d-md-{display} [非表示] [非表示] [表示] [表示] [表示] [表示]
.d-none.d-lg-{display} [非表示] [非表示] [非表示] [表示] [表示] [表示]
.d-none.d-xl-{display} [非表示] [非表示] [非表示] [非表示] [表示] [表示]
.d-none.d-xxl-{display} [非表示] [非表示] [非表示] [非表示] [非表示] [表示]
.d-none.d-sm-{display}.d-md-none [非表示] [表示] [非表示] [非表示] [非表示] [非表示]
.d-none.d-md-{display}.d-lg-none [非表示] [非表示] [表示] [非表示] [非表示] [非表示]
.d-none.d-lg-{display}.d-xl-none [非表示] [非表示] [非表示] [表示] [非表示] [非表示]
.d-none.d-xl-{display}.d-xxl-none [非表示] [非表示] [非表示] [非表示] [表示] [非表示]
クラス/ビューポートの幅 極小
<576px

576px - 767.98px

768px - 991.98px

992px - 1199.98px
特大
1200px - 1399.98px
超特大
≥1400px
.d-none.d-sm-{display}.d-lg-none [非表示] [表示] [表示] [非表示] [非表示] [非表示]
.d-none.d-sm-{display}.d-xl-none [非表示] [表示] [表示] [表示] [非表示] [非表示]
.d-none.d-sm-{display}.d-xxl-none [非表示] [表示] [表示] [表示] [表示] [非表示]
.d-{display}.d-sm-none.d-md-{display} [表示] [非表示] [表示] [表示] [表示] [表示]
.d-{display}.d-sm-none.d-lg-{display} [表示] [非表示] [非表示] [表示] [表示] [表示]
.d-{display}.d-sm-none.d-xl-{display} [表示] [非表示] [非表示] [非表示] [表示] [表示]
.d-{display}.d-sm-none.d-xxl-{display} [表示] [非表示] [非表示] [非表示] [非表示] [表示]
.d-none.d-md-{display}.d-xl-none [非表示] [非表示] [表示] [表示] [非表示] [非表示]
.d-none.d-md-{display}.d-xxl-none [非表示] [非表示] [表示] [表示] [表示] [非表示]
.d-{display}.d-md-none.d-lg-{display} [表示] [表示] [非表示] [表示] [表示] [表示]
.d-{display}.d-md-none.d-xl-{display} [表示] [表示] [非表示] [非表示] [表示] [表示]
.d-{display}.d-md-none.d-xxl-{display} [表示] [表示] [非表示] [非表示] [非表示] [表示]
.d-none.d-lg-{display}.d-xxl-none [非表示] [非表示] [非表示] [表示] [表示] [非表示]
.d-{display}.d-lg-none.d-xl-{display} [表示] [表示] [表示] [非表示] [表示] [表示]
.d-{display}.d-lg-none.d-xxl-{display} [表示] [表示] [表示] [非表示] [非表示] [表示]
.d-{display}.d-xl-none.d-xxl-{display} [表示] [表示] [表示] [表示] [非表示] [表示]

 

印刷時の表示/非表示(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-grid v5.0.0-alpha3追加(印刷時の要素:display: 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;
【設定】
  • 印刷時に表示を切り替えたい要素に上記のクラスを入れる
【変更履歴】
  • 【v5.0.0-alpha3】
    • .d-print-grid が追加

 

Sass v5.0.0-beta2追加

ユーティリティAPI(Utilities 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
		),