はじめに
2024年10月からデイトラのWeb制作コースの受講をスタートしました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
初級編DAY26−27の押さえておきたいポイント
svgの色をCSSで変更できる
アイコンなどのイメージは、imgタグではなくsvgを直接HTMLに入れることができる。
そうすることでCSSで操作ができるようになり、例えば、hoverしたときに色を変えることができる。
imgタグにしてしまうと、hoverするまえの画像とhoverしたあとの画像と2つ用意してコードを書かなければならない。
入れ方は、spanタグで囲ってsvgを入れればOK！
なお、レッスンで用意されていたsvg画像のsvgタグの最後にある、fill=”white”というところで色が決められているが、これを消してclass名をつけ、CSSでfillを指定することで色の制御ができる。
便利なVSCodeショートカットキー
command⌘＋Dで同じ記述を複数選択できる。
これで複数選択した状態で矢印移動し、必要な内容を加筆修正すれば一括で加筆修正できる。
Sassで「隣り合う」という条件を指定してスタイルをあてる
&__nav-item {
& + & {
margin-top: 24px;
}
}この書き方で、header__nav-itemとheader__nav-itemが隣り合う場合にmargin-top:24px;という意味になる。
ウインドウの高さを表す100vh
ヘッダーの高さを考慮して合計で高さいっぱいにしたい場合。
「height:calc(100vh – 88px)」と書いてあげることで・・・
100vhからヘッダーを高さ（88px）を引いて、ヘッダーとその下のコンテンツの合計でウインドウの高さいっぱいにする表見ができる。
初級編DAY26−27の追加で調べたいことメモ
- 全部復習したい・・・一通り終わったらもう一度作ってみたい。
初級編DAY26−27の感想と記録
なんとか終わったという印象・・・！
Day21,22の実践課題終わってからコードのイメージが少しつくようになったなぁと思っていたけど
今回のheaderではちょっと苦戦・・・！
クラス名の付け方とSassに慣れていないせいか、全体のスピード感にあわあわ・・・
ゆっくり再生して、使われているプロパティを検索して・・・でちょっと時間がかかってしまいました。
とりあえず進んでみてまた復習しようと思います！
引き続きがんばろう！
