| 表示方法 | クラス名 |
|---|---|
| 表示する | %{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>