表示制御

スマートフォンサイトのみで表示するMFセクションを指定することができます。

このサンプルで使用するオプション

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

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

プレビュー

スマートフォン上での表示 (変換前)

このプレビューは、横幅480pxの画面を50%に縮小して表示しています。

PREVIEW
パソコン上での表示 (変換後)

このプレビューは、横幅1372pxの画面を50%に縮小して表示しています。

PREVIEW

新しいウィンドウで開く

ソースコード

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;
}