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>