可視性

表示ユーティリティを使用して、要素の表示を変更せずに可視性を制御します。

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

.invisibleクラスを持つ要素は、視覚的にも、支援技術/スクリーンリーダーのユーザーにとっても非表示になります。

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

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

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

CSS

可視性ユーティリティは、scss/_utilities.scssのユーティリティAPIで宣言されています。ユーティリティAPIの使用方法について学習します。

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