CSS: responsive

[class*="-hidden-"],[class*="-show-"] — テーマ付きブレークポイント・スケールに沿ったビューポート幅またはコンテナ幅による表示/非表示クラス。

.instui-hidden-max-<bp>/-hidden-min-<bp> はビューポート幅で非表示にする; .instui-show-max-<bp>/-show-min-<bp> は逆（デフォルトで隠れており、display: revert を通じてその範囲内でのみ表示される）; -cq- バリアントはビューポートではなく .instui-container 祖先の幅に反応する。スケール階層 xs/sm/md/lg/xl（IR の tray-width コンポーネント・トークン由来）は、それぞれ長形式の綴り（x-small–x-large）とデバイス名（mobile/phablet/tablet/laptop/desktop）にエイリアスされている — どちらも短い名前が推奨され廃止予定 — と、無スケールのテーマ化された content/content-full-width 階層（メインコンテンツ領域の最大幅）がある。

Source: index.ts

使用法

@import "@pantoken/components/utilities.css";

例

<div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>
<div class="instui-show-min-sm">Shown only at or above the small breakpoint.</div>

修飾子

修飾子	説明
.-cq-hidden-max-content	指定したコンテナが content ブレークポイント（68.75em）以下のときに隠します。
.-cq-hidden-max-content-full-width	指定したコンテナが content-full-width ブレークポイント（98.75em）以下のときに隠します。
.-cq-hidden-max-desktop	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-laptop	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-large	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-lg	指定したコンテナが lg ブレークポイント（48em）以下のときに隠します。
.-cq-hidden-max-md	指定したコンテナが md ブレークポイント（30em）以下のときに隠します。
.-cq-hidden-max-medium	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-mobile	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-phablet	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-sm	指定したコンテナが sm ブレークポイント（20em）以下のときに隠します。
.-cq-hidden-max-small	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-tablet	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-x-large	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-x-small	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-xl	指定したコンテナが xl ブレークポイント（62em）以下のときに隠します。
.-cq-hidden-max-xs	指定したコンテナが xs ブレークポイント（16em）以下のときに隠します。
.-cq-hidden-min-content	指定したコンテナが content ブレークポイント（68.75em）以上のときに隠します。
.-cq-hidden-min-content-full-width	指定したコンテナが content-full-width ブレークポイント（98.75em）以上のときに隠します。
.-cq-hidden-min-desktop	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-laptop	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-large	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-lg	指定したコンテナが lg ブレークポイント（48em）以上のときに隠します。
.-cq-hidden-min-md	指定したコンテナが md ブレークポイント（30em）以上のときに隠します。
.-cq-hidden-min-medium	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-mobile	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-phablet	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-sm	指定したコンテナが sm ブレークポイント（20em）以上のときに隠します。
.-cq-hidden-min-small	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-tablet	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-x-large	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-x-small	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-xl	指定したコンテナが xl ブレークポイント（62em）以上のときに隠します。
.-cq-hidden-min-xs	指定したコンテナが xs ブレークポイント（16em）以上のときに隠します。
.-cq-show-max-content	指定したコンテナが content ブレークポイント（68.75em）以下のときに表示し、それ以外では隠します。
.-cq-show-max-content-full-width	指定したコンテナが content-full-width ブレークポイント（98.75em）以下のときに表示し、それ以外では隠します。
.-cq-show-max-desktop	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-laptop	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-large	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-lg	指定したコンテナが lg ブレークポイント（48em）以下のときに表示し、それ以外では隠します。
.-cq-show-max-md	指定したコンテナが md ブレークポイント（30em）以下のときに表示し、それ以外では隠します。
.-cq-show-max-medium	Alias — maps to .-cq-show-max-md.
.-cq-show-max-mobile	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-phablet	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-sm	指定したコンテナが sm ブレークポイント（20em）以下のときに表示し、それ以外では隠します。
.-cq-show-max-small	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-tablet	Alias — maps to .-cq-show-max-md.
.-cq-show-max-x-large	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-x-small	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-xl	指定したコンテナが xl ブレークポイント（62em）以下のときに表示し、それ以外では隠します。
.-cq-show-max-xs	指定したコンテナが xs ブレークポイント（16em）以下のときに表示し、それ以外では隠します。
.-cq-show-min-content	指定したコンテナが content ブレークポイント（68.75em）以上のときに表示し、それ以外では隠します。
.-cq-show-min-content-full-width	指定したコンテナが content-full-width ブレークポイント（98.75em）以上のときに表示し、それ以外では隠します。
.-cq-show-min-desktop	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-laptop	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-large	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-lg	指定したコンテナが lg ブレークポイント（48em）以上のときに表示し、それ以外では隠します。
.-cq-show-min-md	指定したコンテナが md ブレークポイント（30em）以上のときに表示し、それ以外では隠します。
.-cq-show-min-medium	Alias — maps to .-cq-show-min-md.
.-cq-show-min-mobile	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-phablet	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-sm	指定したコンテナが sm ブレークポイント（20em）以上のときに表示し、それ以外では隠します。
.-cq-show-min-small	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-tablet	Alias — maps to .-cq-show-min-md.
.-cq-show-min-x-large	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-x-small	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-xl	指定したコンテナが xl ブレークポイント（62em）以上のときに表示し、それ以外では隠します。
.-cq-show-min-xs	指定したコンテナが xs ブレークポイント（16em）以上のときに表示し、それ以外では隠します。
.-hidden-max-content	ビューポートが content ブレークポイント（68.75em）以下のときに隠します。
.-hidden-max-content-full-width	ビューポートが content-full-width ブレークポイント（98.75em）以下のときに隠します。
.-hidden-max-desktop	Alias — maps to .-hidden-max-xl.
.-hidden-max-laptop	Alias — maps to .-hidden-max-lg.
.-hidden-max-large	Alias — maps to .-hidden-max-lg.
.-hidden-max-lg	ビューポートが lg ブレークポイント（48em）以下のときに隠します。
.-hidden-max-md	ビューポートが md ブレークポイント（30em）以下のときに隠します。
.-hidden-max-medium	Alias — maps to .-hidden-max-md.
.-hidden-max-mobile	Alias — maps to .-hidden-max-xs.
.-hidden-max-phablet	Alias — maps to .-hidden-max-sm.
.-hidden-max-sm	ビューポートが sm ブレークポイント（20em）以下のときに隠します。
.-hidden-max-small	Alias — maps to .-hidden-max-sm.
.-hidden-max-tablet	Alias — maps to .-hidden-max-md.
.-hidden-max-x-large	Alias — maps to .-hidden-max-xl.
.-hidden-max-x-small	Alias — maps to .-hidden-max-xs.
.-hidden-max-xl	ビューポートが xl ブレークポイント（62em）以下のときに隠します。
.-hidden-max-xs	ビューポートが xs ブレークポイント（16em）以下のときに隠します。
.-hidden-min-content	ビューポートが content ブレークポイント（68.75em）以上のときに隠します。
.-hidden-min-content-full-width	ビューポートが content-full-width ブレークポイント（98.75em）以上のときに隠します。
.-hidden-min-desktop	Alias — maps to .-hidden-min-xl.
.-hidden-min-laptop	Alias — maps to .-hidden-min-lg.
.-hidden-min-large	Alias — maps to .-hidden-min-lg.
.-hidden-min-lg	ビューポートが lg ブレークポイント（48em）以上のときに隠します。
.-hidden-min-md	ビューポートがmdブレークポイント（30em）以上のときに非表示にします。
.-hidden-min-medium	Alias — maps to .-hidden-min-md.
.-hidden-min-mobile	Alias — maps to .-hidden-min-xs.
.-hidden-min-phablet	Alias — maps to .-hidden-min-sm.
.-hidden-min-sm	ビューポートがsmブレークポイント（20em）以上のときに非表示にします。
.-hidden-min-small	Alias — maps to .-hidden-min-sm.
.-hidden-min-tablet	Alias — maps to .-hidden-min-md.
.-hidden-min-x-large	Alias — maps to .-hidden-min-xl.
.-hidden-min-x-small	Alias — maps to .-hidden-min-xs.
.-hidden-min-xl	ビューポートがxlブレークポイント（62em）以上のときに非表示にします。
.-hidden-min-xs	ビューポートがxsブレークポイント（16em）以上のときに非表示にします。
.-show-max-content	ビューポートがcontentブレークポイント（68.75em）以下のときに（-hidden-min-contentの反転として）表示します。その他の場合は非表示です。
.-show-max-content-full-width	ビューポートがcontent-full-widthブレークポイント（98.75em）以下のときに（-hidden-min-content-full-widthの反転として）表示します。その他の場合は非表示です。
.-show-max-desktop	Alias — maps to .-show-max-xl.
.-show-max-laptop	Alias — maps to .-show-max-lg.
.-show-max-large	Alias — maps to .-show-max-lg.
.-show-max-lg	ビューポートがlgブレークポイント（48em）以下のときに（-hidden-min-lgの反転として）表示します。その他の場合は非表示です。
.-show-max-md	ビューポートがmdブレークポイント（30em）以下のときに（-hidden-min-mdの反転として）表示します。その他の場合は非表示です。
.-show-max-medium	Alias — maps to .-show-max-md.
.-show-max-mobile	Alias — maps to .-show-max-xs.
.-show-max-phablet	Alias — maps to .-show-max-sm.
.-show-max-sm	ビューポートがsmブレークポイント（20em）以下のときに（-hidden-min-smの反転として）表示します。その他の場合は非表示です。
.-show-max-small	Alias — maps to .-show-max-sm.
.-show-max-tablet	Alias — maps to .-show-max-md.
.-show-max-x-large	Alias — maps to .-show-max-xl.
.-show-max-x-small	Alias — maps to .-show-max-xs.
.-show-max-xl	ビューポートがxlブレークポイント（62em）以下のときに（-hidden-min-xlの反転として）表示します。その他の場合は非表示です。
.-show-max-xs	ビューポートがxsブレークポイント（16em）以下のときに（-hidden-min-xsの反転として）表示します。その他の場合は非表示です。
.-show-min-content	ビューポートがcontentブレークポイント（68.75em）以上のときに（-hidden-max-contentの反転として）表示します。その他の場合は非表示です。
.-show-min-content-full-width	ビューポートがcontent-full-widthブレークポイント（98.75em）以上のときに（-hidden-max-content-full-widthの反転として）表示します。その他の場合は非表示です。
.-show-min-desktop	Alias — maps to .-show-min-xl.
.-show-min-laptop	Alias — maps to .-show-min-lg.
.-show-min-large	Alias — maps to .-show-min-lg.
.-show-min-lg	ビューポートがlgブレークポイント（48em）以上のときに（-hidden-max-lgの反転として）表示します。その他の場合は非表示です。
.-show-min-md	ビューポートがmdブレークポイント（30em）以上のときに（-hidden-max-mdの反転として）表示します。その他の場合は非表示です。
.-show-min-medium	Alias — maps to .-show-min-md.
.-show-min-mobile	Alias — maps to .-show-min-xs.
.-show-min-phablet	Alias — maps to .-show-min-sm.
.-show-min-sm	ビューポートがsmブレークポイント（20em）以上のときに（-hidden-max-smの反転として）表示します。その他の場合は非表示です。
.-show-min-small	Alias — maps to .-show-min-sm.
.-show-min-tablet	Alias — maps to .-show-min-md.
.-show-min-x-large	Alias — maps to .-show-min-xl.
.-show-min-x-small	Alias — maps to .-show-min-xs.
.-show-min-xl	ビューポートがxlブレークポイント（62em）以上のときに（-hidden-max-xlの反転として）表示します。その他の場合は非表示です。
.-show-min-xs	ビューポートがxsブレークポイント（16em）以上のときに（-hidden-max-xsの反転として）表示します。その他の場合は非表示です。

カスタムプロパティ

プロパティ	型	デフォルト	説明
--pantoken-bp-content	<length>	68.75em	content ブレークポイントの値（68.75em、手作成、テーマ化（トークンIRには含まれません））。これを上書きしても、コンパイル済みの @media/@container 閾値は上に移動しません。
--pantoken-bp-content-full-width	<length>	98.75em	content-full-width ブレークポイントの値（98.75em、手作成、テーマ化（トークンIRには含まれません））。これを上書きしても、コンパイル済みの @media/@container 閾値は上に移動しません。
--pantoken-bp-lg	<length>	48em	lg ブレークポイントの値（48em、--instui-component-tray-width-lg を反映）。これを上書きしても、コンパイル済みの @media/@container 閾値は上に移動しません。
--pantoken-bp-md	<length>	30em	md ブレークポイントの値（30em、--instui-component-tray-width-md を反映）。これを上書きしても、コンパイル済みの @media/@container 閾値は上に移動しません。
--pantoken-bp-sm	<length>	20em	sm ブレークポイントの値（20em、--instui-component-tray-width-sm を反映）。これを上書きしても、コンパイル済みの @media/@container 閾値は上に移動しません。
--pantoken-bp-xl	<length>	62em	xl ブレークポイントの値（62em、--instui-component-tray-width-xl を反映）。これを上書きしても、コンパイル済みの @media/@container 閾値は上に移動しません。
--pantoken-bp-xs	<length>	16em	xs ブレークポイントの値（16em、--instui-component-tray-width-xs を反映）。これを上書きしても、コンパイル済みの @media/@container 閾値は上に移動しません。

条件

型	クエリ	説明
media	(max-width: 16em)	xs ブレークポイントの上限。
media	(min-width: 16em)	xs ブレークポイントの下限。
media	(max-width: 20em)	sm ブレークポイントの上限。
media	(min-width: 20em)	sm ブレークポイントの下限。
media	(max-width: 30em)	md ブレークポイントの上限。
media	(min-width: 30em)	md ブレークポイントの下限。
media	(max-width: 48em)	lg ブレークポイントの上限。
media	(min-width: 48em)	lg ブレークポイントの下限。
media	(max-width: 62em)	xl ブレークポイントの上限。
media	(min-width: 62em)	xl ブレークポイントの下限。
media	(max-width: 68.75em)	content ブレークポイントの上限。
media	(min-width: 68.75em)	content ブレークポイントの下限。
media	(max-width: 98.75em)	content-full-width ブレークポイントの上限。
media	(min-width: 98.75em)	content-full-width ブレークポイントの下限。
container	(max-width: 16em)	xs ブレークポイントの上限（マークされたコンテナに対して評価）。
container	(min-width: 16em)	xs ブレークポイントの下限（マークされたコンテナに対して評価）。
container	(max-width: 20em)	sm ブレークポイントの上限（マークされたコンテナに対して評価）。
container	(min-width: 20em)	sm ブレークポイントの下限（マークされたコンテナに対して評価）。
container	(max-width: 30em)	マークされたコンテナに対して評価されるmdブレークポイントの上限。
container	(min-width: 30em)	マークされたコンテナに対して評価されるmdブレークポイントの下限。
container	(max-width: 48em)	マークされたコンテナに対して評価されるlgブレークポイントの上限。
container	(min-width: 48em)	マークされたコンテナに対して評価されるlgブレークポイントの下限。
container	(max-width: 62em)	マークされたコンテナに対して評価されるxlブレークポイントの上限。
container	(min-width: 62em)	マークされたコンテナに対して評価されるxlブレークポイントの下限。
container	(max-width: 68.75em)	マークされたコンテナに対して評価されるcontentブレークポイントの上限。
container	(min-width: 68.75em)	マークされたコンテナに対して評価されるcontentブレークポイントの下限。
container	(max-width: 98.75em)	マークされたコンテナに対して評価されるcontent-full-widthブレークポイントの上限。
container	(min-width: 98.75em)	マークされたコンテナに対して評価されるcontent-full-widthブレークポイントの下限。

使用トークン

Token	型	値
--instui-component-tray-width-lg	<length>	48em
--instui-component-tray-width-md	<length>	30em
--instui-component-tray-width-sm	<length>	20em
--instui-component-tray-width-xl	<length>	62em
--instui-component-tray-width-xs	<length>	16em