可視性

表示は変更せずに、可視性を変更します。

可視性ユーティリティを使って要素のvisibilityを設定します。これはdisplayの値を変更せず、レイアウトにも影響しません。.invisible要素はページ内のレイアウトを保持します。

.invisibleクラスを持つ要素は、視覚的にも、支援技術/スクリーン・リーダー・ユーザーのためにも隠されます。

必要に応じて.visibleまたは.invisibleを適用してください。

<div class="visible">...</div>
<div class="invisible">...</div>

// Class
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}

CSS

可視化ユーティリティは、ユーティリティAPIのscss/_utilities.scssで宣言されています。ユーティリティAPIの使い方はこちら

"visibility": (
  property: visibility,
  class: null,
  values: (
    visible: visible,
    invisible: hidden,
  )
),