表示非表示
デバイス別
表示種類
| 表示方法 |
クラス名 |
| 表示する |
acms-show-* |
| 表示しない |
acms-hide-* |
各デバイス別
| デバイス |
クラス名 |
| スマートフォン |
acms-*-sp |
| タブレット |
acms-*-tablet |
| PC |
acms-*-pc |
<div class="acms-show-sp">表示します<div>
<div class="acms-show-tablet">表示します<div>
<div class="acms-show-pc">表示します<div>
画面幅別
表示種類
| 表示方法 |
クラス名 |
| block表示 |
.acms-block |
| inline表示 |
.acms-inline |
| inline-block表示 |
.acms-inline-block |
| table-cell表示 |
.acms-table-cell |
| 非表示 |
.acms-hide |
<div class="acms-block">表示します<div>
<div class="acms-inline">表示します<div>
<div class="acms-inline-block">表示します<div>
<div class="acms-table-cell">表示します<div>
<div class="acms-hide">非表示にします<div>
各画面幅別
| 画面幅 |
クラス名 |
| デフォルト |
そのまま |
| 479px以下 |
acms-*-xs |
| 480px以上、767px以下 |
acms-*-sm |
| 768px以上、1023px以下 |
acms-*-md |
| 1024px以上、1439px以下 |
acms-*-lg |
| 1440px以上 |
acms-*-xl |
<div class="acms-block">常に表示します<div>
<div class="acms-block-xs">479以下で表示します<div>
<div class="acms-block-sm">480px以上、767px以下で表示します<div>
<div class="acms-block-md">768px以上、1023px以下で表示します<div>
<div class="acms-block-lg">1024px以上、1439px以下で表示します<div>
<div class="acms-block-xl">1440px以上で表示します<div>
プリント用
| 表示方法 |
クラス名 |
| block表示 |
acms-print-block |
| inline表示 |
acms-print-inline |
| inline-block表示 |
acms-print-inline-block |
| 表示しない |
acms-print-hide |
<div class="acms-print-block">表示します<div>
<div class="acms-print-inline">表示します<div>
<div class="acms-print-inline-block">表示します<div>
<div class="acms-print-hide">非表示にします<div>