表示の制御

デバイス別

表示種類

表示方法 クラス名
表示する %{STYLEGUIDE_PAGE}-show-*
表示しない %{STYLEGUIDE_PAGE}-hide-*

各デバイス別

デバイス クラス名
スマートフォン %{STYLEGUIDE_PAGE}-*-sp
タブレット %{STYLEGUIDE_PAGE}-*-tablet
PC %{STYLEGUIDE_PAGE}-*-pc
<div class="%{STYLEGUIDE_PAGE}-show-sp">表示します<div>
<div class="%{STYLEGUIDE_PAGE}-show-tablet">表示します<div>
<div class="%{STYLEGUIDE_PAGE}-show-pc">表示します<div>

画面幅別

表示種類

表示方法 クラス名
block表示 .%{STYLEGUIDE_PAGE}-block
inline表示 .%{STYLEGUIDE_PAGE}-inline
inline-block表示 .%{STYLEGUIDE_PAGE}-inline-block
table-cell表示 .%{STYLEGUIDE_PAGE}-table-cell
非表示 .%{STYLEGUIDE_PAGE}-hide
<div class="%{STYLEGUIDE_PAGE}-block">表示します<div>
<div class="%{STYLEGUIDE_PAGE}-inline">表示します<div>
<div class="%{STYLEGUIDE_PAGE}-inline-block">表示します<div>
<div class="%{STYLEGUIDE_PAGE}-table-cell">表示します<div>
<div class="%{STYLEGUIDE_PAGE}-hide">非表示にします<div>

各画面幅別

画面幅 クラス名
デフォルト そのまま
479px以下 %{STYLEGUIDE_PAGE}-*-xs
480px以上、767px以下 %{STYLEGUIDE_PAGE}-*-sm
768px以上、1023px以下 %{STYLEGUIDE_PAGE}-*-md
1024px以上、1439px以下 %{STYLEGUIDE_PAGE}-*-lg
1440px以上 %{STYLEGUIDE_PAGE}-*-xl
<div class="%{STYLEGUIDE_PAGE}-block">常に表示します<div>
<div class="%{STYLEGUIDE_PAGE}-block-xs">479以下で表示します<div>
<div class="%{STYLEGUIDE_PAGE}-block-sm">480px以上、767px以下で表示します<div>
<div class="%{STYLEGUIDE_PAGE}-block-md">768px以上、1023px以下で表示します<div>
<div class="%{STYLEGUIDE_PAGE}-block-lg">1024px以上、1439px以下で表示します<div>
<div class="%{STYLEGUIDE_PAGE}-block-xl">1440px以上で表示します<div>

プリント用

表示方法 クラス名
block表示 %{STYLEGUIDE_PAGE}-print-block
inline表示 %{STYLEGUIDE_PAGE}-print-inline
inline-block表示 %{STYLEGUIDE_PAGE}-print-inline-block
表示しない %{STYLEGUIDE_PAGE}-print-hide
<div class="%{STYLEGUIDE_PAGE}-print-block">表示します<div>
<div class="%{STYLEGUIDE_PAGE}-print-inline">表示します<div>
<div class="%{STYLEGUIDE_PAGE}-print-inline-block">表示します<div>
<div class="%{STYLEGUIDE_PAGE}-print-hide">非表示にします<div>

アクセシビリティ用

視覚的に表示はされませんが、音声で出力します。

表示方法 クラス名
デフォルト %{STYLEGUIDE_PAGE}-hide-visually
479px以下 %{STYLEGUIDE_PAGE}-hide-visually-xs
480px以上、767px以下 %{STYLEGUIDE_PAGE}-hide-visually-sm
768px以上、1023px以下 %{STYLEGUIDE_PAGE}-hide-visually-md
1024px以上、1439px以下 %{STYLEGUIDE_PAGE}-hide-visually-lg
1440px以上 %{STYLEGUIDE_PAGE}-hide-visually-xl
<div class="%{STYLEGUIDE_PAGE}-hide-visually">常に視覚的には表示されません<div>
<div class="%{STYLEGUIDE_PAGE}-hide-visually-xs">479以下で視覚的には表示されません<div>
<div class="%{STYLEGUIDE_PAGE}-hide-visually-sm">480px以上、767px以下で視覚的には表示されません<div>
<div class="%{STYLEGUIDE_PAGE}-hide-visually-md">768px以上、1023px以下で視覚的には表示されません<div>
<div class="%{STYLEGUIDE_PAGE}-hide-visually-lg">1024px以上、1439px以下で視覚的には表示されません<div>
<div class="%{STYLEGUIDE_PAGE}-hide-visually-xl">1440px以上で視覚的には表示されません<div>