【開発】Grid レイアウトで ログイン画面を作成する

[Jastin-Infj]

css にて flexbox の方法と Grid レイアウトの記述方法がある。 flexbox や grid を理解していないため、今回は Grid レイアウト記述を出来るようにする。

[Jastin-Infj]

43 に関連

[Jastin-Infj]

px 単位から fr 単位に変換出来る方法を探す。

fr 単位なら 縮小はせず、overflow 属性みたいに左にずれるようにしたい 単位によって 拡大・縮小時に動作が違う。 viewport だと ブラウザの領域でリサイズされるため、全体縮小する。

[Jastin-Infj]

viewport は 何でもかんでも px にすると レスポンシブ対応がとてもやりづらい。 適切な単位をしっかりと考えて行うべき

そのほうが、早くデザインが落とせる

[Jastin-Infj]

figma のフォントスタイルを再現できない。 同じ 値を利用しても、フォントサイズが少し違ったり、数値の影響が異なっている

[Jastin-Infj]

left margin-left の違い left オブジェクト単体移動 margin-left 全体に影響する

[Jastin-Infj]

header 部分 完成