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

HTML/CSSコーディング復習② Web制作コース初級編

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

@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はもう古い!?flexとfloatの違い,使い分け,併用方法を解説

【図解解説】floatとflexboxはどのように使い分ける?｜CORECOLORS（コアカラ）

flexboxとfloat比較と使い分けまた簡単に横並びや中央配置にする方法

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