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

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

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

概要(Overview)

可視性ユーティリティで要素の 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を削除

 

Sass v5.0.0-beta3追加

ユーティリティAPI(Utilities API)

可視性ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらを参照。

デフォルトの設定
scss/_utilities.scss 内 utils-visibility の設定    "visibility": (
      property: visibility,
      class: null,
      values: (
        visible: visible,
        invisible: hidden,
      )
    )