はじめに
2024年10月からデイトラのWeb制作コースの受講をスタートしました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
初級編DAY30の押さえておきたいポイント
レスポンシブ対応
1440pxがよくあるデスクトップのデザインカンプのサイズ。
flex-basis
display:flex;を親要素に指定し、子要素にflex-basisを設定することで、要素の横幅の指定ができる。
widthで指定するのと基本的には同じだが、flexのアイテムはこのbasisで横幅の指定が可能。
クリックできる要素にはアニメーションつけよう
PC画面幅の時は、メニューボタンなどクリックできる要素にはhoverのアニメーションをつけてあげたほうがユーザーフレンドリー。
タブレット、スマホについてはマウスホバーの概念がなく、「タップ」なので、hoverのアニメーションは不要。
display:grid;
横並びといえばdisplay:flex;だが、display:grid;でも横並びにできる。
gapなど余白を指定するときにgridのほうが良い場合がある模様。
Trial and Error memo
謎の余白・・・・
最後の最後で謎の余白が生まれた・・・
結果、Sassの入れ子がまちがっていた&mediascrennのmixinが誤っていた。
Sassの出力でずっとエラーが出ていたのに、なかなか気づくことができず、時間がかかってしまった。
まずうまくいかないときはエラーの出力がないかを最初に確認すべき！！
初級編DAY30の追加で調べたいことメモ
- Sassの本を読む
- flexboxについて深掘りする！
初級編DAY30の感想と記録
・・・なんとかできた！
参考コーディングがついているからようやくできた感はありました。
自分でコーディングしたらこのラビリンスから脱出できるのだろうか。
ちょっと不安ではあるけど、まずは進むのだ！！！！！
引き続きがんばろう！！！
