こんにちは、こずえです。
プログラミング学習記録44日目です。
サイト模写の続きです。
所感:そろそろジム再開しようかな。
合計学習時間
前回までの時間:83.00[h]
今回の時間:7.25[h]
合計時間:90.25[h]
学習内容
前回に引き続きAirbnbのサイト模写です。
サイト模写の経過
今回は以下の変更を行いました。
- ヘッダーアイコンのアコーディオン追加
- サーチバーのクリック後のレイアウト追加(以下3枚目)
※1枚目の画像のレイアウトが崩れていたので修正しました。(2019/04/30 0:40)

最小サイズのレイアウトはこれで一旦完成とします。
ヘッダー手強いです。

ヘッダーのアイコンをクリックするとアコーディオンが展開します。
実装はアコーディオン部分の表示にあわせてメインコンテンツとフッターを非表示にするようにしています。
理想は展開したアコーディオンが上に重なる形なのですが、アコーディオン内部の要素にあわせる&画面縦幅100%の実現ができませんでした。
どうやるのでしょうか…。

サーチバーをクリックするとヘッダーのレイアウトが変化してサーチバーとキャンセルのみとなります。
こちらもアコーディオンと同様の実装方法です。
納得いかない部分も多々ありますが、次のサイズ(レスポンシブ対応)に移ります。
ひとまず自分おつかれさま!(`・ω・´)<自分をほめてく!