デザインコンポーネント - 見出し

使用するオプション

• MFセクション

mainタグ直下に配置する

<main>直下に<h1>～<h3>を配置した場合は、1カラムのMFセクションとして表示されます。
見出しタグの後に複数のMFセクションが続く場合に使用します。
<h3>～<h6>は<main>直下には配置できません。

ソースコード

HTML

<h1>HEADING</h1>

<section id="section1" class="">
    <img src="../_assets/images/design-components/1.jpg" />
</section>

<section id="section2">
    <img src="../_assets/images/design-components/2.jpg" />
</section>

MFセクション内に配置する

MFセクション内に<h1>～<h6>を配置した場合は、MFセクションのカラム設定に応じたサイズで表示されます。

ソースコード

HTML

<section id="section1" class="">
    <h1>HEADING1</h1>
    <img src="../_assets/images/design-components/1.jpg" />
</section>

<section id="section2">
    <h1>HEADING2</h1>
    <img src="../_assets/images/design-components/2.jpg" />
</section>