ヘッダー

ヘッダーはHTML5の記法に準拠して作成します。レイアウトオプションで表示幅を制御することができます。

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

ヘッダー

記述ルール

  • ページヘッダ(ロゴ画像、ハンバーガーメニュー等)は <header>に、記述する
  • <header>の class 属性でヘッダのレイアウトオプション(後述)を指定する
  • <main>内に<header>要素を配置しない

プレビュー

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

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

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

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

PREVIEW

新しいウィンドウで開く

ソースコード

HTML
<header class="mf-width-fullexpand">
    <div class="header_logo">
        <img alt="GCモバイルファースト" src="../_assets/images/shared/gcmf.svg">
    </div>
</header>
CSS
header {
    padding: 20px;
    background: #000;
}
header img {
    width: initial;
}

バリエーション

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

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