デザインコンポーネント - ヘッダー

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

使用するオプション

ヘッダー

記述ルール

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

スマートフォン上の表示
パソコン上の表示

ソースコード

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