CSSがよく分からない動きをしてきた

こんにちは。新人エンジニアの岡山です。
本日も「今日やったこと・詰まったこと・学びになったこと」などを書いていきます。よろしくお願いします。

margin-bottomを直したら、上の要素が動いた

デザインチェックをしていて、margin-bottomを修正したところ、なぜか上の要素まで動いてしまうという現象に遭遇しました。

通常、対象の要素にmargin-bottomを設定すれば、その要素自体は動かず下に余白が広がるだけのはずです。でも今回は、対象の要素そのものが上に動くような変化をして、一向にデザインが合いませんでした。flexアイテムで起きているっぽい、というところまでは見えたのですが、原理は結局わからずじまいで、今回は解決できていません。かなり時間を食ってしまいました。

デプロイ失敗、原因はGitHub Secretsでした

デザインチェックが一区切りついたので、GitHubからデプロイしたところ、エラーが出てデプロイに失敗しました。

原因を調べてみると、環境変数の情報がGitHubに届いていないことが発覚。GitHubの設定 → Secrets and variables → 該当する環境変数を設定、という手順を踏んで再度デプロイしたところ、無事成功しました。

今後、環境変数を変更したタイミングでデプロイが失敗したときは、まずGitHubのSecretsを確認する、というのを今日の学びとして覚えておきたいです。

おわりに

perfect pixelは画面がチカチカするので目が疲れますね。

mikanからの一言

とりあえず毎日えらいです。日々何かしら失敗して学んで成功してまた失敗してを繰り返していて、少しずつアップグレードしていくおかやまくんをブログ上で感じられてこちらも楽しいです。

チカチカ画面には敵わないかもですが、ブルーライトカットメガネ超おすすめです！