Labo 232: ヘッダーをモジュールに分割する
Labo 232: ヘッダーをモジュールに分割する
デザインの確認が終わったら、ヘッダーコンテナの要素をモジュールに分割する
PC 向けとモバイル向けでデザインが大きく変わるため、CSS を活用する
どのように分割したらうまく CSS が適用できるか、どんな CSS の機能を使えば良いかを考える
ヘッダーコンテナにはモバイル向けレイアウトの時だけ、ロゴとナビゲーションを開閉するボタンをひょじする
ロゴとボタンを並ばせるためにフレックスボックスを使うとしてモジュールを 3つに分ける
ロゴとボタンの下にはナビゲーションがある
ナビゲーションは PC 向けレイアウトの時には橫に並ぶ
モバイル向けレイアウトの時には縦に並ぶ
要素が並ぶ方向の切り替えにはフレックスボックスが使える
ナビゲーション全体を親要素で囲み、ひとつのモジュールと考える
結果として、ヘッダーは 4つのモジュールに分割する
モバイル向けレイアウトでナビゲーションを開閉する機能は、JavaScript プログラムを読み込む（cf. Labo 307）
パンくずリストコンテナの中身はこれ以上分割せずに、パンくずリストモジュールとして作成する
パンくずリストは PC 向けレイアウトの時だけ表示する