デザインコンポーネント - 表示制御

使用するオプション

• MFセクショングループ
• MFセクション

MFセクションの表示非表示を切り替える

MFセクションのレイアウトオプション（mf-hide）でPCでページを開いた場合にMFセクションを非表示にすることができます。

ソースコード

HTML

<hr class="mf-hr mf-col-1" style="display: none">

<section>
    <div><h2>PC、スマートフォン両方で表示</h2></div>
</section>

<section class="mf-hide">
    <div><h2>スマートフォンのみ表示</h2></div>
</section>

CSS

div {
    background: #ccffcc;
    display: table;
    width: 100%;
    height: 200px;
    text-align: center;
}
.mf-hide div {
    background: #ccccff;
    display: table;
    width: 100%;
    height: 200px;
    text-align: center;
}
h2 {
    display: table-cell;
    vertical-align: middle;
}