半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録44日目

更新日:

こんにちは、こずえです。
プログラミング学習記録44日目です。
サイト模写の続きです。

所感:そろそろジム再開しようかな。

合計学習時間

前回までの時間:83.00[h]
今回の時間:7.25[h]
合計時間:90.25[h]

学習内容

前回に引き続きAirbnbのサイト模写です。

サイト模写の経過

今回は以下の変更を行いました。

  • ヘッダーアイコンのアコーディオン追加
  • サーチバーのクリック後のレイアウト追加(以下3枚目)

※1枚目の画像のレイアウトが崩れていたので修正しました。(2019/04/30 0:40)

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

CSS_practice_Airbnb_01 pure_css_day7-2

ヘッダーのアイコンをクリックするとアコーディオンが展開します。
実装はアコーディオン部分の表示にあわせてメインコンテンツとフッターを非表示にするようにしています。

理想は展開したアコーディオンが上に重なる形なのですが、アコーディオン内部の要素にあわせる&画面縦幅100%の実現ができませんでした。
どうやるのでしょうか…。

CSS_practice_Airbnb_01 pure_css_day7-3

サーチバーをクリックするとヘッダーのレイアウトが変化してサーチバーとキャンセルのみとなります。
こちらもアコーディオンと同様の実装方法です。

納得いかない部分も多々ありますが、次のサイズ(レスポンシブ対応)に移ります。

ひとまず自分おつかれさま!(`・ω・´)<自分をほめてく!

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.