デザインコンポーネント - 背景

使用するオプション

• MFセクショングループ
• MFセクション

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

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

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

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

ソースコード

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-* を指定しない場合