可視性 Visibility

displayを変更することなく、visibilityユーティリティで要素の可視性を制御します。

visibilityユーティリティで要素のvisibilityを設定します。これらのユーティリティクラスはdisplay値をまったく変更せず、レイアウトに影響を与えません。.invisible要素はページ内でスペースを占有したままです。

.invisibleクラスを持つ要素は、視覚的におよび支援技術/スクリーンリーダーユーザーの両方に対して非表示になります。

必要に応じて.visibleまたは.invisibleを適用します。

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

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

CSS

Visibilityユーティリティは、scss/_utilities.scssのutilities APIで宣言されています。utilities APIの使用方法を学びます。

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