メインビジュアル

メインビジュアルはサイトのファーストビューに表示される大きなイメージ領域です。サイトのイメージを左右する重要な要素です。

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

画面全体にイメージ領域を配置する

メインビジュアルを囲むMFセクションにclass属性mf-width-fullexpandを追加すると、画面全体にイメージ領域を拡大することができます。

プレビュー

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

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

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

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

PREVIEW

新しいウィンドウで開く

ソースコード

HTML
<hr class="mf-hr mf-col-1" style="display: none">

<section class="mf-width-fullexpand">
    <div class="main-visual">
        <img src="../_assets/images/samples/5.jpg" />
        <div class="copy">
            <span>GCMF</span>
            <p class="introduction">Goodbye Media Queries</p>
        </div>
    </div>
</section>
CSS
.main-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.main-visual .copy {
    color: #fff;
    position: absolute;
    left: 3vw;
    top: 3vh;
}
.main-visual .copy span {
    color: #fff;
    font-size: 3.6rem;
    letter-spacing: .5rem;
    font-weight: 900;
}
.main-visual .introduction {
    font-size: 1.6rem;
    letter-spacing: .2rem;
    font-weight: 900;
    margin: 0;
}

バリエーション

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