リファレンス - MFセクションとは

GCモバイルファーストが扱う HTML ブロックの最小単位です

MF セクションとは

MF セクションとは、GCモバイルファーストが扱う HTML ブロックの最小単位です。MFセクションは、スマートフォンの1画面分のコンテンツとして考えられ、GCモバイルファーストを利用してデザイン・構築するMFセクションは、その単位で作られると変換結果として最適なものになるようになっています。

<main>直下に配置される<section>

<main>直下に配置される、<section>がMFセクションとして扱われます。

<!-- MFセクションが 3 つになります -->
<main>
    <section></section>
    <section></section>
    <section></section>
</main>

<!-- この場合、<main> 直下の <section> のみ、MFセクションとして扱われます。 -->
<main>
    <section>
        <section></section>
    </section>
</main>

MF セクションとして、扱われる HTML 要素

<main> 直下にある以下を除くすべての要素は、自動的にMFセクションとして認識されます。

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

ただし、子孫要素に<section>を含む要素は対象外です。

<main>
    <!-- MFセクションとして扱われます -->
    <div></div>

    <!-- MFセクションではありません -->
    <div>
        <!-- MFセクションとして扱われます -->
        <section></section>
        <!-- MFセクションとして扱われます -->
        <section></section>
    </div>
</main>

<main>直下ではない<section>

<form> 内の <section><div> 内の <section> も、MFセクションとして扱われます。

<main>
    <form>
        <!-- MFセクション -->
        <section></section>
        <section></section>
    </form>

    <div>
        <!-- MFセクション -->
        <section></section>
        <section></section>
    </div>
</main>

MF セクションに指定できるレイアウトオプション

レイアウトオプション : セクションを参照してください。