ヘッダーを2パターン作成しました

Webサイトの最上部にあるのがヘッダーです。

グローバルメニューやサイトのロゴが表示されることが多いです。

この記事では、以下の架空の要件、デザインで作成するWebサイトのヘッダーを2パターン紹介します。

要件

■ ホームページの所有者
  観葉植物を売っている会社

■ 会社名
  Ficus microcarpa

■ ヘッダーに含めたい内容
 ・会社のロゴ
 ・事業内容
 ・植物一覧
 ・採用情報
 ・お問い合わせ
 ・SNSのアイコン

デザイン

PC

TB

SP

パターン1: 固定ヘッダー

サイト

https://ki-hi-ro.com/component/header-pattern/fixed

ソースコード

パターン2: 途中で変化するヘッダー

サイト

https://ki-hi-ro.com/component/header-pattern/change

ソースコード