utility-hidden

u-hidden

常に要素を非表示にする。スクリーンリーダーに対応する場合は .u-sr を使用すること。

u-hidden-(breakpoint)-up

(breakpoint)で指定した画面幅以上で要素を非表示にする。特性上、u-hidden-xs-upはない。

u-hidden-sm-up
u-hidden-md-up
u-hidden-lg-up
u-hidden-xl-up
u-hidden-xxl-up
<div class="u-hidden-sm-up" style="margin-bottom: 1rem;"><span class="m-btn m-btn-first">u-hidden-sm-up</span></div>
<div class="u-hidden-md-up" style="margin-bottom: 1rem;"><span class="m-btn m-btn-second">u-hidden-md-up</span></div>
<div class="u-hidden-lg-up" style="margin-bottom: 1rem;"><span class="m-btn m-btn-third">u-hidden-lg-up</span></div>
<div class="u-hidden-xl-up" style="margin-bottom: 1rem;"><span class="m-btn m-btn-fourth">u-hidden-xl-up</span></div>
<div class="u-hidden-xxl-up" style="margin-bottom: 1rem;"><span class="m-btn m-btn-important">u-hidden-xxl-up</span></div>

u-hidden-(breakpoint)-down

(breakpoint)で指定した画面幅未満で要素を非表示にする。特性上、u-hidden-xxl-downはない。

u-hidden-xs-down
u-hidden-sm-down
u-hidden-md-down
u-hidden-lg-down
u-hidden-xl-down
<div class="u-hidden-xs-down" style="margin-bottom: 1rem;"><span class="m-btn m-btn-first">u-hidden-xs-down</span></div>
<div class="u-hidden-sm-down" style="margin-bottom: 1rem;"><span class="m-btn m-btn-second">u-hidden-sm-down</span></div>
<div class="u-hidden-md-down" style="margin-bottom: 1rem;"><span class="m-btn m-btn-third">u-hidden-md-down</span></div>
<div class="u-hidden-lg-down" style="margin-bottom: 1rem;"><span class="m-btn m-btn-fourth">u-hidden-lg-down</span></div>
<div class="u-hidden-xl-down" style="margin-bottom: 1rem;"><span class="m-btn m-btn-important">u-hidden-xl-down</span></div>