背景

MFセクション全体に背景を指定することができます。

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

MF セクショングループに背景を指定する

MF セクショングループに背景を設定する場合は、MFEdit のグループレイアウトオプションを設定します。

MF セクションに背景を指定する

MF セクションのclass属性にmf-width-fullexpandまたはmf-width-expandを指定し、MF セクションを画面幅全体に表示するようにします。画面幅全体に表示した MF セクションの背景画像を CSS で設定します。

プレビュー

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

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

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

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

PREVIEW

新しいウィンドウで開く

ソースコード

HTML
<section class="mf-width-expand contents">
    <h2>mf-width-expandを指定した場合</h2>
    <h3>縦長ページを横長にする HTML 変換</h3>
    <p>スマートフォン用デザインの HTML ツリーは、縦に長く並ぶシンプルな構造を持ちます。そのコンテンツを PC ブラウザで閲覧すれば、横長の PC では空白が多く間延びしたデザインになってしまいます。PC でのデザインを考慮すれば、HTML は複雑にならざるを得ず、スマートフォンのアクセスが多くなっても PC のデザインに引っ張られ、それ故に、コストが下がらない課題があります。</p>
</section>
CSS
.contents {
    background-color: #99cc00;
    padding: 20px;
}

バリエーション

mf-width-fullexpand を指定した場合

mf-width-* を指定しない場合