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

Kozue Blog

プログラミング 学習 記録

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

更新日:

こんにちは、こずえです。
プログラミング学習記録50日目です。
サイト模写の続きです。
今回の変更をもって模写完成とします。

所感:長いようで短いGWでしたね。

合計学習時間

前回までの時間:102.00[h]
今回の時間:1.25[h]
合計時間:103.25[h]

学習内容

前回に引き続きAirbnbのサイト模写です。
今回の変更をもって完成とします。

サイト模写の経過

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

  • ヘッダー:レスポンシブ対応(1128px)
CSS_practice_Airbnb_01 pure_css_day13

ヘッダー右側にあるナビゲーション要素

ホバー時にボーダーラインを表示させるのですが、ボーダーの有無で文字が上下に動いてしまいます。

ホバー時の表示のズレ

これを回避するため文字の要素の下にボーダーラインのみの要素を追加してホバー時に表示してあげれば…と考えたのですが、ネスト(※)や疑似要素で調べてみましたが、解決には至りませんでした。
※CSSでネストは使えないことがわかりました

そのため、妥協案として非ホバー時は白のボーダーを表示としています。

クリック時の動作

前回書いた検索ボックスと通ずるものがあると感じたためクリック時の動作を実装しませんでした。

模写に要した時間

今回模写に要した総時間は39.25hでした。
Git/Githubの導入や理解に使った時間を分けていなかったため、模写のみですとこれより数時間少なくなります。

振り返り

良かった点

CSSのみで取り組んだことにより、Bootstrapを使用して取り組んでいた時と比べレイアウトに注力することができました。

Bootstrapを使用していた時は、「Bootstrapではどう書くのか」や「機能として用意されているのか」といったことばかりになってしまい、HTML/CSSの基礎や模写に力を注げていませんでしたからね。

改善したい点

見切り発車な部分が多く後から後から必要なものを足し引きしていった結果、記述の冗長や一貫性の不足に繋がりました。

レスポンシブ対応では更に足し引きの頻度が増え、再利用がし辛いことから多くの時間が掛かりました。

事前準備に力を入れすぎて完璧主義になるのは本末転倒ですが、ある程度の枠組みは最初に決めておかないと後々大変な思いをしますね。

頭でイメージするだけでなく、簡単にでもいいので図に起こすといいのかなと思います(ワイヤーフレームとか)。
そういえば最初に少し書いていたような

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

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