v7.1.0

Display

Table of Contents

Detail

共通モディファイアで display プロパティを変更するユーティリティ CSS。

Basic

.is-(value) の形式で利用します。

BlockInlineInline BlockNone
.is-block.is-inline.is-inline-block.is-none

Media Query

.is-(mediaquery)-(value) の形式で Media Query に応じた display プロパティの変更を行えます。

Mobile First

BlockInlineInline BlockNone
.is-mobile-block.is-mobile-inline.is-mobile-inline-block.is-mobile-inline-none
.is-fablet-block.is-fablet-inline.is-fablet-inline-block.is-fablet-inline-none
.is-tablet-block.is-tablet-inline.is-tablet-inline-block.is-tablet-inline-none
.is-desktop-block.is-desktop-inline.is-desktop-inline-block.is-desktop-inline-none
.is-wide-block.is-wide-inline.is-wide-inline-block.is-wide-inline-none

Size Only

Option の $option-add-style-display-only を true にすると、ウィンドウサイズを限定した display プロパティの適応が可能になります。

BlockInlineInline BlockNone
.is-iphone5-only-block.is-iphone5-only-inline.is-iphone5-only-inline-block.is-iphone5-only-none
.is-mobile-only-block.is-mobile-only-inline.is-mobile-only-inline-block.is-mobile-only-none
.is-fablet-only-block.is-fablet-only-inline.is-fablet-only-inline-block.is-fablet-only-none
.is-tablet-only-block.is-tablet-only-inline.is-tablet-only-inline-block.is-tablet-only-none
.is-desktop-only-block.is-desktop-only-inline.is-desktop-only-inline-block.is-desktop-only-none

Landscape

Option の $option-add-style-display-landscape を true にすると、横向きに限定した display プロパティの適応が可能になります。（all 無しは Tablet サイズ以下のみ）

BlockInlineInline BlockNone
.is-landscape-block.is-landscape-inline.is-landscape-inline-block.is-landscape-none
.is-landscape-all-block.is-landscape-all-inline.is-landscape-all-inline-block.is-landscape-all-none

Portrait

Option の $option-add-style-display-portrait を true にすると、縦向きに限定した display プロパティの適応が可能になります。（all 無しは Tablet サイズ以下のみ）

BlockInlineInline BlockNone
.is-portrait-block.is-portrait-inline.is-portrait-inline-block.is-portrait-none
.is-portrait-all-block.is-portrait-all-inline.is-portrait-all-inline-block.is-portrait-all-none

Browser

Option の $option-add-style-display-browser を true にすると、ブラウザを限定した display プロパティの適応が可能になります。

BlockInlineInline BlockNone
.is-chrome-block.is-chrome-inline.is-chrome-inline-block.is-chrome-none
.is-firefox-block.is-firefox-inline.is-firefox-inline-block.is-firefox-none
.is-edge-block.is-edge-inline.is-edge-inline-block.is-edge-none
.is-ie-block.is-ie-inline.is-ie-inline-block.is-ie-none

Important

Option の $option-important-display を true にすると、全プロパティに !important を付与できます。

Variables

Name
Default Value
  • Name
    $modifier-display-block
    Default Value
    .is-block
  • Name
    $modifier-display-inline
    Default Value
    .is-inline
  • Name
    $modifier-display-inline-block
    Default Value
    .is-inline-block
  • Name
    $modifier-display-none
    Default Value
    .is-none
  • Name
    $modifier-display-mobile-block
    Default Value
    .is-mobile-block
  • Name
    $modifier-display-mobile-inline
    Default Value
    .is-mobile-inline
  • Name
    $modifier-display-mobile-inline-block
    Default Value
    .is-mobile-inline-block
  • Name
    $modifier-display-mobile-none
    Default Value
    .is-mobile-none
  • Name
    $modifier-display-fablet-block
    Default Value
    .is-fablet-block
  • Name
    $modifier-display-fablet-inline
    Default Value
    .is-fablet-inline
  • Name
    $modifier-display-fablet-inline-block
    Default Value
    .is-fablet-inline-block
  • Name
    $modifier-display-fablet-none
    Default Value
    .is-fablet-none
  • Name
    $modifier-display-tablet-block
    Default Value
    .is-tablet-block
  • Name
    $modifier-display-tablet-inline
    Default Value
    .is-tablet-inline
  • Name
    $modifier-display-tablet-inline-block
    Default Value
    .is-tablet-inline-block
  • Name
    $modifier-display-tablet-none
    Default Value
    .is-tablet-none
  • Name
    $modifier-display-desktop-block
    Default Value
    .is-desktop-block
  • Name
    $modifier-display-desktop-inline
    Default Value
    .is-desktop-inline
  • Name
    $modifier-display-desktop-inline-block
    Default Value
    .is-desktop-inline-block
  • Name
    $modifier-display-desktop-none
    Default Value
    .is-desktop-none
  • Name
    $modifier-display-wide-block
    Default Value
    .is-wide-block
  • Name
    $modifier-display-wide-inline
    Default Value
    .is-wide-inline
  • Name
    $modifier-display-wide-inline-block
    Default Value
    .is-wide-inline-block
  • Name
    $modifier-display-wide-none
    Default Value
    .is-wide-none
  • Name
    $modifier-display-iphone5-only-block
    Default Value
    .is-iphone5-only-block
  • Name
    $modifier-display-iphone5-only-inline
    Default Value
    .is-iphone5-only-inline
  • Name
    $modifier-display-iphone5-only-inline-block
    Default Value
    .is-iphone5-only-inline-block
  • Name
    $modifier-display-iphone5-only-none
    Default Value
    .is-iphone5-only-none
  • Name
    $modifier-display-mobile-only-block
    Default Value
    .is-mobile-only-block
  • Name
    $modifier-display-mobile-only-inline
    Default Value
    .is-mobile-only-inline
  • Name
    $modifier-display-mobile-only-inline-block
    Default Value
    .is-mobile-only-inline-block
  • Name
    $modifier-display-mobile-only-none
    Default Value
    .is-mobile-only-none
  • Name
    $modifier-display-fablet-only-block
    Default Value
    .is-fablet-only-block
  • Name
    $modifier-display-fablet-only-inline
    Default Value
    .is-fablet-only-inline
  • Name
    $modifier-display-fablet-only-inline-block
    Default Value
    .is-fablet-only-inline-block
  • Name
    $modifier-display-fablet-only-none
    Default Value
    .is-fablet-only-none
  • Name
    $modifier-display-tablet-only-block
    Default Value
    .is-tablet-only-block
  • Name
    $modifier-display-tablet-only-inline
    Default Value
    .is-tablet-only-inline
  • Name
    $modifier-display-tablet-only-inline-block
    Default Value
    .is-tablet-only-inline-block
  • Name
    $modifier-display-tablet-only-none
    Default Value
    .is-tablet-only-none
  • Name
    $modifier-display-desktop-only-block
    Default Value
    .is-desktop-only-block
  • Name
    $modifier-display-desktop-only-inline
    Default Value
    .is-desktop-only-inline
  • Name
    $modifier-display-desktop-only-inline-block
    Default Value
    .is-desktop-only-inline-block
  • Name
    $modifier-display-desktop-only-none
    Default Value
    .is-desktop-only-none
  • Name
    $modifier-display-landscape-block
    Default Value
    .is-landscape-block
  • Name
    $modifier-display-landscape-inline
    Default Value
    .is-landscape-inline
  • Name
    $modifier-display-landscape-inline-block
    Default Value
    .is-landscape-inline-block
  • Name
    $modifier-display-landscape-none
    Default Value
    .is-landscape-none
  • Name
    $modifier-display-landscape-all-block
    Default Value
    .is-landscape-all-block
  • Name
    $modifier-display-landscape-all-inline
    Default Value
    .is-landscape-all-inline
  • Name
    $modifier-display-landscape-all-inline-block
    Default Value
    .is-landscape-all-inline-block
  • Name
    $modifier-display-landscape-all-none
    Default Value
    .is-landscape-all-none
  • Name
    $modifier-display-portrait-block
    Default Value
    .is-portrait-block
  • Name
    $modifier-display-portrait-inline
    Default Value
    .is-portrait-inline
  • Name
    $modifier-display-portrait-inline-block
    Default Value
    .is-portrait-inline-block
  • Name
    $modifier-display-portrait-none
    Default Value
    .is-portrait-none
  • Name
    $modifier-display-portrait-all-block
    Default Value
    .is-portrait-all-block
  • Name
    $modifier-display-portrait-all-inline
    Default Value
    .is-portrait-all-inline
  • Name
    $modifier-display-portrait-all-inline-block
    Default Value
    .is-portrait-all-inline-block
  • Name
    $modifier-display-portrait-all-none
    Default Value
    .is-portrait-all-none
  • Name
    $modifier-display-chrome-block
    Default Value
    .is-chrome-block
  • Name
    $modifier-display-chrome-inline
    Default Value
    .is-chrome-inline
  • Name
    $modifier-display-chrome-inline-block
    Default Value
    .is-chrome-inline-block
  • Name
    $modifier-display-chrome-none
    Default Value
    .is-chrome-none
  • Name
    $modifier-display-firefox-block
    Default Value
    .is-firefox-block
  • Name
    $modifier-display-firefox-inline
    Default Value
    .is-firefox-inline
  • Name
    $modifier-display-firefox-inline-block
    Default Value
    .is-firefox-inline-block
  • Name
    $modifier-display-firefox-none
    Default Value
    .is-firefox-none
  • Name
    $modifier-display-edge-block
    Default Value
    .is-edge-block
  • Name
    $modifier-display-edge-inline
    Default Value
    .is-edge-inline
  • Name
    $modifier-display-edge-inline-block
    Default Value
    .is-edge-inline-block
  • Name
    $modifier-display-edge-none
    Default Value
    .is-edge-none
  • Name
    $modifier-display-ie-block
    Default Value
    .is-ie-block
  • Name
    $modifier-display-ie-inline
    Default Value
    .is-ie-inline
  • Name
    $modifier-display-ie-inline-block
    Default Value
    .is-ie-inline-block
  • Name
    $modifier-display-ie-none
    Default Value
    .is-ie-none
  • Name
    $display-important
    Default Value
    if( $option-important-display == true, !important, null )

Mixins

  • musubii-style-display-block()
  • musubii-style-display-inline()
  • musubii-style-display-inline-block()
  • musubii-style-display-none()

Sources