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

Kozue Blog

プログラミング 学習 記録

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

更新日:

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

所感:お花見を日曜日に行こうと考えていたのですが予報では曇り時々晴れの降水確率40%でした。晴れてくれるといいな。

合計学習時間

前回までの時間:56.00[h]
今回の時間:1.50[h]
合計時間:57.50[h]

学習内容

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

サイト模写の経過

今回はナビゲーションバーの折り畳み(navbar-collapse)部分を触りました。

変更内容としては、折り畳みを開いた時の部分の高さを縦幅いっぱいになるようにしました。

WebサイトAirbnb01模写_w397px_11日目_navbar-collapse_1

縦の足りない分は高さ100%の空のnav-itemを追加して実現しました。

しかし、Airbnb上の動作は折り畳みを展開してもコンテンツが表示された際に下にあるコンテンツ群は下がりません。

折り畳みを展開するということは、ナビゲーションバーとコンテンツの間に存在している隠れていたコンテンツが表示されるということですから、当然ただズレるだけになりますよね。

そこで、z軸の表示順(手前か奥)が頭に浮かんだため、試しに表示位置を固定することができるpositionプロパティを適用してみました。

WebサイトAirbnb01模写_w397px_11日目_navbar-collapse_2

表示位置は適当ですが、展開されたコンテンツの位置は固定されているため、他のコンテンツは下にズレません。

あとは幅やz軸の調整をすれば展開部分に関してはそれっぽくなるのではないかと考えています。

余談ですが、z-indexとpositionってどんなのだったかな?ということで自分で書いたメモを読み返したりしていました。

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

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