ヘッダーは画面サイズでレイアウトが変わる

ヘッダーは狭い面積に沢山の要素が集中するため、レイアウトが複雑になる

PC 向けとモバイル向けで大きくレイアウトが異なるため、実現するにはさまざまなテクニックが必要

ヘッダーは PC とモバイルで表示が変わる

ヘッダーをモジュールに分割するために、デザインを確認する

ヘッダー部分は PC 向けとモバイル向けでデザインが大きく異なるのが特徴

モバイル向けデザインの時だけ、右上のボタンをタップするとナビゲーションが開くようになっている

ヘッダーのすぐ下にパンくずリストがある(cf. Labo 308)

パンくずリストは PC 向けレイアウトのときだけ表示する

テンプレートファイル

base.html
style.css