見出し

h1~h6タグを使用し見出し要素を作ることができます。mainタグ直下に配置する場合とMFセクション内に配置する場合で表示レイアウトが異なるのが特徴です。

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

mainタグ直下に配置する

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

プレビュー

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

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

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

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

PREVIEW

新しいウィンドウで開く

ソースコード

HTML
<h1>HEADING</h1>

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

<section id="section2">
    <img src="../_assets/images/samples/2.jpg" />
</section>

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

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

プレビュー

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

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

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

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

PREVIEW

新しいウィンドウで開く

ソースコード

HTML
<section id="section1" class="">
    <h1>HEADING1</h1>
    <img src="../_assets/images/samples/1.jpg" />
</section>

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