デザインコンポーネント - MFセクション

MF セクションとは、alter.jsが扱う HTML ブロックの最小単位です。多彩なレイアウトオプションを指定することができます。

使用するオプション

MFセクションを配置する

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

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

スマートフォン上の表示
パソコン上の表示
実際の大きさで確認する

ソースコード

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>