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

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>

COPIED!
CSS
.contents {
    background-color: #99cc00;
    padding: 20px;
}

COPIED!

バリエーション

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

実際の大きさで確認する

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

実際の大きさで確認する