可視性ユーティリティ（Visibility）
可視性ユーティリティを使用して、表示を変更せずに要素の可視性を制御。
※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目
概要（Overview）
可視性ユーティリティで要素の visibility を設定。これらのユーティリティクラスは、display の値を全く変更せず、レイアウトに影響を与えない。.invisible 要素はまだページ内にスペースを残す。コンテンツは、視覚的にも支援技術/スクリーンリーダーのユーザーにも表示しない。
.invisible クラスを持つ要素は、視覚的や支援技術/スクリーンリーダーユーザーのために両方非表示になる。
必要に応じて .visible か .invisible を適用する。
見本
表示：.visible（visibility: visible）
表示される
非表示（領域自体は表示）：.invisible（visibility: hidden）
表示されません
設定例
表示<div class="visible">表示される</div>
非表示（領域自体は表示）<div class="invisible">表示されません</div>
Sassでの設定// クラス
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}
【設定】
- 表示したい要素に
.visible、非表示にしたい要素に.invisibleを入れる - 要素に
[hidden]属性を入れることによって非表示にもできるが、jQueryとの互換性がなく特に推奨していない
【変更履歴】
- 【v5.0.0-alpha1】
invisible()ミックスインを削除
CSS
SassユーティリティAPI（Sass utilities API）v5.0.0-beta3追加、v5.3.0ユーティリティAPIより名称変更
可視性ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。
デフォルトの設定
scss/_utilities.scss 内 utils-visibility の設定"visibility": (
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
)