表示非表示
デバイス別
表示種類
表示方法 |
クラス名 |
表示する |
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>