デイトラ WEB制作コース初級編 9日目

2022年9月30日 11:23

続きで手直しとレスポンシブ対応を行う。レスポンシブはやはり鬼門でレイアウトがぐちゃぐちゃになってしまった…。難しい。しかし、

@media only screen and (max-width:767px) {｝}

はしっかり覚えていて、数か所上手く言った部分もある。

その後は7日目に作成した回答例を見つつ手直し。諸々必要な部分が抜けていたり、必要なかったりしたので見比べながら手直しをする。しかし、まるまる答えを写すのと違い考えながらと理解を深めながらなので、初回の学習に比べると格段に成果はあったのではないかと思う。
要点をコメントアウトでしっかりと残しながら手直しを行った
特に

input[type="email"] {
  width: 600px;
  border: 3px solid #d8d8d8;
  font-size: 18px;
  display: block;
  margin: auto;
  padding: 15px;
  border-radius: 999px;
  margin-bottom: 20px;
}

`input`のこの記述の仕方はしっかり覚えておこうと思う

自分なりの課題として`float`を使わずにコーディングしてみたがヘッダーがうまくいかない…。（タイトルが真ん中に来ない…）あとでメンターに質問してみる

追記
メンターに質問したところ

  .header-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

で解決！

また、`float` はあまり使用しない、`flex`を使うのを勧めるというのを多く見かける気がするので、質問してみたところ「違いについて調べてみてください」との回答

自分なりに

といくつかサイトを見たところ、やはり`float` はあまり使用しない様子。ただ、「回り込み」をする際には`float`を使用するようなので覚えておきたい

デイトラ WEB制作コース初級編 9日目

いいなと思ったら応援しよう！