メインコンテンツへスキップ

可視性ユーティリティ(Visibility)

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

可視性ユーティリティで要素の visibility を設定。これらのユーティリティクラスは、 display の値を全く変更せず、レイアウトに影響を与えない。.invisible 要素はまだページ内にスペースを残す。コンテンツは、視覚的にも支援技術/スクリーンリーダーのユーザーにも表示しない。

必要に応じて .visible.invisible を適用する。

見本

●表示:.visiblevisibility: visible

表示される

●非表示(領域自体は表示):.invisiblevisibility: hidden

設定例
表示<div class="visible">表示される</div>
非表示(領域自体は表示)<div class="invisible">表示されません</div>
Sassでの設定// クラス
.visible {
	visibility: visible !important;
}
.invisible {
	visibility: hidden !important;
}
【設定】
【変更履歴】
  • 【v5.0.0-alpha1】
    • invisible() mixinを削除