MFセクション

MF セクションとは、GCモバイルファーストが扱う HTML ブロックの最小単位です。多彩なレイアウトオプションを指定することができます。

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

MFセクションを配置する

MFセクションのGCモバイルファーストが扱う HTML ブロックの最小単位です。
通常は<section>を使いますが、<main> 直下にある以下を除くすべての要素は、自動的にMFセクションとして認識されます。

  • section
  • hr
  • script
  • style
  • link
  • template

プレビュー

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

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

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

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

PREVIEW

新しいウィンドウで開く

ソースコード

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

<section class="mf-section">
    <span>MFセクション1</span>
</section>

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

<section class="mf-section">
    <span>MFセクション2</span>
</section>

<section class="mf-section">
    <span>MFセクション3</span>
</section>

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

<section class="mf-section">
    <span>MFセクション4</span>
</section>

<section class="mf-section">
    <span>MFセクション5</span>
</section>

<section class="mf-section">
    <span>MFセクション6</span>
</section>